TIL# 18 전개 연산자

ES6에서 전개 연산자(spread operator)는 독특하면서도 매우 유용한 문법이다. 전개연산자는 나열형 자료를 추출하거나 연결할 때 사용한다.

사용 방법은 배열이나 객체, 변수명 앞에 마침표 세개(...)를 입력한다. 하지만 배열, 객체, 함수 인자 표현식 ([ ], { }, ( )) 안에서만 사용이 가능하다.

배열 전개 연산자 사용 방법

ES6 이전 문법에서는 배열의 일부 요소만 잘라내거나 연결하려면 배열 인덱스와 함께 배열 내장 함수들을 사용해야했다.

1. 기존 자바스크립트에서 배열의 각 요소를 추출하여 새로운 배열을 만들기

var array1 = ['one', 'two'];
var array2 = ['three', 'four'];
var combined = [array1[0], array1[1], array2[0], array2[1]];

2. 기존 자바스크립트에서 두 개의 배열을 합치기

var combined = array1.concat(array2);
var combined = [].concat(array1, array2);

3. 기존 자바스크립트에서 인덱스를 이용하여 배열 요소를 추출하기

var first = array1[0];
var second = array1[1];
var third = array1[2] || 'empty';

• || 연산자를 사용하면 추출할 배열 요소가 없을 때 기본 값을 지정할 수 있다.

위의 방법들을 사용하면 배열 내장 함수를 일일이 기억해야 하고 코드가 길어지지게 된다.

위의 예시들에 전개 연산자를 도입하게 되면 코드가 간결해진다.

1. 두 개의 배열을 합치기

var array1 = ['one', 'two'];
var array2 = ['three', 'four'];
const combined = [...array1, ...array2]

2. 배열 요소 추출하기

const [first, second, third = 'empty', ...others] = array1

• first, second로 array1의 각 위치에 있는 요소를 추출한다.
• three로 기본값과 함께 배열 요소를 추출한다.
• ...others로 추출하고 남은 요소를 추출한다.

객체 전개 연산자 사용 방법

ES6 문법 이전에는 객체의 키나 값을 추출할 때 객체 내장 함수를 사용해야했다.

1. 키에 해당하는 값 추출하여 두 개의 객체를 병합하기

var objectOne = {one:1, two:2, other:0};
var objectTwo = {three:3, four:4, other:-1};
var combined = {
	one:objectOne.one,
	two:objectOne.two,
	three:objectTwo.three,
	four:objectTwo.four
};

2. 내장함수를 이용하여 두 개의 객체를 병합하기

var combined = Object.assign({}, objectOne, objectTwo);
// combined = {one:1, two:2, three:3, four:4, other:-1}

• assign() 의 첫번째 인자는 결과로 반환할 형태이고 나머지 인자는 병합할 객체이다. 이때 병합할 객체는 앞에 있는 객체부터 덮어 쓰기 때문에 중복되는 값은 objectTwo의 값으로 덮어씌어진다.

3. 중복되는 값 제거하기

var others = Object.assign({}, combined);
delete others.other;
//others = {one:1, two:2, three:3, four:4}

• 삭제 연산자 (delete)를 이용하여 특정 데이터를 추출한다음 새로운 객체를 만든다.

객체로 마찬가지로 전개 연산자를 사용하면 코드를 간결하게 만들 수 있다.

1. 두 개의 객체를 병합하기

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}

• 중복되는 키 값들은 마지막에 사용된 객체의 값으로 덮어씌어진다.

2. 중복되는 값 제거하기

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

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