작성자 : 장기효

검수자 : 장기효, 배광식

Spread Syntax

• 대상 배열 또는 문자열 등의 반복 가능한 Iterable을 개별 요소로 분리하는 문법

사용하는 이유?

• ES5의 apply()를 사용하지 않고도 특정 상황에서 간단하게 구현 가능

ES5 vs ES6

• 배열의 각 요소에 함수를 적용하고 싶은 경우

// ES5 - apply() 사용
function log(a, b, c) {    
    console.log('first arg :', a);
    console.log('second arg :', b);
    console.log('third arg :', c);
}
var arr = [1, 2, 3];
log.apply(null, arr);

// ES6 - ... 사용
function log(a, b, c) {
    console.log('first arg :', a);
    console.log('second arg :', b);
    console.log('third arg :', c);
}
var arr = [1, 2, 3];
log(...arr);

배열 리터럴

• 기존 배열의 요소를 복제할 때 사용

var arr = [1, 2, 3];
var arr2 = [...arr];
console.log(arr2); // [1, 2, 3];

• 두 배열을 합칠 때 사용

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]

객체 리터럴

• 기존 객체의 요소를 복제하거나 합칠 때 사용

// 복제
var obj = {a: 10, b: 20};
var clonedObj = {...obj};

// 병합
var mergedObj = {...obj, c: 30};
console.log(mergedObj); // {a: 10, b: 20, c: 30}

Spread Syntax vs Rest Syntax

spread 'expands' an array into its elements, while rest collects multiple elements and 'condenses' them into a single element

• Spread Syntax : 대상 Iterable 객체(배열, 문자열)를 각각의 요소로 분리

• Rest Syntax : 여러 개의 요소를 한 개의 변수에 담아줌