🔵 내용요약

스프레드 문법이란?

• ES6 도입
• 하나로 뭉쳐 있는 여러 값(배열, 객체..)들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.

console.log(...[1,2,3]) //1 2 3

• 함수 호출시 배열의 요소를 개별 인수로 전달

const nums = [1, 2, 3];
console.log(Math.max(...nums)); // 3

즉, 아래 max함수를 호출시 nums 배열인자를 1,2,3 이란 개별인자로 전달한다. 원래같으면 Math.max([1,2,3]) NaN을 반환한다.

• 사용 대상 Array, String, Map, Set DOM과 같이 for...of 문으로 순회할 수 있는 이터러블에 한정
• 이터러블(프로토콜을 준수한 객체)이 아닌 유사 배열객체는 스프레드 문법의 대상이 될 수 없다.
• 간결, 가독성이 좋다.
• 스프레드 문법의 결과는 값이 아니다.
• 스프레드 문법의 결과는 변수에 할당 할 수 없다.
• 배열 복사 및 병합 객체 복사 및 병합의 역할을 이행할 수 있다.
• 얕은 복사를 수행한다.

함수 호출문의 인수 목록에서 사용하는 경우

배열을 펼쳐서 개별적인 값들의 목록으로 만든 후, 이를 함수의 인수 목록으로 전달해야 하는 경우

Math.max([1,2,3]); 숫자가 아닌 배열을 인수로 전달하면 최대값을 구할 수 없으므로 NaN을 반환한다.

스프레드 문법이 제공되기 이전에는 배열을 펼쳐서 요소들의 목록을 함수의 인수로 전달하고 싶은경우 function.prototype.apply 사용

var arr = [1,2,3];

//ES6전
var max = Max.max.apply(null, arr)

//ES6이후 
const max = Math.max(...arr)

배열 리터럴 내부에서 스프레드 문법사용하기

2개의 배열을 1개의 배열로 결합할때

var arr = [1,2].concat([3,4]);
console.log(arr) //[1,2,3,4]

//ES6 이후 
const arr =[..[1,2], ...[3,4]];
console.log(arr); //[1,2,3,4]

🕵️ 더 알아보기

Rest 파라미터란?

• 함수에 전달된 여러 인수들의 목록을 하나의 배열로 묶어준다.
• 가변인자(=정해지지 않은 수의 인자)를 처리할때 사용한다.
• 반드시 함수 매개변수의 맨마지막에 위치한다.

※ 매개변수 이름 앞에 ...을 붙이는 것으로 스프레드와 헷갈리지 말 것

function example(apple, banana, ...rest) {
  console.log(apple);        // 1
  console.log(banana);        // 2
  console.log("rest:", rest);  //  3, 4, 5
}

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

🔵 느낀점

같은 결과값을 도출하는 방법을 ES6 업데이트전후의 기능들로 비교했다. 또 한번 업데이트가 가져온 코드의 간결함과 가독성 향상을 확인할 수 있었던거 같다.