스프레드문법, 전개 연산자 (spread operator) - 1

전개연산자 (spread operator)

전개 연산자는 독특하면서도 유용한 문법이다. 사용방법은 배열이나 객체, 변수명 앞에 마침표 세개(...)를 입력합니다. 배열, 객체, 함수인자표현식 안에서만 사용해야한다([],{},()).

배열 전개연산자 ES5 문법

var array1 = ['one', 'two'];
var array2 = ['three', 'four'];
var combined = [array1[0], array1[1], array2[0], array2[1]]; // 1
var combined = array1.concat(array2); // 2
var combined = [].concat(array1, array2); // 3
var first = array1[0];
var second = array1[1]; // 4
var three = array1[2] || 'empty'; // 5

function func() {
  var args = Array.prototype.slice.call(this, arguments); // 6
  var first = args[0];
  var others = args.slice(1, args.length); // 7
}

1 -> 배열의 각 요소를 추출하여 새로운 배열을 만들었다.
2,3 -> concat()함수로 두 배열을 합쳤다
4 -> 인덱스로 배열 요소를 추출하였다
5 -> || 연산자와 조합하면 추출할 배열 요소가 없을깨 기본값을 저장할수 있다.
6 -> 특수변수(arguments)를 사용해 함수 내 인자 항목들을 배열로 변환. (func(a,b,c)에서 args[0]은 a, args[1]은 b, args[2]은 c)
7 -> 인덱스 범위에 해당하는 배열 요소를 추출한다.

배열 전개연산자 ES6문법

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

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

function func(first, ...others) {
  var firstInES6 = first;
  var othersInES6 = others;
}

es6문법으로 좀더 간결해졌다.

---

객체 전개연산자 es5

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,
};
var combined = Object.assign({}, objectOne, objectTwo);
// combined = { one: 1, two: 2, three: 3, four: 4, other: -1}
var combined = Object.assign({}, objectOne, objectTwo);
// combined = { one: 1, two: 2, three: 3, four: 4, other: 0}
var others = Object.assign({}, combined);
delete others.other;

객체 전개연산자 es6

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} 
var combined = {
  ...objectTwo,
  ...objectOne,
};
// combined = { one: 1, two: 2, three: 3, four: 4, other: 0}
var { other, ...others } = combined;
// others = { one: 1, two: 2, three: 3, four: 4}