week4

나범수/week3/10. 객체 리터럴.md

@@ -0,0 +1,220 @@
+# 객체 리터럴
+
+태그: 10장
+
+# 객체란
+
+---
+
+js는 객체 기반의 프로그래밍 언어이며, js를 구성하는 거의 **모든 것** 이 객체다.
+
+원시 값을 제외한 나머지 값 (함수, 배열, 정규 표현식 등)은 모두 객체다.
+
+원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다.
+
+객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 프로피터 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다.
+
+```jsx
+var counter = {
+	num: 0,
+	fincrease: function() {
+		this.num++;
+	}
+};
+```
+
+이처럼 객체는 프로퍼티와 메서드로 구성된 집합체다. 프로퍼티와 메서드의 역할은 다음과 같다.
+
+- 프로퍼티: 객체의 상태를 나타내는 값
+- 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작
+
+<aside>
+💡 js의 객체는 함수와 밀접한 관계를 가진다. 함수로 객체를 생성하기도 하며 함수 자체가 객체이기도 하다. js에서 함수와 객체는 분리해서 생각할 수 없는 개념이다.
+
+</aside>
+
+# 객체 리터럴에 의한 객체 생성
+
+---
+
+자바 같은 클래스 기반 객체 지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성한다.
+
+자바스크립트는 프로토타입 기반 객체 지향 언어로서 클래스 기반 객체 지향 언어와는 달리 다양한 방법을 지원한다.
+
+- 객체 리터럴
+- Object 생성자 함수
+- 생성자 함수
+- Object.create메서드
+- 클래스(ES6)
+
+객체 리터럴은 ({…})중괄호 내에 0개 이상의 프로퍼티를 정의한다. 변수에 할당되는 시점에  자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성한다.
+
+```jsx
+var person = {
+  name: "Lee",
+  sayHello: function () {
+    console.log(`Hello! My name is ${this.name}.`);
+  },
+};
+console.log(typeof person); //object
+console.log(person); //{name:"Lee",sayHello:f}
+```
+
+→ 객체 리터럴의 중갈호는 코드 블록을 의미하지 않는다. 코드 블록의 닫는 중괄호 뒤에는 세미클론을 붙이지 않는다. 하지만 객체 리터럴은 값으로 평가되는 표현식이다. 따라서 객체 리터럴의 닫는 중괄호 뒤에는 세미클론을 붙인다.
+
+→ 객체 리터럴 외의 객체 생성 방식은 모두 함수를 사용해 객체를 생성한다. 
+
+# 프로퍼티
+
+---
+
+**객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.**
+
+프로퍼티 키와 프로퍼티 값으로 사용할 수 있는 값은 다음과 같다.
+
+- **프로퍼티 키**: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
+- **프로퍼티 값**: 자바스크립트에서 사용할 수 있는 모든 값.
+
+심벌 값도 프로퍼티 키로 사용할 수 있지만 일반적으로 문자열을 사용한다. 이 때 프로퍼티 키는 문자열이므로 따음표로 묶어야 한다. 
+
+⇒ 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따음표를 사용해야 한다.
+
+```jsx
+var person = {
+  firstName: "Ung_mo",
+  "last-name": "Lee",
+};
+console.log(person); // {firstName: "Ung-mo", last-name: "Lee"}
+```
+
+⇒ 프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다. 
+
+```jsx
+var foo = {
+    0: 1,
+    1: 2,
+    2: 3
+};
+console.log(foo); // {0:1 ,1 :2 ,2 :3}
+```
+
+⇒ 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어 쓴다. 이 때 에러가 발생하지 않는다.
+
+```jsx
+var foo = {
+    name: "Lee",
+    name: "Kim"
+};
+console.log(foo); // {name: "Kim"}
+```
+
+# 메서드
+
+---
+
+자바스크립트의 함수는 객체다. 따라서 함수는 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용할 수 있다.
+
+```jsx
+var circle = {
+    radius: 5, //프로퍼티
+
+    //원의 지름
+    getDiameter: function() {
+        return 2 * this.radius
+    }
+}
+
+console.log(circle.getDiameter()) //10
+```
+
+# 프로퍼티 접근
+
+---
+
+프로퍼티에 접근하는 방법
+
+- 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법
+- 대괄호 프로퍼티 접근 연산자([…])를 사용하는 대괄호 표기법
+
+```jsx
+var person = {
+  name: "Lee",
+};
+
+console.log(person.name); //Lee
+console.log(person["name"]); //Lee
+```
+
+대괄호 표기법을 사용하는 경우 **대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따음표로 감싼 문자열이어야 한다.**
+
+# 프로피터 값 갱신
+
+---
+
+이미 존재하는 프로퍼티에 값을 할당하면 갱신된다.
+
+```jsx
+var person = {
+    name: "Lee"
+}
+
+person.name = "Kim"
+console.log(person) //{name: "Kim"}
+```
+
+# 프로퍼티 동적 생성
+
+---
+
+존재하지 않는 프로퍼티에 값을 할당하면 동적으로 생성되어 추가된다.
+
+```jsx
+var person = {
+    name: "Lee"
+}
+
+person.age = "20"
+console.log(person) //{name: "Kim", age: 20}
+```
+
+# 프로퍼티 삭제
+
+---
+
+delete연산자는 객체의 프로퍼티를 삭제한다.
+
+```jsx
+var person = {
+  name: "Lee",
+};
+
+person.age = "20";
+
+delete person.age;
+delete person.address;
+console.log(person); //{name: "Kim"}
+```
+
+→ 존재하지 않는 프로퍼티를 삭제하면 에러 없이 무시된다.
+
+# ES6에서 추가된 객체 리터럴의 확장 기능
+
+---
+
+## 프로퍼티 축약 표현
+
+객체 리터럴의 프로퍼티는 프로퍼티 키와 프로퍼티 값으로 구성된다. 프로퍼티 값은 변수에 할당된 값, 즉 식별자 표현식일 수도 있다.
+
+```jsx
+var x = 1,
+  y = 2;
+
+var obj = {
+  x: x,
+  y: y,
+};
+
+console.log(obj); //{ x: 1, y: 2 }
+```
+
+→ 이 때 변수 이름과 프로퍼티 키의 이름이 동일할 때 프로퍼티 키를 생략할 수 있다.

