[4주차-1] - 최우석

Part2-1팀 /4주차-1/최우석.md

@@ -0,0 +1,136 @@
+> 생소한 개념은 ✨로 표시
+
+## 구조분해할당
+### 배열 분해하기
+- 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우 객체나 배열을 변수로 '분해'할 수 있는 **구조 분해 할당(destructuring assignment)** 사용 가능<br>
+  ✨다양한 활용방법✨
+  - `split()`과 함께 사용하면 한 따옴표로 감싸진 여러 문자열을 쪼개서 활용할 수도 있음
+  - 쉼표를 사용하여 빈칸으로 놔두면 필요하지 않은 배열 요소를 무시할 수 있음
+  - 할당 연산자(`=`) 좌측에는 할당할 수 있는 모든 요소가 올 수 있고 우측에는 배열 말고도 이터러블(반복 가능한 객체)가 올 수 있음
+  - 두 변수에 저장된 값을 교활할 때 활용 가능
+    ```javascript
+    let myJob = 'Police';
+    let yourJob = 'Singer';
+
+    [myJob, youtJob] = [yourJob, myJob];
+    console.log(`${myJob} ${yourJob}`); // Singer Police 출력
+    ```
+  - `...`로 '몇 개만 쓰고 그 나머지' 요소를 다룰 수 있음(rest parameter를 사용한 변수는 맨 마지막에 위치해야함!)
+  - ✨ 할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 크더라도 에러 발생하지 않음 ➡️ WHY? 할당할 값이 없으면 undefined로 취급하기 때문! (기본값을 설정하자)
+
+### 객체 분해하기
+- 할당 연산자 우측에는 분해하고자 하는 객체, 좌측에는 상응하는 객체 프로퍼티의 '패턴' 작성
+```javascript
+// 기본형태
+// ✨ 패턴을 작성할 때 콜론`:`을 사용하여 다른 이름으로 할당할 수도 있음
+let {var1, var2} = {var1:..., var2:...}
+```
+  - 기본값을 설정할 수 있음. 함수 호출도 기본값으로 할당할 수 있음!!
+  - 프로퍼티가 여러 개일 때 원하는 값만 뽑아오는 것도 가능
+    ```javascript
+    let tableInfo = {
+      type: 'wood',
+      width: 200,
+      height: 10,
+    }
+    let {height} = tableInfo;
+    console.log(height); // 10 출력
+    ```
+  - rest parameter`...`도 사용 가능
+  - ✨ `let`으로 새로운 변수를 선언하지 않고 기존에 있던 변수에 할당할 수도 있지만 주의할 부분이 있음.
+    ```javascript
+    let type, width, height;
+
+    // 에러 발생 ➡️ 자바스크립트가 `{...}`를 코드 불럭으로 해석하기 때문
+    {type, width, height} = {type:'wood', width: 200, height: 10};
+    // 위의 코드를 소괄호`()`로 감싸서 코드 블럭이 아닌 표현식으로 해석하게 하면 에러 안남
+    ({type, width, height} = {type:'wood', width: 200, height: 10});
+
+    console.log(width); // 200 출력
+    ```
+
+### 중첩 구조 분해
+- 중첩된 객체로 이루어진 구조도 같은 형태로 할당할 수 있고 그 과정에서 분해하려는 객체에 없는 프로퍼티를 추가할 수도 있음!
+
+### 똑똑한 매개변수 
+- 파라미터를 너무 많이 받아야해서 순서에 유의해야 하는 함수, 함수에서 설정한 기본값을 사용해도 괜찮은 경우 넘겨주는 인자에 `undefined`를 여러 개 넘겨주는 함수 ➡️ BAD 함수
+- ✨ BAD 함수의 매개변수를 모두 모아 함수가 전달받은 객체를 분해 -> 변수에 할당 -> 작업을 수행하게 하는 함수 ➡️ NICE 함수
+- ✨ 함수 매개변수를 구조 분해할 때, 반드시 인수가 전달된다고 가정하고 사용된다는 점 유의하기!
+  - 예방하기 위해서 빈 객체`{}`를 인수 전체의 기본값으로 만들면 됨!
+    ```javascript
+    BadExample(); // 에러 발생 가능성 있음
+    NiceExample({}); // 모든 인수에 기본값이 할당됨
+    ```
+
+## 나머지 매개변수와 전개 구문
+### 나머지 매개변수 `...`
+- 함수는 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수에는 제한이 없음
+  - 함수를 호출할 때 정의할 때 작성한 인수의 개수보다 많은 인수를 전달하면 작성한 인수의 개수만 가지고 실행.
+  - 여분의 매개변수를 담을 배열 이름을 `...` 뒤에 붙이면 함수 선언부에 포함시킬 수 있음
+    - 이때의 `...`는 '남아있는 매개변수들을 한 곳에 모아 배열에 넣어라'는 의미
+    - 나머지 매개변수는 모든 남아있는 인수를 모으는 역할이라 맨 마지막에 작성해야함
+    ```javascript
+    function foodName(first, second, ...others) {
+      console.log(`${first} ${second}`); // banana apple
+      console.log(others[0]); // noodle
+      console.log(others.length); // 3
+    }
+    foodName('banana', 'apple', 'noodle', 'egg', 'cheese');
+    ```
+
+### arguments 객체
+- `arguments`를 사용하면 인덱스를 사용하여 인수에 접근할 수 있음
+- ✨ **유사 배열 객체**이기 때문에 `map()`사용할 수 없음..
+- ✨ `arguments`는 **인수 전체**를 담음 ➡️ 나머지 매개변수처럼 인수의 일부만 사용할 수 없음..
+- ✨ 화살표 함수는 `arguments`객체 지원하지 않음!
+
+### 스프레드 문법
+- 함수를 호출할 때 `...`를 사용하면 이터러블 객체가 인수 목록으로 확장됨
+  ```javascript
+  let arr1 = [1, 3, 5, 7];
+  let arr2 = [2, 4, 6, 8];
+  console.log(Math.max(...arr1, ...arr2)); // 8
+  ```
+- 배열을 합칠 때도 활용 가능!
+- 꼭 배열이 대상이 아니라도 **이터러블 객체라면** 스프레드 문법 사용 가능
+  ```javascript
+  let str = 'wooseok';
+  console.log([...str]); // w,o,o,s,e,o,k
+
+  // Array.from은 이터러블을 배열로 바꿔줌
+  console.log(Array.from(str)); // w,o,o,s,e,o,k
+  ```
+
+### 배열과 객체의 복사본 만들기
+```javascript
+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
+```
+```javascript
+let obj = { a: 1, b: 2, c: 3 };
+let objCopy = { ...obj }; // 객체를 펼쳐서 각 요소를 분리후, 매개변수 목록으로 만든 다음에
+                          // 매개변수 목록을 새로운 객체에 할당함
+
+// 객체 복사본의 프로퍼티들이 기존 객체의 프로퍼티들과 진짜 같을까요?
+alert(JSON.stringify(obj) === JSON.stringify(objCopy)); // true
+
+// 두 객체는 같을까요?
+alert(obj === objCopy); // false (참조가 다름)
+
+// 참조가 다르므로 기존 객체를 수정해도 복사본은 영향을 받지 않습니다.
+obj.d = 4;
+alert(JSON.stringify(obj)); // {"a":1,"b":2,"c":3,"d":4}
+alert(JSON.stringify(objCopy)); // {"a":1,"b":2,"c":3}
+```

