02-2 전개 연산자

전개 연산자

 

ES6의 전개 연산자(spread operator)는 나열형 자료를 추출하거나 연결할 때 사용한다. 

배열이나 객체, 변수명 앞에 마침표 세 개(...)를 입력해서 사용해서 안에 들어있는 요소들을 펼칠 수 있다.

배열, 객체, 함수 인자 표현식([], {}, ()) 안에서만 사용해야 한다.

 

var array1 = ['one', 'two'];
var array2 = ['three', 'four'];
const combined = [...array1, ...array2];
// 결과: combined = ['one', 'two', 'three', 'four'];
const [ first, second, three = 'empty', ...others] = array1;
// 결과: first = 'one', second = 'two', three = 'empty', others = []

// 올바르지 못한 예
// var wrongArr = ...array1;

function func(...args) { var [first, ...others] = args; }

 

배열 표현식 없이 사용하는 건 올바르지 못한 예다.

 

함수 정의와 매개변수 해체가 이루어지고 있다.

func 함수로 전달되는 인수들을 args라는 배열로 묶어서 첫번째 인수를 first 변수에, 나머지 인수들을 others 배열에 각각 할당한다. 그래서 이 함수 내에서는 first 변수와 others 배열을 사용할 수 있다.

예를 들어, func('one', 'two', 'three', 'four'); 이렇게 한다면 변수 first에는 'one'이 할당되고, 배열 others에는 ['two', 'three', 'four']가 할당된다. 자바스크립트 함수 내에서 인수를 처리하는 일반적인 방법 중 하나다.

 

var objectOne = { one: 1, two: 2, other: 0 };
var objectTwo = { three: 3, four: 4, other: -1 };
var combined = {
    ...objectOne, 
    ...objectTwo,
};
// combined = { one: 1, two: 2, three: 3, four: 4, other: -1 }
// other에는 마지막으로 사용한 객체인 objectTwo의 other값이 적용됨

var combined = {
    ...objectTwo,
    ...objectOne,
};
// combined = { one: 1, two: 2, three: 3, four: 4, other: 0 }
// other에 objectOne의 other값이 적용됨

// other값만 추출
var { other, ...others } = combined;
// others = { one: 1, two: 2, three: 3, four: 4 }

 

두 객체를 병합할 때 중복된 키값들은 마지막에 사용한 객체의 값으로 덮어쓴다.

‌객체에서 특정값을 추출할 때는 추출하려는 키 이름(other)을 맞추고 나머지는 전개 연산자로 선언된 변수(others)에 할당할 수 있다.