[ES6] 전개 연산자(spread operator) 사용법

2020.09.05 - [웹 프론트엔드/자바스크립트] - [ES6] 객체 확장 표현(Destructuring) 및 구조 분해 할당

 

---

배열 전개 연산자

 ES6에서 새로 나온 문법으로 굉장히 중요하면서 강력한 기능입니다. 기존 배열 요소를 다룰 때는 index를 사용해 풀어쓰거나, 내장 메서드를 사용했지만 전개 연산자를 사용하면 간단하게 내용을 전달하고 표현할 수 있습니다.

기존 배열 요소 사용법과 전개 연산자 도입 비교

// 기존
var array1 = [1, 2];
var array2 = [3, 4];
var arrayNew = [array1[0], array1[1], array2[0], array2[1]];

// ES6
var arrayNew = [...array1, ...array2];	// 참 간단하죠?

// 기존
var array1 = ['one', 'two'];
var array2 = ['three', 'four'];
var arrayNew = array1.concat(array2);	// concat함수사용
var arrayNew = [].concat(array1, array2);

// ES6
var arrayNew = [...array1, ...array2];	// 참 간단하죠?

// 기존
var text1 = arrayNew[0];
var text2 = arrayNew[1];
var text3 = arrayNew[2];
var text4 = arrayNew[3];

// ES6
var [ ...textAll ] = arrayNew;		// 참 간단하죠?
console.log( ...textAll );		// one two three four
console.log( textAll );			// ["one", "two", "three", "four"]

var [ text1, text2, ...others ] = arrayNew;		// text1,2 넣고 others는 나머지
console.log( text1, text2, others );			// one two ["three", "four"]

 

객체 전개 연산자

 기존 문법에서는 배열과 객체를 다루는 방법이 달랐지만, ES6의 전개 연산자를 사용하면 비슷한 느낌 아닌 느낌으로 사용이 가능합니다. 쉽게 설명하면 배열이든 객체든 전개 연산자는 내용물을 잘 풀어서 이쁘게 포장을 해줍니다.

기존 객체(Object) 활용법과 전개 연산자 도입 비교

// -------------------- 기존 --------------------
var object1 = { one: 1, two: 2, temp: 12 };
var object2 = { three: 3, four: 4, temp: 34 };

var objectNew = {
  // 노가다 코딩
  one: object1.one,
  two: object1.two,
  temp: object1.temp, // temp변수명 동일
  three: object2.three,
  four: object2.four,
  temp: object2.temp, // 이걸로 덮어씌어짐
};
console.log(objectNew); // {one: 1, two: 2, three: 3, four: 4, temp: 34}

var objectNew = Object.assign({}, object1, object2); // assign함수 이용
console.log(objectNew); // {one: 1, two: 2, three: 3, four: 4, temp: 34}

var objectNew = Object.assign({}, object2, object1); // 반대로 덮어씌어짐
console.log(objectNew); // {one: 1, two: 2, three: 3, four: 4, temp: 12}

var temps = Object.assign({}, objectNew);
delete temps.temp; // temp삭제
console.log(temps); // {one: 1, two: 2, three: 3, four: 4}

// -------------------- ES6 --------------------
var objectNew = {
  ...object1, // 참 간단하죠?
  ...object2,
};
console.log(objectNew); // {one: 1, two: 2, three: 3, four: 4, temp: 34}

var objectNew = {
  ...object2, // 반대로 덮어씌어짐
  ...object1,
};
console.log(objectNew); // {one: 1, two: 2, three: 3, four: 4, temp: 12}

var { temp, ...temps } = objectNew; // temp키로 뽑은 나머지를 temps에게
console.log(temp, temps); // temp: 12, {one: 1, two: 2, three: 3, four: 4}

 

---

2020.09.16 - [웹 프론트엔드/자바스크립트] - [ES6] 화살표 함수와 커링 디자인 패턴

[ES6] 화살표 함수와 커링 디자인 패턴