Part2-1팀 /4주차-2/최우석.md

@@ -0,0 +1,74 @@
+> 생소한 개념은 ✨로 표시
+
+## 메서드와 this
+### 메서드 만들기
+- 자바스크립트에서는 객체의 프로퍼티에 함수를 할당하여 **객체에게 행동할 수 있는 능력을 부여함**
+- **메서드**란?
+  - 객체 프로퍼티에 할당된 함수
+  ```javascript
+  let dog = {
+    name: 'Charlie',
+    age: 13
+  }
+  dog.vite = function() {
+      console.log('물어뜯기!');
+  };
+
+  dog.vite(); // 물어뜯기!
+  ```
+- 객체를 사용하여 개체를 표현하는 방식 ➡️ **객체 지향 프로그래밍(object-oriented programming, OOP)**
+
+#### 메서드 단축 구문
+- 위의 예시코드를 `function`키워드 없이 정의하는 코드는 다음과 같다.
+  ```javascript
+  let dog = {
+    name: 'Charlie',
+    age: 13,
+    vite() {
+      console.log('물어뜯기!');
+    },
+  };
+  ```
+
+### 메서드와 this
+- ✨ 메서드 내부에서 `this`키워드를 사용해 객체에 접근할 수 있음
+  - ✨ 이때 '점 앞'의 `this`는 **메서드를 호출할 때 사용된 객체**를 나타냄
+  ```javascript
+  let dog = {
+    name: 'Charlie',
+    age: 13,
+    call() {
+      console.log(this.name);  // 여기에서 'this'는 '현재 객체'(dog 객체). this 대신에 user 써도 됨
+    },
+  };
+  ```
+  - user처럼 외부 변수를 사용해 객체를 참조하면 그 변수를 복사한 뒤 다른 값으로 덮어씌웠다는 특수한 상황에 대응하기 어려움
+
+### 자유로운 this
+- ✨ 자바스크립트에서는 다른 프로그래밍 언어의 `this`와 달리 **모든 함수에서 사용 가능**
+```javascript
+function call() {
+  console.log(this.name);  // 이 코드는 문법 에러가 일어나지 않는다.
+}
+```
+  - ✨ 이 코드에서 문법 에러가 나지 않는 이유? ➡️ `this`값은 **런타임에 결정**. 동일한 함수라도 다른 객체에서 호출했다면 `this`가 참조하는 값이 달라짐
+- 객체 없이 호출할 때의 `this`
+  - 엄격 모드라면? ➡️ `this`는 `undefined` 할당
+  - 엄격 모드가 아니라면? ➡️ `this`는 전역 객체 참조(`window`객체)
+
+### this가 없는 화살표 함수
+- 화살표 함수는 **'고유한'** `this`를 갖지 않음
+- 화살표 함수에서 `this`를 참조하면 **화살표 함수가 아닌 '평범한' 외부 함수에서 `this`값 가져옴**
+  - 별개의 `this`가 만들어지지 않고 외부 컨텍스트에 있는 `this`를 이용하고 싶은 경우에 화살표 함수가 유용
+  ```javascript
+  let dog = {
+    name: 'Charlie',
+    age: 13,
+    call() {
+      let arrowFunction = () => console.log(this.name);  // arrowFunction()의 this는 call()의 this가 됨
+      arrowFunction();
+    },
+  };
+
+  dog.call();  // Charlie
+  ```