Spread Syntax (전개 구문)

Spread Syntax(전개 구문)는 es6에 추가된 문법으로 iterable 객체를 개별 요소로 분리시키는 문법이다.
- iterable - 배열, 문자열, set, map 등..

Spread 문법의 사용방법

함수 호출

const sum = (a, b, c, d) => {
    return a + b + c + d;
}

const kwon = ['k', 'w', 'o', 'n'];

console.log(sum(...kwon));
// 출력 : kwon

위와 같이 함수를 호출할 때 매개변수로 전개 연산자를 사용하여 배열을 넘겨 각각의 인자에 배열의 원소를 할당할 수 있다. 이 때, 물론 매개변수의 개수가 일치해야 한다.

배열 리터럴과 문자열

두 배열을 연결하는 경우 Array.prototype.concat() 을 사용하여 기존 배열에 새로운 배열의 요소를 추가하여 새로운 배열을 만들 수 있었다.

const arr1 = ['kwon', 'kim', 'jung'];
const arr2 = ['jo', 'park', 'lee'];

const arr3 = arr1.concat(arr2)
console.log(arr3);
// 출력 : [ 'kwon', 'kim', 'jung', 'jo', 'park', 'lee' ]

위의 코드를 전개 구문을 사용하는 경우 간편하게 작성할 수 있다.

const arr1 = ['kwon', 'kim', 'jung'];
const arr2 = ['jo', 'park', 'lee'];

const arr3 = [...arr1, ...arr2];
console.log(arr3);
// 출력 : [ 'kwon', 'kim', 'jung', 'jo', 'park', 'lee' ]

또한 push, splice 등을 활용, 대신하여 다양한 방식으로 배열을 다룰 수 있다.

const arr1 = ['kwon', 'kim', 'jung'];
const arr2 = ['jo', 'park', 'lee'];

arr1.push(...arr2);
console.log(arr1);
// 출력 : [ 'kwon', 'kim', 'jung', 'jo', 'park', 'lee' ]

const arr1 = ['kwon', 'kim', 'jung'];
const arr2 = ['jo', 'park', 'lee'];

const arr3 = [...arr2, 'kwon', 'kim', 'jung'];
console.log(arr3);
// 출력 : [ 'jo', 'park', 'lee', 'kwon', 'kim', 'jung' ]
const arr4 = ['kwon', ...arr2, 'kim', 'jung'];
console.log(arr4);
// 출력 : [ 'kwon', 'jo', 'park', 'lee', 'kim', 'jung' ]

문자열도 iterable 이기 때문에 전개구문을 사용 가능하다.

const str = 'abcdefg';
console.log(str.split('')); // 기존 방식
// 출력 : ['a', 'b', 'c', 'd', 'e', 'f', 'g']
console.log([...str]); // 전개 구문 적용
// 출력 : ['a', 'b', 'c', 'd', 'e', 'f', 'g']

배열 복사

const arr1 = ['kwon', 'kim', 'jung'];
const arr2 = [...arr1];
console.log(arr2);
// 출력 : [ 'kwon', 'kim', 'jung' ]
arr2.push('jo');
console.log(arr1);
// 출력 : [ 'kwon', 'kim', 'jung' ]

전개 구문을 통해 배열을 복사하는 경우 깊은 복사를 할 수 있다. 깊은 복사는 복사를 통해 생성된 배열을 변경하여도 원본 배열에 영향이 없어야 한다. 하지만, 배열 안에 또 배열or객체가 있는 경우에는 깊은 복사가 제대로 이루어지지 않는다. 즉, (원시 타입으로 구성된) 1차원 배열에서만 전개 구문을 통해 깊은 복사를 할 수 있다.

const arr1 = [['kwon', 'kim'], 'jung'];
const arr2 = [...arr1];
arr2[0].pop();
console.log(arr1);
// 출력 : [ [ 'kwon' ], 'jung' ]

위와 같이 배열 안에 있는 배열을 변경하는 경우에는 원본 배열에도 영향을 미치는 것을 볼 수 있다.

객체 리터럴

const obj1 = { key1: 'val1', key2: 'val2' };
const obj2 = { ...obj1, key3: 'val3' };
console.log(obj2);
// 출력 : { key1: 'val1', key2: 'val2', key3: 'val3' }

객체에서도 전개 구문을 사용하여 객체를 정의할 수 있다.
하지만, 객체 리터럴에서와 달리 함수 호출과 배열 리터럴에서의 전개 구문은 반드시 iterable 이어야 사용이 가능하다는 것이다.

const obj1 = { key1: 'val1', key2: 'val2' };
const arr1 = ['kwon', 'kim', 'jung', ...obj1];
console.log(arr1);
// 에러 :  obj1 is not iterable