JS Spread Operator

JS에는 Spread Operator라는 특이한 문법이 존재한다.

사용법만 잘 터득한다면 코드를 많이 줄일 수 있는 문법이기에 포스팅 해보려고 한다.

1. 배열에서의 Spread Operator

Spread Operator를 배열에서 사용하게 되면, 그 변수를 복사하여 대입할 수 있다.

Array.concat과 같은 역할을 수행한다.


/* Array.concat을 사용한 배열 합치기! */
let testA = [1];
let testB = [2, 3];
let result = testA.concat(testB);

console.log(result); // [1, 2, 3];


/* Spread Operator를 사용한 배열 합치기! */
let testA = [1];
let testB = [2, 3];
let result = [...testA, ...testB];

console.log(result); // [1, 2, 3];

위의 예제처럼, result 변수에 testA의 값과 testB의 값을 간단하게 합쳐낼 수 있다.

아래 예제를 추가로 확인해보자.


let testA = [1, 2, 3];
let result = [...testA, 4, 5];

console.log(result); // [1, 2, 3, 4, 5]


let testA = [1, 2, 3];
let testB = [4, 5];

console.log([...testA, ...testB]); // [1, 2, 3, 4, 5]


let text = 'text';
let result = ['this is', ...text, '!'];

console.log(result); // ['this is', 't', 'e', 'x', 't', '!']

문자열 text의 경우 각각의 텍스트로 구성된 배열이 되어 합쳐진다. 문자열 역시 배열이기 때문이다.

2. 오브젝트에서의 Spread Operator

Spread Operator를 오브젝트에서 사용했을 때도 Object.assign과 같은 역할을 수행한다.


/* Object.assign을 사용한 오브젝트 합치기 */
let testA = { a: 1, b: 2, c: 3 };
let testB = { d: 4, e: 5 };
let result = Object.assign(testA, testB);

console.log(result); // { a: 1, b: 2, c: 3, d: 4, e: 5 }


/* Spread Operator을 사용한 오브젝트 합치기 */
let testA = { a: 1, b: 2, c: 3 };
let testB = { ...testA, d: 4, e: 5 };

console.log(testB); // { a: 1, b: 2, c: 3, d: 4, e: 5 }


let testA = { a: 1, b: 2, c: 3 };
let testB = { d: 4, e: 5 };

console.log({ ...testA, ...testB }); // { a: 1, b: 2, c: 3, d: 4, e: 5 }

3. 함수에서의 Spread Operator


let test = (...args) => args.reduce((acc, current) => acc + current);

test(1, 2, 3, 4); // 10 (1+2+3+4)

함수의 argument에 Spread Operator를 사용하게 되면 여러 parameter를 하나의 배열로 처리할 수 있다.


let test = (temp, ...args) => args.reduce((acc, current) => acc + current);

test(1, 2, 3, 4); // 9 (2+3+4)

만약 temp와 같이 Spread Operator 앞에 다른 argument가 있다면 그 수만큼 무시하고 배열에 담겨 처리하게 된다.

위 코드에서 args에는 2, 3, 4가 담긴다.

주의할 부분은 함수에서 Spread Operator를 사용하기 위해서는 반드시 제일 마지막 argument에 사용해야한다.


let test = (...temp, args) => args.reduce((acc, current) => acc + current);

Uncaught SyntaxError: Rest element must be last element

4. 비구조화 할당에서의 Spread Operator


let obj = { a: 1, b: 2, c: 3, d: 4 };
let { a, b, ...testC } = obj;

console.log(testC); // { c: 3, d: 4 };

비구조화 할당에서도 마찬가지로 Spread Operator를 사용하기 위해서는 반드시 제일 마지막 argument에 사용해야한다.


let obj = { a: 'im', b: 'ian', c: 24 };
const {
  a: firstName,
  b: lastName,
  c: age,
} = obj;


console.log(firstName, lastName, age); // im ian 24

위와 같은 문법을 사용해 변수명을 달리할 수 있다.

5. Spread Operator 활용