JavaScript - Spread연산자와 Rest매개변수 (15)

 

Spread연산자와 Rest매개변수

 

1. JavaScript - Spread연산자와 Rest매개변수란

 - 문법적으로 동일한 ...을 사용하지만 목적과 용도가 다르다.

 

2. Spread연산자

 - 배열이나 객체의 요소들을 개별적으로 펼쳐서 다른 배열이나 객체에 복사하거나 함수의 인수로 전달할 때 사용된다.

let arr1 = [1, 2, 3];
let arr2 = [4, ...arr1, 5, 6];
console.log(arr2);

...arr1는 arr1배열의 요소들인 [1, 2, 3]을 개별 요소로 펼친다.

배열 arr2의 다른 요소들과 결합되어 [4, 1, 2, 3, 5, 6]이라는 새로운 배열이 생성된다.

 

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3, c: 4 };
console.log(obj2);

...obj1객체의 속성들을 펼쳐서 새로운 객체 obj2에 복사한다.

최종적으로 { a: 1, b: 2, c: 4} 객체가 출력된다.

 

function funcA(p1, p2, p3) {
  console.log(p1, p2, p3);
}

funcA(...arr1);

...arr1의 요소들인 [1, 2, 3,]을 개별 인수로 펼쳐서 함수 funcA에 전달한다.

한수 funcA는 p1 = 1, p2 = 2, p3 =3 인수로 받게되고 결과적으로 1 2 3이 출력된다.

 

3. Rest 매개변수

 - Rest 매개변수는 함수 정의에서 사용되는 문법으로 함수가 전달받은 나머지 인수들을 하나의 배열로 모아주는 역할을 한다. 나머지, 나머지 매개변수

 

function funcB(one, ...rest) {
  console.log(rest);
}
funcB(...arr1);

 

funcB 함수는 one을 받고 나머지 인수들은 rest라는 배열로 모으게 되는데 one에 첫번째 인수가 할당되면 그외 나머지 인수들은 모두 rest배열에 담긴다.

 

funcB(...arr1)

 - arr1 배열의 값이 [1, 2, 3]일때 funcB(one에 1을 할당하고 나머지 2, 3을 rest배열로 받게된다.