Spread Syntax (전개 구문)

... 을 활용한 객체 표현법으로, iterable한 객체를 풀어서 하나 하나의 요소로 전개한다.

spread syntax는 다음과 같은 상황에서 사용한다.

1. 배열 literal로 배열을 정의할 때, iterable한 객체를 요소로 사용하고 싶을 때
2. 객체 literal로 객체를 정의할 때, iterable한 객체를 요소로 사용하고 싶을 때
3. 함수에서 iterable한 객체를 parameter로 선언하거나, 호출 인자로 사용하고 싶을 때

1, 2의 경우는 매우 직관적이다.

1. 배열 literal 정의에 활용

var inputArr = ['c', 'd', 'e']
var newArr = ['a', 'b', ...inputArr, 'f', 'g']

console.log(newArr);

🖥 콘솔 출력 결과

['a', 'b', 'c', 'd', 'e', 'f', 'g']

2. 객체 literal 정의에 활용

var inputObj = {age: '20', city: 'Seoul'}
var newObj = {name: 'yooni', ...inputObj, gender: female}

console.log(newObj);

🖥 콘솔 출력 결과

{ name: 'yooni', age: '20', city: 'Seoul', gender: 'female' }

3. 함수 선언, 호출에 활용

3-1. 함수를 선언할 때 rest parameter 사용시

❓ rest parameter

함수의 가변 parameter를 sparead syntax를 사용하여 선언한 것으로 배열 형식임

function myFunc (a, b, ...rest) { // 3개의 parameter 중 마지막 parameter로 쓰인 rest parameter
  console.log(a, b);
  console.log(rest);
}

myFunc(1, 2, 3, 4, 5);

🖥 콘솔 출력 결과

1 2
[ 3, 4, 5 ]

myFunc의 인자 1, 2는 매개변수 a, b에 대응되고 남은 인자들을 배열의 형태로 ...rest가 받는다. 대응시키고 남은 인자들에 적용되는 parameter이기 때문에 rest parameter는 항상 마지막 parameter여야 한다.

rest parameter는 ES6에서 도입된 개념으로, ES5의 arguments와 그 기능이 비슷하다. 하지만 arguments는 배열이 아닌 유사배열객체(iterable하며 length를 가질 수 있음)로 배열 obejct의 메소드를 사용할 수 없다는 단점이 있다. 따라서 rest parameter를 사용하길 권장한다.

3-2. 함수를 호출할 때 인자에 사용

함수 선언 뿐 아니라, 함수를 호출할 때 인자로 배열/객체를 넣고 싶다면 이 때 spread syntax로 간단하게 호출할 수 있다.

function sum (a, b, c) {
  return a+b+c;
}

myArr = [6, 7, 8];
console.log(sum(...myArr)); // 인자에 spread syntax 사용

🖥 콘솔 출력 결과

21