4. spread

3 장에서 배웠던 iterable collection ( object ) 를 왜 배웠나.

뒤로 가면 계속 나오겠지만 iterable 의 의미가 얼마나 많이 쓰이는 가를 볼 수 있을 것이다.

Syntax [...iterable]

이터러블 오브젝트를 하나씩 전개

[...iterable]

spec 에서 spread operator 로 표기하지는 않았음

[] 안에 spread 대상 배열 작성

Sample

let two =[21, 22];
let five = [51, 52];
let one = [11, ...two, 12, ...five];
console.log(one);
// [11,21,22,12,51,52] 가 출력
console.log(one.length);
// 6 이 출력 

JS Bin on jsbin.com

String spread

[] 안에 spread 대상 문자열 작성

//String 이 iterable object 이기 때문에 spread 가 가능함!!
let str = "music";
let chars = [...str];
console.log(chars);

JS Bin on jsbin.com

push (...spread)

let two = [21, 22];
let five = [51, 52];
two.push(...five);
//[21,22, 51, 52]
console.log(two);

JS Bin on jsbin.com

Object spread

[] 안에 spread 대상 Object 작성

let one = [{name1 : 11}, {name2 : 22}];
let two = [{name3: 33}, ...one];

function spread

호출하는 함수의 파라미터에 spread 작성

function get(one, two, three){
    ...
};
contst values = [10, 20, 30];
get(...values);

parameter handling 

    ES5 를 쓰면..

var params = [ "hello", true, 7 ];
var other = [ 1, 2 ].concat(params); // [ 1, 2, "hello", true, 7 ]
f.apply(undefined, [ 1, 2 ].concat(params)) === 9;

var str = "foo";
var chars = str.split(""); // [ "f", "o", "o" ]

    ES6 의 spread 기능을 쓰면??

var params = [ "hello", true, 7 ]
var other = [ 1, 2, ...params ] // [ 1, 2, "hello", true, 7 ]
f(1, 2, ...params) === 9

var str = "foo"
var chars = [ ...str ] // [ "f", "o", "o" ]