[Javascript] Spread 연산자와 Rest 매개변수

 

Spread 연산자

 

...배열이나 객체이름

 

흩뿌리다, 펼치다 라는 뜻으로 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할을 한다

 

let color = ['red' , 'blue' , 'green'];
let animal = ['cat' , 'dog' , 'mouse'];

 

이때 cat, dog 사이에 color를 넣고 싶다면

원래는 

 animal  = ['cat' , color[0], color[1], color[2], 'dog' , 'mouse' ]; 로 직접 넣어줬어야함

 

근데 이렇게 하면 문제가 발생할 확률이 높음
 → 배열의 값이 추가되거나 삭제가 되면 내가 원했던 결과와 다르게 나올 수 있음

 

그래서  Spread 연산자를 이용해 간단하고 안전하게 다루기 가능

 

let color = ['red' , 'blue', 'green'];
let animal = ['cat' , 'dog' , 'mouse'];

 

 animal  = ['cat' , ...color ,'dog' , 'mouse' ]; 

console.log(animal); 

→ 결괏값: (6) ['cat', 'red', 'blue', 'green', 'dog', 'mouse']

 

 

객체도 똑같이 사용

let fruit1 = {
  a: lemon,
  b: grape,
};

 

let fruit2 = {
  c: mango,
  d: apple,
};

 

일때 fruit2 c 앞에 fruit1를 넣고 싶다면

 

fruit2 = {

  ...fruit1,
  c: mango,
  d: apple,
};

 

함수호출할 때도 Spread 유용하게 사용가능함

 

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

 

Rest 매개변수

 

...Rest매개변수로 쓸 변수이름

 

Rest 나머지라는 뜻으로, 나머지 매개변수 의미

여러개의 매개변수를 받아야할 때 배열 형태로 한번에 여러개의 매개변수를 받아올 수 있도록 함

 

Rest 변수의 이름은 아무거나 원하는대로 정해도 됨 그러나 맨 마지막에 써야하고 앞에 ...꼭 써줘야함
이 때 ...은 앞의 Spread 연산자와 아에 다른 것

 

 

function funcB(...restVar) {
  console.log(restVar );
}
funcB(...fruit1);

 

이때 할당될 변수의 이름을 주고 싶다면

function funcB(줄 변수이름, ...rest) {
  console.log(rest);
  console.log(줄 변수이름);
}