전개연산자(spread) vs 나머지 매개변수

🐸 전개연산자 (spread)

• 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수(함수로 호출할 경우),
  또는 요소(배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체를 확장시킬 수 있다.
  ❗ 즉, 배열이나 문자열, 객체를 합치는데 사용한다

// 예제 (1)

function myFunction(x, y, z) { 
   return x+y+z
}

let args = [0, 1, 2];
myFunction(...args);

console.log(myFunction(...args))  
// 출력결과: 3



// 예제 (2)

let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
// 출력결과: ["head", "shoulders", "knees", "and", "toes"]



// 예제 (3)
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; 
// 출력결과: arr1 = [0, 1, 2, 3, 4, 5]


// 1. 배열의 요소를 전개.
let arr = [3, 5, 1];

alert( Math.max(...arr) ); // 5

// 2. 배열을 전개하여 신규배열 생성
let arr = [3, 5, 1];
let arr2 = [8, 9, 15];

let merged = [0, ...arr, 2, ...arr2]; // 0,3,5,1,2,8,9,15

// 3. 이터러블 객체 배열전환
let str = "Hello";

alert( [...str] ); // H,e,l,l,o

🐸 나머지 매개변수

• 매개변수 자리에만 사용할 수 있다. (배열을 통째로 매개변수에 넘겨주는 것)
• 함수 매개변수가 가변적이거나 정확한 매개변수 갯수를 알 수 없을때 사용.
  ❗ 즉, 배열이나 문자열, 객체를 분해할 때 사용한다

// 예제 (1)

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

alert( sum(1, 2, 3, 4, 5) );



// 예제 (2) 

// 모든 인수가 배열 args에 저장
function sumAll(...args) {
	for (let arg of args) sum += arg;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6


// 예제 (3)

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName );    // Julius Caesar

  // 나머지 인수들은 배열 titles의 요소가 됩니다.
  // titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");
❗❗❗ 주의! 나머지 매개변수는 항상 마지막에 선언

function f(arg1, ...rest, arg2) <-- 에러

🥇 정리

• "..."은 나머지 매개변수나 전개 문법으로 사용된다.

• 나머지 매개변수와 전개 문법은 아래의 방법으로 구분할 수 있다.

• "..."이 함수 매개변수의 끝에 있으면 인수 목록의 나머지를 배열로 모아주는 나머지 매개변수이다.

• "..."이 함수 호출 시 사용되면 배열을 목록으로 확장해주는 전개 문법이다.