[JS] 스프레드(Spread) 연산자?

Spread 연산자

의미 : 흩뿌리다, 펼치다 

객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할

 

배열에서도?

let arr1 = [1,2,3];

let arr2 = [4,5,6];

 

arr1의 원소들을 arr2의 인덱스[1]에 넣고 싶은데.. 어떻게 해야할까?

let arr2 = [ 4, ...arr1 ,  5, 6]

...arr1 // 曰:점점점 arr1배열

의미 : arr1의 원소들을 개별로 뿌려줘라

 

객체에서도?

let obj1 = {

 a:1,

 b:2

}

 

let obj2 = {

...obj1,  // 曰: 점점점 obj1(객체이름)

 c:3,

 d:4

}

개발자도구

함수에서도?

function funcA(p1, p2, p3){ //arr1에 인자는 세개의 값이 들어가 있으니까~

  console.log(p1, p2, p3);

}

 

let arr1 = [1,2,3];

funcA(...arr1);

Rest 매개변수 = 나모지 모두 한방에 저장(배열 형태로)

ㄴ 의미 : 나머지, 나머지 매개변수

배열형태로 저장이 된다.

 

let arr1 = [1,2,3];

function funcB(...rest) { //💥 ... 이 붙었다고 스프레드 연산자가 아님, 엄연히 Rest 매개변수라는 명칭있다는걸 명심하자.

  //무수히 많은 값이어도 Rest매개변수를 사용하면 한방에 배열 형태로 저장된다.

   console.log(rest)

}

 

funcB(...arr1);

또는

 

let arr1 = [1,2,3];

 

function funcB(one, ...rest) {

// 첫번째로 전달 받은 인수는 one에 저장이되고

// 그외 나머지는 Rest 매개변수에 저장된다.

   console.log(rest)

}

funcB(...arr1);

 

💥주의

function funcB(one, ...rest , three) {

   console.log(rest)

}

 

Rest 매개변수 뒤에는 추가적인 매개변수를 선언해서는 안된다.

왜? 나머지를 저장하는게 Rest 매개변수이기 때문이다.

 

✅추가로

Rest 매개변수라고 ...rest만 사용할 필요 없다

...만 붙으면 그뒤에오는 명칭은 상관없다.

ex)

...data 

...param