[4주차-1], [4주차-2] - 조대원

Part2-9팀/4주차-1/조대원.md

@@ -0,0 +1,322 @@
+# 구조 분해 할당
+
+## 배열 분해하기
+
+```js
+// 이름과 성을 요소로 가진 배열
+let arr = ["Bora", "Lee"]
+
+// 구조 분해 할당을 이용해
+// firstName엔 arr[0]을
+// surname엔 arr[1]을 할당하였습니다.
+let [firstName, surname] = arr;
+
+alert(firstName); // Bora
+alert(surname);  // Lee
+
+// split을 활용한 분해 할당
+// let [firstName, surname] = "Bora Lee".split(' ');
+alert(firstName); // Bora
+alert(surname);  // Lee
+
+// 문자열도 가능
+let [a, b, c] = "def";
+alert(a); // d
+alert(b); // e
+alert(c); // f
+
+// 두 변수에 저장된 값 교환
+let guest = "Jane";
+let admin = "Pete";
+
+// 변수 guest엔 Pete, 변수 admin엔 Jane이 저장되도록 값을 교환함
+[guest, admin] = [admin, guest];
+
+alert(`${guest} ${admin}`); // Pete Jane(값 교환이 성공적으로 이뤄졌습니다!)
+```
+
+## ...로 나머지 요소 가져오기
+```js
+let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
+
+alert(name1); // Julius
+alert(name2); // Caesar
+
+// `rest`는 배열입니다.
+alert(rest[0]); // Consul
+alert(rest[1]); // of the Roman Republic
+alert(rest.length); // 2
+```
+
+## 기본값
+```js
+// 기본값
+let [name = "Guest", surname = "Anonymous"] = ["Julius"];
+
+alert(name);    // Julius (배열에서 받아온 값)
+alert(surname); // Anonymous (기본값)
+```
+
+## 객체 분해하기
+```js
+let options = {
+  title: "Menu",
+  width: 100,
+  height: 200
+};
+
+let {title, width, height} = options;
+
+alert(title);  // Menu
+alert(width);  // 100
+alert(height); // 200
+
+// let {...} 안의 순서가 바뀌어도 동일하게 동작함
+let {height, width, title} = { title: "Menu", height: 200, width: 100 }
+
+let options = {
+  title: "Menu",
+  width: 100,
+  height: 200
+};
+
+// { 객체 프로퍼티: 목표 변수 }
+let {width: w, height: h, title} = options;
+
+// width -> w
+// height -> h
+// title -> title
+
+alert(title);  // Menu
+alert(w);      // 100
+alert(h);      // 200
+
+// 기본 값 지정
+let options = {
+  title: "Menu"
+};
+
+let {width = 100, height = 200, title} = options;
+
+alert(title);  // Menu
+alert(width);  // 100
+alert(height); // 200
+```
+
+## 나머지 패턴 '...'
+```js
+let options = {
+  title: "Menu",
+  height: 200,
+  width: 100
+};
+
+// title = 이름이 title인 프로퍼티
+// rest = 나머지 프로퍼티들
+let {title, ...rest} = options;
+
+// title엔 "Menu", rest엔 {height: 200, width: 100}이 할당됩니다.
+alert(rest.height);  // 200
+alert(rest.width);   // 100
+
+
+// let 없이 사용하기
+let title, width, height;
+
+// 에러가 발생하지 않습니다. (()괄호를 활용하여 코드 블록이 아닌 표현식으로 해석하게 하기)
+({title, width, height} = {title: "Menu", width: 200, height: 100});
+
+alert( title ); // Menu
+```
+
+## 중첩 구조 분해
+```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(title);  // Menu
+alert(width);  // 100
+alert(height); // 200
+alert(item1);  // Cake
+alert(item2);  // Donut
+```
+
+## 똑똑한 함수 매개변수
+```js
+// 함수에 전달할 객체
+let options = {
+  title: "My menu",
+  items: ["Item1", "Item2"]
+};
+
+// 똑똑한 함수는 전달받은 객체를 분해해 변수에 즉시 할당함
+function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
+  // title, items – 객체 options에서 가져옴
+  // width, height – 기본값
+  alert( `${title} ${width} ${height}` ); // My Menu 200 100
+  alert( items ); // Item1, Item2
+}
+
+showMenu(options);
+
+
+// 중첩 객체와 콜론의 조합
+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( item1 ); // Item1
+  alert( item2 ); // Item2
+}
+
+showMenu(options);
+
+// 모든 인수에 기본 값을 할당해 주기
+showMenu({}); // 모든 인수에 기본값이 할당됩니다.
+
+showMenu(); // 에러가 발생할 수 있습니다.
+
+function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
+  alert( `${title} ${width} ${height}` );
+}
+
+showMenu(); // Menu 100 200
+```
+
+
+
+# 나머지 매개변수와 전개 구문
+
+## 나머지 매개변수 ...
+
+```js
+function sumAll(...args) { // args는 배열의 이름입니다.
+  let sum = 0;
+
+  for (let arg of args) sum += arg;
+
+  return sum;
+}
+
+alert( sumAll(1) ); // 1
+alert( sumAll(1, 2) ); // 3
+alert( sumAll(1, 2, 3) ); // 6
+
+// 매개변수 배열로 모으기
+function showName(firstName, lastName, ...titles) {
+  alert( firstName + ' ' + lastName ); // Bora Lee
+
+  // 나머지 인수들은 배열 titles의 요소가 됩니다.
+  // titles = ["Software Engineer", "Researcher"]
+  alert( titles[0] ); // Software Engineer
+  alert( titles[1] ); // Researcher
+  alert( titles.length ); // 2
+}
+
+showName("Bora", "Lee", "Software Engineer", "Researcher");
+```
+
+
+## arguments 객체
+```js
+function showName() {
+  alert( arguments.length );
+  alert( arguments[0] );
+  alert( arguments[1] );
+
+  // arguments는 이터러블 객체이기 때문에
+  // for(let arg of arguments) alert(arg); 를 사용해 인수를 펼칠 수 있습니다.
+}
+
+// 2, Bora, Lee가 출력됨
+showName("Bora", "Lee");
+
+// 1, Bora, undefined가 출력됨(두 번째 인수는 없음)
+showName("Bora");
+```
+
+## 스프레드 문법
+```js
+let arr = [3, 5, 1];
+
+alert( Math.max(...arr) ); // 5 (전개 구문이 배열을 인수 목록으로 바꿔주었습니다.)
+
+// 여러개도 가
+let arr1 = [1, -2, 3, 4];
+let arr2 = [8, 3, -8, 1];
+
+alert( Math.max(...arr1, ...arr2) ); // 8
+
+// 합치기도 가능
+let arr = [3, 5, 1];
+let arr2 = [8, 9, 15];
+
+let merged = [0, ...arr, 2, ...arr2];
+
+alert(merged); // 0,3,5,1,2,8,9,15 (0, arr, 2, arr2 순서로 합쳐집니다.)
+
+// 문자열 분해
+let str = "Hello";
+
+alert( [...str] ); // H,e,l,l,o
+```
+
+
+## 배열과 객체의 복사본 만들기
+```js
+// 배열 복사
+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
+
+// 객체 복사
+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}
+```