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

 

1. Spread 연산자

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

 

(1) 배열 및 객체에서 사용 

let arr1 = [1,2,3];
let arr2 = [4,5,6]; //4와 5사이에 1,2,3을 넣는 경우

//원래라면 아래와 같이 사용 
let arr3 = [4, arr1[0], arr1[1], arr1[2], 5, 6]; 
//나중에 값이 추가/삭제 될 수도 있기 때문에 위험


//스프레드 연산자 배열 사용
let arr4 = [4, ...arr1, 5, 6];
console.log(arr4);


//스프레드 연산자 객체 사용
let obj1 = { a:1, b:2,};
let obj2 = { ...obj1, c:3, d:4,};

console.log(obj2);

 

(2) 함수 호출에 사용

let arr1 = [1,2,3];
function funcA(p1, p2, p3){
    console.log(p1, p2, p3);
}

funcA(...arr1);

 

2. Rest 매개변수 

- 나머지 매개변수 즉, 여러개의 매개변수를 받아야할 떄 배열형태로 한방에 받아올 수 있도록 해 주는 것

- 여기서 사용 된 ...은 Spread 연산자가 아니라 Rest 매개변수이다.

- Rest 매개변수 뒤에는 추가로 매개변수를 넣을 수 없다. (ex. ...rest, last) 

//rest
function funcB(...rest){
    console.log(rest);

}

funcB(...arr1);

 

만약 첫 번째 매개변수의 경우 다른이름으로 받고싶다면 아래와 같이 수정한다

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

}