Merge pull request #5 from dangen-effy/ISSUE-4

effy-coding · web-flow · commit b8c6b7b94e65 · 2020-02-28T09:48:07.000+09:00
Add: Spread Syntax, Rest Elements
diff --git a/README.md b/README.md
@@ -39,10 +39,14 @@
 
 ## 모던 자바스크립트가 다루는 개념
 
-[Rest Parameters](#rest-parameters)
+[Spread Syntax](#spread-syntax)
 
 [Destructuring Assignment](#destructuring-assignment)
 
+[Rest Parameters](#rest-parameters)
+
+[Rest Elements](#rest-elements)
+
 [Default Parameter](#default-parameter)
 
 [Named Parameter](#named-parameter)
@@ -73,61 +77,76 @@ Object.keys
 
 ---
 
-# Rest Parameters
+# Spread Syntax
 
 ### 정의
 
-Rest Parameters 는 정해지지 않은 수 매개변수를 **실제 배열**로 나타낼 수 있게 합니다.
+Spread Syntax 는 특정 객체 혹은 배열의 나머지 요소들을 어떤 객체 혹은 배열 리터럴에 풀어 놓습니다.
 
-## 1. 나머지 매개변수 예시
+### 특징
 
-👉 시나리오: 개수가 정해지지 않은 매개변수를 입력 받아 이의 총 합을 구하는 함수를 작성하세요.
+Spread Syntax 로 새로운 변수가 선언되지 않습니다.
+
+## 1. 배열 전개구문
+
+## 활용 1: 안전한 복사
+
+👉 시나리오:  `arr1` 과 똑같은 `arr2` 를 만드세요.
+
+👉 조건:  `arr1` 의 변형이 `arr2` 에 영향을 미치지 않게 하세요.
 
 ### 불—편
-    
+
 ```js
-function sum (a, b, ... y, z) {
-  return a + b + ... + y + z
-} // [a-z] 까지 입력받을 수 있습니다. 즉 매개변수의 개수가 정해져 있습니다. 👎
-    
-console.log(sum(1, 2, 3, 4, 5, 6, 7, 8)) // [i-z] 까지 undefined, 때문에 NaN 출력 👎
+const arr1 = [1, 2, 3]
+const arr2 = arr1 // arr2 는 arr1 를 참조합니다.
+
+arr1.push(4)
+
+console.log(arr1) // -> [ 1, 2, 3, 4 ]
+console.log(arr2) // -> [ 1, 2, 3, 4 ] arr2 까지 변형됐습니다. 👎
 ```
 
 ### 편—안 ✅
 
 ```js
-function sum (...params) {
-  return params.reduce((prev, curr) => prev + curr)
-} // 매개변수가 몇 개든 합을 잘 구합니다.
+const arr1 = [1, 2, 3]
+const arr2 = [...arr1] // arr1 를 구조 분해시켜 '새로운' 배열을 만듭니다. 👍
 
-console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)) // -> 55 👍
+arr1.push(4)
+
+console.log(arr1) // -> [ 1, 2, 3, 4 ]
+console.log(arr2) // -> [ 1, 2, 3 ] 👍
 ```
 
-## 2. 또 다른 나머지 매개변수 예시
+## 2. 객체 전개구문
 
-👉 시나리오: 첫번째 매개변수와 나머지 매개변수를 곱한 배열을 반환하는 함수를 작성하세요.
+## 활용 1: 안전한 객체 얕은 병합
 
-### 편—안 ✅
+👉 시나리오: 주어진 `obj1` 에 `obj2` 를 병합하세요.
+
+👉 조건1: 중복 필드가 있다면 `obj2` 의 값으로 덮어씌우세요.
+
+👉 조건2: 주어진 객체를 변형하지 마세요.
+
+### 불—편
 
 ```js
-function multiply (multiplier, ...params) {
-  return params.map(param => multiplier * param)
-}
+const obj1 = { a: 1, b: 1 }
+const obj2 = { b: 2, c: 2 }
 
-console.log(multiply(5, 1, 2, 3, 4)) // -> [ 5, 10, 15, 20 ] 👍
+// 나쁘지 않습니다만 obj1 이 수정됩니다. 👎
+const merged = Object.assign(obj1, obj2)
 ```
 
-## 3. arguments 와 다른점
-
-`arguments` 는 유사 배열입니다. 때문에 `map, reduce, forEach` 와 같은 배열 메소드를 호출 할 수 없습니다.
+### 편—안 ✅
 
 ```js
-function sum (a, b, c) {
-  // -> TypeError: arguments.reduce is not a function
-  return arguments.reduce((prev, curr) => prev + curr)
-}
+const obj1 = { a: 1, b: 1 }
+const obj2 = { b: 2, c: 2 }
 
-sum(1, 2, 3)
+// 모든 조건을 만족하며 심플합니다! 👍
+const merged = { ...obj1, ...obj2 }
 ```
 
 ---
@@ -142,7 +161,7 @@ sum(1, 2, 3)
 
 객체를 구조 분해해봅시다.
 
-### 활용 1: 기본값 할당
+## 활용 1: 기본값 할당
 
 👉 시나리오: `me` 객체를 출력하세요.
 
@@ -197,66 +216,123 @@ console.log('자동차', car)
 
 배열을 구조 분해해봅시다.
 
-### 활용 1: 안전한 복사
+---
 
-👉 시나리오:  `arr1` 과 똑같은 `arr2` 를 만드세요.
+# Rest Parameters
 
-👉 조건:  `arr1` 의 변형이 `arr2` 에 영향을 미치지 않게 하세요.
+### 정의
 
-### 불—편
+Rest Parameters 는 정해지지 않은 수 매개변수를 **실제 배열**로 나타낼 수 있게 합니다.
 
-```js
-const arr1 = [1, 2, 3]
-const arr2 = arr1 // arr2 는 arr1 를 참조합니다.
+## 1. 나머지 매개변수 예시
 
-arr1.push(4)
+👉 시나리오: 개수가 정해지지 않은 매개변수를 입력 받아 이의 총 합을 구하는 함수를 작성하세요.
 
-console.log(arr1) // -> [ 1, 2, 3, 4 ]
-console.log(arr2) // -> [ 1, 2, 3, 4 ] arr2 까지 변형됐습니다. 👎
+### 불—편
+    
+```js
+function sum (a, b, ... y, z) {
+  return a + b + ... + y + z
+} // [a-z] 까지 입력받을 수 있습니다. 즉 매개변수의 개수가 정해져 있습니다. 👎
+    
+console.log(sum(1, 2, 3, 4, 5, 6, 7, 8)) // [i-z] 까지 undefined, 때문에 NaN 출력 👎
 ```
 
 ### 편—안 ✅
 
 ```js
-const arr1 = [1, 2, 3]
-const arr2 = [...arr1] // arr1 를 구조 분해시켜 '새로운' 배열을 만듭니다. 👍
-
-arr1.push(4)
+function sum (...params) {
+  return params.reduce((prev, curr) => prev + curr)
+} // 매개변수가 몇 개든 합을 잘 구합니다.
 
-console.log(arr1) // -> [ 1, 2, 3, 4 ]
-console.log(arr2) // -> [ 1, 2, 3 ] 👍
+console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)) // -> 55 👍
 ```
 
-### 활용 2: 또 다른 안전한 복사
+## 2. 또 다른 나머지 매개변수 예시
 
-👉 시나리오: 주어진 `fruits` 배열을 이용해 첫번째 과일과 나머지 과일을 출력하세요.
+👉 시나리오: 첫번째 매개변수와 나머지 매개변수를 곱한 배열을 반환하는 함수를 작성하세요.
 
-### 불—편
+### 편—안 ✅
 
 ```js
-const fruits = ['🍎', '🍌', '🥝']
+function multiply (multiplier, ...params) {
+  return params.map(param => multiplier * param)
+}
+
+console.log(multiply(5, 1, 2, 3, 4)) // -> [ 5, 10, 15, 20 ] 👍
+```
 
-// apple 과 rest 는 fruits 를 참조합니다.
-const apple = fruits.shift() // fruits 의 첫번째 원소를 제거하고, apple 에 할당
-const rest = fruits
+## 3. arguments 와 다른점
 
-console.log('첫번째 과일', apple) // -> 🍎
-console.log('나머지 과일', ...rest) // -> 🍌 🥝
+`arguments` 는 유사 배열입니다. 때문에 `map, reduce, forEach` 와 같은 배열 메소드를 호출 할 수 없습니다.
 
-console.log(fruits) // -> [ '🍌', '🥝'] fruits 배열이 변형됨 👎
+```js
+function sum (a, b, c) {
+  // -> TypeError: arguments.reduce is not a function
+  return arguments.reduce((prev, curr) => prev + curr)
+}
+
+sum(1, 2, 3)
 ```
 
+---
+
+
+# Rest Elements
+
+### 정의
+
+Rest Elements 는 객체나 배열의 나머지 요소들을 선언과 동시에 할당합니다.
+
+### 특징
+
+나머지 요소에서 명시한 변수명이 선언되는 효과를 가지며 구조 분해 할당과 함께 사용 시 맨 마지막에 한 번만 위치할 수 있습니다.
+
+## 활용 1: 배열 나머지 요소
+
+👉 시나리오:  `arr` 배열의 첫번째 요소를 `first` 에 할당하고 나머지 요소를 `rest` 에 풀어 넣으세요.
+
 ### 편—안 ✅
 
 ```js
-const fruits = ['🍎', '🍌', '🥝']
+const arr = [1, 2, 3, 4, 5]
+const [first, ...rest] = arr
+
+console.log(first) // -> 1
+console.log(rest) // -> [ 2, 3, 4, 5 ] 👍
+```
+
+## 활용 2: 객체 나머지 요소
+
+👉 시나리오: `me` 객체의 `name` 필드만 `name` 에 할당하고 나머지 요소를 `rest` 에 풀어 넣으세요.
+
+### 불—편
+
+```js
+const me = {
+  name: '손당근',
+  hobby: '산책',
+  location: 'earth'
+}
 
-const [apple, ...rest] = fruits // 배열을 구조 분해시켜 apple 과 rest 가 fruits 를 참조하지 않도록 해줍니다.
+// 더 심플하게 안될까요?
+const name = me.name
+const rest = {
+  hobby: me.hobby,
+  location: me.location
+}
+```
+
+### 편—안 ✅
 
-console.log('첫번째 과일', apple)  // -> 🍎
-console.log('나머지 과일', ...rest)  // -> 🍌 🥝
+```js
+const me = {
+  name: '손당근',
+  hobby: '산책',
+  location: 'earth'
+}
 
-console.log(fruits) // -> [ '🍎', '🍌', '🥝' ] fruits 배열 변형 안됨 👍
+const { name, ...rest } = me // 👍
 ```
 
 ---
@@ -267,7 +343,7 @@ console.log(fruits) // -> [ '🍎', '🍌', '🥝' ] fruits 배열 변형 안됨
 
 Default Parameter 는 매개변수에 기본 값을 할당합니다.
 
-## 1. 매개변수 기본 값
+## 활용1: 매개변수 기본 값
 
 👉 시나리오: 이름 그리고 나이를 출력하는 함수 `aboutMe` 를 작성하세요.
 
@@ -360,7 +436,7 @@ aboutMe({}) // -> 비공개 비공개 ... 둘 다 '비공개' 로 출력 가능
 
 Named Parameter 는 매개변수에 이름을 지정해줍니다.
 
-### 활용1: 선택적 매개변수
+## 활용1: 선택적 매개변수
 
 👉 시나리오: 나이와 직업을 매개변수로 받고 출력하는 함수 `aboutMe` 를 작성하세요.
 
@@ -395,7 +471,7 @@ aboutMe({ age: 20 }) // -> 나이 20
 aboutMe({ job: '개발자' }) // -> 직업 개발자
 ```
 
-### 활용2: 순서 없는 매개변수
+## 활용2: 순서 없는 매개변수
 
 매개변수가 3개 이상이면 순서를 잘못 입력할 가능성이 큽니다.
 
@@ -459,7 +535,7 @@ render({
 
 `NaN`
 
-### 활용 1: 배열이 비어있나 확인하기
+## 활용 1: 배열이 비어있나 확인하기
 
 배열은 `length` 프로퍼티를 가지고 있습니다. 이를 검사해 배열이 비어있는지 확인 가능합니다.
 
@@ -483,7 +559,7 @@ if (!arr.length) { // 👍 좋습니다! 0 은 Falsy 기 때문에 배열이 비
 }
 ```
 
-### 활용 2: 안전히 메소드 호출하기
+## 활용 2: 안전히 메소드 호출하기
 
 존재하지 않는 함수를 호출하면 `TypeError: ... is not a function` 를 `throw` 합니다.
 
@@ -511,7 +587,7 @@ if (iAmNotArray.forEach) {
 
 위에서 언급한 거짓 값을 제외하면 모두 참 값입니다.
 
-### 활용1: 객체 요소 검사
+## 활용1: 객체 요소 검사
 
 `movie` 객체를 참조해 <아이언맨> 이 한글 자막을 지원하는지 확인해 봅시다.
 
