[Java Script] Spread Operator, Rest 파라미터 알아보기

| Spread Operator

자바스크립트에서 Spread Operator는 배열이나 객체의 요소를

또 다른 배열이나 객체로 분산하거나 복사할 수 있는 연산자입니다.

점 3개(...)를연달아 쓰면 이게 Spread Operator입니다.

 

활용 방법은 다음과 같습니다.

1. 배열 복사

spread operator를 사용해서 배열을 복사할 수 있습니다.

let arr = [1, 2, 3, 4, 5];

let copy = [...arr]

console.log(copy); // [1, 2, 3, 4, 5];

 

2. 배열 합치기

spread operator를 사용해서 배열들을 합칠 수 있습니다.

let arr1 = [1, 2, 3];
let arr2 = [4, 5];

let arr3 = [...arr1, ...arr2];

console.log(arr3); // [1, 2, 3, 4, 5] 출력

 

3. 함수의 인수로 배열을 전달

spread operator를 사용해서 함수의 인수로 배열을 전달할 수 있습니다.

function 함수(a, b, c) {
  console.log(a, b, c);
}

let arr = [1, 2, 3];
함수(...arr); // 1 2 3 출력

 

4. 객체 생성

spread operator를 사용해서 원하는 요소가 포함된 객체를 만들 수 있습니다.

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

 

| Rest 파라미터

rest파라미터는 spread operator와 똑같이 점 3개(...)로 사용합니다.

하지만 활용법은 spread operator와 다르게 

함수의 파라미터로 쓰이며 뒤에 남는 요소를 배열로 나타내줍니다.

 

function myFunction(a, b, ...rest) {
  console.log(rest);
}

myFunction(1, 2, 3, 4, 5, 6); // [3, 4, 5, 6] 출력