4주차-1, 4주차-2 이동국

Part2-2팀 /4주차-1/이동국.md

@@ -0,0 +1,164 @@
+# 구조 분해 할당
+## 배열 분해하기
+배열뿐만 아니라 모든 이터러블(iterable, 반복 가능한 객체)에 구조 분해 할당을 적용할 수 있습니다.
+```js
+// 문자열, Set 분해
+let [a, b, c] = "abc"; // ["a", "b", "c"]
+let [one, two, three] = new Set([1, 2, 3]);
+```
+
+객체의 키와 값 순회하기
+```js
+// 객체의 키와 값 순회하기
+for (let [key, value] of Object.entries(user)) {
+  alert(`${key}:${value}`); // name:John, age:30이 차례대로 출력
+}
+```
+
+'...'로 나머지 요소 가져오기
+```js
+// rest는 배열입니다.
+let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
+```
+## 객체 분해하기
+```js
+// 객체 분해하기
+let options = {
+  title: "Menu"
+};
+
+let {width: w = 100, height: h = 200, title} = options;
+alert(width); // ReferenceError: width is not defined
+alert(w); // 100
+```
+
+```js
+// let 없이 사용하기
+let title, width, height;
+
+// SyntaxError: Unexpected token '=' 이라는 에러가 아랫줄에서 발생합니다.
+// {...}을 코드 블록으로 인식하기 때문에 전체에 () 붙여 표현식으로 해석하게 하기.
+{title, width, height} = {title: "Menu", width: 200, height: 100};
+```
+
+### 중첩 구조 분해
+```js
+// 중첩 구조 분해
+let options = {
+  size: {
+    width: 100,
+    height: 200
+  },
+  items: ["Cake", "Donut"],
+  extra: true
+};
+
+// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
+let {
+  size: { // size는 여기,
+    width,
+    height
+  },
+  items: [item1, item2], // items는 여기에 할당함
+  title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함
+} = options;
+
+alert(size); // ReferenceError: size is not defined
+alert(item1); // Cake
+```
+
+### 똑똑한 함수 매개변수
+```js
+// 똑똑한 함수 매개변수
+let options = {
+  title: "My menu",
+  items: ["Item1", "Item2"]
+};
+
+function showMenu({
+  title = "Untitled",
+  width: w = 100,  // width는 w에,
+  height: h = 200, // height는 h에,
+  items: [item1, item2] // items의 첫 번째 요소는 item1에, 두 번째 요소는 item2에 할당함
+}) {
+  alert( `${title} ${w} ${h}` ); // My Menu 100 200
+  alert( width ); // ReferenceError: width is not defined
+  alert( item1 ); // Item1
+  alert( item2 ); // Item2
+}
+
+showMenu(options);
+```
+
+
+showMenu()의 에러 예방하기
+```js
+// 기본값으로 {} 빈 객체 전달하기 (반드시 인수가 전달된다고 가정되는 문제 해결)
+function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
+  alert( `${title} ${width} ${height}` );
+}
+
+showMenu(); // Menu 100 200
+```
+
+# 나머지 매개변수와 전개 구문
+나머지 매개변수는 항상 마지막에 있어야 합니다.
+```js
+function f(arg1, ...rest, arg2) { // ...rest 후에 arg2가 있으면 안 됩니다.
+  // 에러
+}
+```
+
+## arguments 객체
+arguments 객체는 유사 배열 객체(array-like object)이면서 이터러블(iterable) 객체다.
+화살표 함수는 arguments 객체를 지원하지 않는다.
+
+## 스프레드 문법
+```js
+let arr = [3, 5, 1];
+
+alert( Math.max(...arr) ); // 5 (전개 구문이 배열을 인수 목록으로 바꿔주었습니다.)
+```
+
+## 배열과 객체의 복사본 만들기
+```
+let arr = [1, 2, 3];
+let arrCopy = [...arr]; // 배열을 펼쳐서 각 요소를 분리후, 매개변수 목록으로 만든 다음에
+                        // 매개변수 목록을 새로운 배열에 할당함 (얕은 복사)
+
+// 배열 복사본의 요소가 기존 배열 요소와 진짜 같을까요?
+alert(JSON.stringify(arr) === JSON.stringify(arrCopy)); // true
+
+// 두 배열은 같을까요?
+alert(arr === arrCopy); // false (참조가 다름)
+
+// 참조가 다르므로 기존 배열을 수정해도 복사본은 영향을 받지 않습니다.
+arr.push(4);
+alert(arr); // 1, 2, 3, 4
+alert(arrCopy); // 1, 2, 3
+```
+
+*깊은 복사
+```js
+const a = { x: { y: 1 } };
+const b = JSON.parse(JSON.stringify(a)); // 깊은 복사
+b.x.y = 2;
+console.log(a.x.y); // 1, 원본은 변경되지 않음
+```
+
+Q: 유사 배열(array-like) 객체와 이터러블(iterable) 객체의 차이점?
+유사 배열 객체: 배열처럼 인덱스와 length 속성을 가지지만 실제 배열이 아닌 객체.
+예) arguments, NodeList, DOM 컬렉션(document.querySelectorAll 등)
+
+이터러블 객체: `for ... of` 루프 또는 전개 연산자 `...` 등에서 반복할 수 있는 객체
+예) Array, String, Set, Map
+
+| 구분              | 유사 배열         | 이터러블        |
+| --------------- | ------------- | ----------- |
+| 인덱스 접근          | 가능 (`obj[0]`) | 대부분 불가      |
+| length 속성       | 있음            | 대부분 없음      |
+| 배열 메서드          | 없음            | 없음 (배열이 아님) |
+| for...of        | 불가능           | 가능          |
+| 스프레드 연산자 `...`  | 불가능           | 가능          |
+| Symbol.iterator | 없음            | 있음          |
+

Part2-2팀 /4주차-2/이동국.md

@@ -0,0 +1,48 @@
+# 메서드와 this
+메서드 내부에서 `this`를 사용하면 객체에 접근할 수 있습니다.
+`this`값은 런타임에 결정된다. (컨텍스트에 따라 달라진다)
+
+## 객체 없이 호출하기
+```js
+function sayHi() {
+  alert(this);
+}
+
+sayHi(); // undefined
+```
+위와 같은 코드를 엄격 모드에서 실행하면, this엔 undefined가 할당됩니다. this.name으로 name에 접근하려고 하면 에러가 발생하죠.
+그런데 엄격 모드가 아닐 때는 this가 전역 객체를 참조합니다.
+
+this는 항상 메서드가 정의된 객체를 참조할 것이라고 착각하죠. 이런 개념을 'bound this’라고 합니다.
+자바스크립트에서 this는 런타임에 결정됩니다. 메서드가 어디서 정의되었는지에 상관없이 this는 ‘점 앞의’ 객체가 무엇인가에 따라 ‘자유롭게’ 결정됩니다.
+
+## 문제
+```js
+function makeUser() {
+  return {
+    name: "John",
+    ref: this
+  };
+};
+
+let user = makeUser();
+
+alert( user.ref.name ); // 결과가 어떻게 될까요?
+```
+에러가 발생합니다. user.ref.name = makeUser().ref.name = undefined.name
+
+에러가 발생하지 않게 수정한 코드
+```js
+function makeUser() {
+  return {
+    name: "John",
+    ref() {
+      return this;
+    }
+  };
+};
+
+let user = makeUser();
+
+alert( user.ref().name ); // John
+```