[자바스크립트] 전개 구문(spread syntax)

전개 구문(spread syntax)는 점 세 개(...)가 이어진 연산자를 통해 사용됩니다. 이 전개 연산자(spread operator)를 배열, 문자열과 같은 반복 가능한(iterable) 요소 앞에 사용해서 배열의 개별 요소를 다른 배열이나 함수의 인자로 펼쳐서 넘기는게 가능합니다. 객체에 대해 전개 연산자를 사용하면 객체의 속성을 넘기는 것이 가능합니다. 말로 설명하려니 좀 이상하네요. 예를 보겠습니다.

 

함수 인자에 사용

여러 개의 인자를 받는 함수에 배열을 사용해서 한번에 인자를 넘길 수 있습니다.

function sum(a, b, c) {
    return a + b + c;
}
let nums = [1, 2, 3];

// 전개 연산자를 사용해서 한번에 넘깁니다.
let result = sum( ...nums );

// 전개 연산자가 없다면 사용할 수 있는 방법
let result = sum( nums[0], nums[1], nums[2] );
let result = sum( sum.apply(null, nums) );

 

배열 생성에 사용

새로운 배열을 만들면서 기존의 배열을 일부분으로 사용하고자 할 때 사용될 수 있습니다.

let array1 = [1, 2, 3];
let array2 = [...array1, 4];
let array3 = [0, ...array1, 4];
      
// 기존 방법
let array2 = array1.concat( [4] );
let array3 = [0].concat( array1, [4] );

 

배열 연결에 사용

배열을 간편하게 연결할 수 있습니다.

let array1 = [ 1, 2, 3 ];
let array2 = [ 4, 5, ];

// array1에 array2를 붙입니다.
array1.push( ...array2 );

// 기존 방법
array1.push.apply( array1, array2);

 

객체 속성을 합쳐서 새 객체 생성

두 객체의 속성을 합하여 하나의 객체를 만들 수 있습니다.

let obj1 = { a: 'A', b: 'B' };
let obj2 = { c: 'C', d: 'D' };
let obj3 = { ...obj1, ...obj2 };

 

문자열을 배열로 만들기

문자열의 각 글자를 요소로 가지는 배열을 만듭니다.

let str = "Hello";
let arrStr = [ ...str ];