ECMAScript2015 강의 자료입니다.

1. ECMAScript 2015
by jbee

2. [ES6] 4. Spread, Rest parameter

3. Spread
이터러블오브젝트(Iterable object)의엘리먼트를하나씩분리하여전개한다.
전개한결과를변수에할당하거나호출하는함수의파라미터값으로사용할수
있다.
let prev = [3,4];
let post = [7,8];
let spreadObj = [1, 2, ...prev, 5, 6, ...post, 9];
console.log(spreadObj); // [1,2,3,4,5,6,7,8,9]

4. 문자열도가능하다.
let sObj = [..."javascript"];
console.log(sObj); // ["j", "a", "v", "a", "s", "c", "r", "i",

5. Rest Parameter
함수를호출할때 spread 연산자로파라미터를작성한형태를 Rest
parameter 라고 한다. 함수안의코드를확인하지않고도호출문의형태만보
더라도 Rest parameter 의범위를확인할수있어가독성이높아진다. 또
한 Rest parameter 는 Array , 즉배열이므로 Array 오브젝트의메서
드를사용할수있다. 그리고 arrow funtion 에서도사용가능하다.

6. let price = [12, 20, 18];
Math.max(12, 20, 18);
built in Object인 Math 의메소드 max() 를사용하기 위해서는위코드처
럼하나씩넘겨줘야한다.
또는다음과 같은방식을사용했다.
Math.max.call(Math, price);

7. 하지만Rest parameter를사용하면보다깔끔하게 작성할수있다.
let maxPrice = Max.max(...price);

8. Rest parameter 는동적(dynamic)으로생성된파라미터라고 할수있기
때문에함수의 length 에서포함되지않는다. 기본적으로함수의 length
프로퍼티는파라미터의개수를의미한다.
let getElementByRestWithParam = (param, ...rest) => {
console.log(param);
console.log(rest);
}
console.log(getElementByRestWithParam.length); // 1
위 getElementByRestWithParam 메소드에 spread operator 를사용
하여인자를넘겨보자.

9. const values = [10, 20, 30];
getElementByRestWithParam(...values); //10 n [20, 30]
param 에해당하는인자가 따로받아지고 나머지인자들은 ...rest 로넘
겨지면서다시배열로넘겨지게 된다!
Rest parameter 를사용했을때와기존의자바스크립트에서
arguments 를사용했을때의차이점을살펴보기 위해 arguments 에대해
서잠깐 살펴보자. arguments 는 Array-Like Object 라는공식명칭을
하고 있는유사배열이다.

10. Array‑like Object(유사배열)
배열의특징중하나는index를갖고 있어서임의접근(random access)가 가
능하고, 그 index가 순차적으로증가한다는것이다. 만약Object가 key값이
순차적으로증가하는값이고, 그에따른value가 존재한다고 했을때,
Array-like Object 라고 한다.
배열의인덱스값을프로퍼티key 값으로사용하는것이다. 그리고
length 라는프로퍼티값을갖고 있어서전개를할때는다음과 같이한다.

11. // Array-like object
let arrLikeObj = {
0 : "zero",
1 : "one",
2 : "two",
length : 3
};
for (let i = 0; i < arrLikeObj.length; i++) {
console.log(arrLikeObj[i]);
}
Array-like Object 는다음두가지규칙을모두만족시켜야한다.
1. 프로퍼티값을0부터1씩증가하면서순차적으로작성해야한다.
2. length를프로퍼티키로하여전체프로퍼티수를작성해야한다.

12. Rest parameter와arguments의차이
arguments 도 Array-like object 이기 때문에 for statement 로전
개할수있다. 하지만 Array 오브젝트의메서드를사용할수없다. 이것이치
명적인단점인것이다. 또 arrow function 에서는 arguments 를사용할
수없다. 이것으로미루어보아, ES6에서는 arguments 를사용하는것을최
대한자제하라는느낌이다. 사실 Rest parameter 에익숙해지기만하면
arguments 를통해인자를받는것보다유연한코드를작성할수있다.

13. 한가지더한계점을지적하자면 arguments 는함수내부를봐야어느부분
에서 arguments 객체를사용하는지알수있어코드의가독성이떨어지게
된다. 그렇기 때문에 arguments 대신 Rest parameter 를도입한것이
다.

14. 4. end