나범수/week3/11. 원시 값과 객체의 비교.md

@@ -0,0 +1,137 @@
+# 원시 값과 객체의 비교
+
+태그: 11장
+
+# 원시 값
+
+---
+
+## 변경 불가능한 값
+
+**원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다.** 
+
+```jsx
+const o = {};
+o.a = 1;
+console.log(o); //{ a: 1 }
+```
+
+const 키워드를 사용해 선언한 변수는 재할당이 금지된다. 상수는 재할당이 금지된 변수일 뿐이다.
+
+**변경 불가능하다는 것은 변수가 아니라 값에 대한 진술이다.**
+
+```jsx
+const o = {};
+
+o.a = 1;
+console.log(o); //{ a: 1 }
+```
+
+⇒ const 키워드를 사용해 선언한 변수는 재할당이 금지도니다.  상수는 재할당이 금지된 변수일 뿐이다.
+
+하지만 const 키워드를 사용해 선언한 변수에 할당한 객체는 변경할 수 있다.
+
+## 문자열과 불변성
+
+1개의 문자는 2바이트의 메모리 공간에 저장된다. 따라서 문자열은 몇 개의 문자로 이뤄졌느냐에 따라 필요한 메모리 공간의 크기가 결정된다. 
+숫자 값은 1도, 100000도 동일한 8바이트가 필요하다.
+
+문자열은 유사 배열 객체이면서 이터러블이므로 배열과 유사하게 각 문자에 접근할 수 있다.
+
+자바에서는 문자열을 String객체로 처리하지만 자바스크립트는 개발자의 편의를 위해 원시 타입인 문자열 타입을 제공한다. 이는 원시타입이며 변경 불가능하다.
+
+---
+
+```jsx
+var str = "string";
+str[0] = "S";
+console.log(str); //string
+```
+
+str[0] = “S”처럼 이미 생성된 문자열의 일부 무자를 변경해도 반영되지 않는다. 문자열은 변경 불가능한 겂이기 때문이다.
+
+원시 값은 어떤 일이 있어도 불변한다.
+
+## 값에 의한 전달
+
+```jsx
+var score = 80;
+var copy = score;
+
+console.log(score, copy); // 80 80
+console.log(score === copy); // true
+
+score = 100;
+
+console.log(score, copy); // 100 80
+console.log(score === copy); // false
+```
+
+변수 score와 copy 주소가 다르더라도 === 연산자가 true 를 반환하는 이유는, 자바스크립트에서 원시 타입 변수는 값 자체를 비교하기 때문이다
+
+자바스크립트에서 원시 타입 변수는 메모리 주소가 아닌 값을 저장한다. 때문에 copy, score의 메모리 할당 주소가 달라고 === 연산자는 true를 반환한다.
+
+```jsx
+var score = 80;
+var copy = 80;
+
+console.log(score, copy); // 80 80
+console.log(score === copy); // true
+```
+
+때문에 위의 경우에도 ===연산자는 true를 반환한다.
+
+# 객체
+
+---
+
+객체는 프로퍼티의 개수가 정해져 있지 않으며, 동적으로 추가되고 삭제할 수 있다. 또한 프로퍼티의 값에도 제약이 없다.
+
+## 변경 가능한 값
+
+객체 타입의 값, 즉 객체는 변경 가능한 값이다.
+
+원시 값을 할당한 변수가 기억하는 메모리 주소를 통해 접근할 수 있다. 메모리 공간에 접근하면 참조 값에 접근할 수 있다.
+
+```jsx
+const v = 1;
+// " 깊은 복사"라고부 르기도 한다.
+const c1 = v;
+console.log(c1 === v); //true
+const o = { x: 1 };
+// "얕은복사"라고부르기도한다.
+const c2 = 0;
+console.log(c2 === 0); // true
+```
+
+## 참조에 의한 전달
+
+객체를 가리키는 변수를 다른 변수에 할당하면 원본의 **참조 값이 복사되어** 전달된다. 이를 참조에 의한 전달이라고 한다.
+
+![Untitled](%E1%84%8B%E1%85%AF%E1%86%AB%E1%84%89%E1%85%B5%20%E1%84%80%E1%85%A1%E1%86%B9%E1%84%80%E1%85%AA%20%E1%84%80%E1%85%A2%E1%86%A8%E1%84%8E%E1%85%A6%E1%84%8B%E1%85%B4%20%E1%84%87%E1%85%B5%E1%84%80%E1%85%AD%20310ceeeb976b498daf54871e54a7a899/Untitled.png)
+
+결국 “값에 의한 전달”과 “참조에 의한 전달”은 식별자가 기억하는 메모리 공간에 저장되어 있는 값을 복사해서 전달한다는 면에서 동일한다. 
+
+⇒ 자바스크립트에는 “참조에 의한 전달”은 존재하지 않고 “값에 의한 전달”만이 존재한다고 말할 수 있다.
+
+```jsx
+var person1 = {
+  name: "Lee",
+};
+var person2 = {
+  name: "Lee",
+};
+console.log(person1 === person2); //1
+console.log(person1.name === person2.name); //2
+
+```
+
+=== 일치 비교 연산자는 변수에 저장되어 있는 값을 타입 변환하지 않고 비교한다.
+
+객체 리터럴은 평가될 때 마다 객체를 생성한다. 따라서 person1 변수와 person2변수가 가르키는 객체는 비록 내용은 같지만 다른 메모리에 저장된 별개의 객체다. 
+
+→ 즉 person1 변수와 person2 변수의 참조 값은 전혀 다른 값이다. 따라서 1은 false다.
+
+하지만 프로퍼티 값을 참조하는 person1.name과 person2.name은 값으로 평가될 수 있는 표현식이다. 두 표현식 모두 원시 값 “Lee”로 평가된다.
+
+→ 2는 true다.