무작정 부딪쳐서 React를 공부하는데 필요한 기초적인 ES6 문법을 짚고 넘어가기로 했다.
그 두 번째, 배열이나 객체 등의 여러 값들을 한 번에 사용할 수 있는 전개 연산자에 대해서 알아보자.

🤔전개 연산자란?

전개 연산자는 나열되는 자료를 추출하거나 연결할 때 사용한다. ES6 이전에는 배열의 일부 요소나 객체의 일부분을 연결하려면 각 내장 함수를 이용해야 했다. ES6에서 전개 연산자의 도입으로 간단하게 자료를 추출하거나 연결할 수 있게 되었다.
사용은 배열이나 객체의 이름 앞에 마침표 3개...를 붙여주면 된다.

📚배열에서의 전개 연산자

var arr1 = ['one', 'two'];
var arr2 = ['three', 'four'];
var result = arr1.concat(arr2);
// 또는
var result = [arr1[0], arr1[1], arr2[0], arr2[1]];
// 또는
var result = [].concat(arr1, arr2);
console.log(result);

기존에 배열을 합치거나 복제를 하려면 직접 값을 참조하여 저장하거나 concat()이나 slice() 등 배열 리터럴 함수를 사용해야 했다. 하지만 전개 연산자를 사용한다면 간단하게 위 기능을 모두 수행할 수 있다.

var arr1 = ['one', 'two'];
var arr2 = ['three', 'four'];
var result = [...arr1, ...arr2];
console.log(result);

🔣객체에서의 전개 연산자

var obj1 = { one: 1, two: 2 };
var obj2 = { three: 3, four: 4 };
var result = {
  one: obj1.one,
  two: obj1.two,
  three: obj2.three,
  four: obj2.four,
};
// 또는
var result = Object.assign({}, obj1, obj2);
// 또는
var result = Object.assign(obj1, obj2);
console.log(result);

객체를 병합하거나 복사를 할 땐 객체의 key와 value를 직접 넣어주거나 Object의 assign 함수를 호출했었다. 전개 연산자를 사용하면 어떻게 수행할 수 있을까?

var obj1 = { one: 1, two: 2 };
var obj2 = { three: 3, four: 4 };
var result = { ...obj1, ...obj2 };
console.log(result);

간단하게 전개 연산자 하나로 같은 결과물을 만들 수 있었다.

🖲️함수에서의 전개 연산자

function func() {
  var arr = Array.prototype.slice.call(arguments);
  console.log(arr);
  console.log(arr[0]);
}

func(1, 2, 3, 4);
// (4) [1, 2, 3, 4]
// 1

함수에서 인자로 넘겨줄 때 인자들은 arguments라는 함수 내부의 배열로 저장된다. 넘어온 인자의 수를 제한하지 않거나 얼마나 받을지 예상할 수 없는 상황에는 arguments 를 사용하게 되는데 이 또한 전개 연산자로 변환이 가능하다.

function func(...args) {
  var arr = [...args];
  var [one, ...others] = args; // 구조 분해 할당
  console.log(arr);
  console.log(one);
}

func(1, 2, 3, 4);
// (4) [1, 2, 3, 4]
// 1

여러 함수의 호출 없이 전개 연산자로 작성하면 쉽게 동일한 기능을 수행할 수 있다.