📖 [JS] Spread 연산자 & Rest 매개변수

 

Spread 연산자

 

 

Spread 연산자는 배열이나 객체를 개별 요소로 분해하여 함수 호출이나 다른 배열, 객체 내에 삽입할 때 사용됩니다.

Spread 연산자는 세 개의 점(...)으로 표현됩니다

 

// Spread 연산자
// -> Spread 흩뿌리다, 펼치다 라는 뜻
// -> 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할

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

 

 

여기서 arr2 배열에 arr1 배열의 값들을 추가해서 사용하고 싶다면

 

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

 

 

위와 같이 사용할 수는 있지만 굉장히 귀찮고, 위험합니다.

그 이유는 배열의 원소가 나중에 더 추가될 수 있으며, 또는 해당 원소가 삭제될 수도 있습니다.

 그렇기 때문에 인덱스를 일일이 배열에 펼쳐 놓는 것은 위험한 방법입니다.

 

 

이럴 때 Spread 연산자를 사용하면 됩니다.

 

// Spread 연산자
// -> Spread 흩뿌리다, 펼치다 라는 뜻
// -> 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할

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

 

 

 

... arr1이 Spread 연산자이고, arr1 배열의 모든 요소들을 개별로 풀어 헤쳐라라는 의미를 가지고 있습니다.

 

// Spread 연산자
// -> Spread 흩뿌리다, 펼치다 라는 뜻
// -> 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할

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

let obj1 = {
    a:1;
    b:2;
};

let obj2 = {
    ...obj1,
    c:3,
    d:4
}

 

 

또한 Spread 연산자는 배열뿐만 아니라 객체에도 사용이 가능합니다.

 

 

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

let obj1 = {
    a:1;
    b:2;
};

let obj2 = {
    ...obj1,
    c:3,
    d:4
}

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

funcA(...arr1);

 

 

또한 함수를 호출할 때도 Spread 연산자를 자주 활용해 볼 수 있습니다.

예를 들어서 function funcA 이러한 함수가 있다고 가정했을 때,

 

함수를 호출하면서 인수로 arr1 배열의 값을 순서대로 전달하고 싶다면

arr1을 Spread 연산자로 풀어 해쳐 전달하면 됩니다.

 

---

 

Rest 매개변수

 

 

// Rest 매개변수
// -> Rest는 나머지, 나머지 매개변수

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

funcB(...arr1);

 

 

 

 

funcA 함수처럼 인수로 ...arr1 이런 식으로 여러 개의 인수가 전달이 될 때,

rest 매겨변수를 이용하면, 한 번에 모든 매개변수들을 다 받아 올 수 있습니다.

 

참고로 ...은 매개변수를 정의하는 공간인 ()안에서 사용이 되었기 떄문에

Spread 연산자가 아니라 Rest 매개변수 라는 점을 기억해야합니다. 

 

 

// Rest 매개변수
// -> Rest는 나머지, 나머지 매개변수

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

funcB(...arr1);

 

one이라는 매개변수를 앞에다가 뺴놓으면 첫 번째로 전달된 인수는

one에 저장이 되고, 나머지 2, 3번째로 전달되는 인수들이 나머지 배열에 저장이 됩니다.

 

 

arr1의 값이 1, 2, 3인데 1은 매개변수 one에 저장이 되었고,

나머지는 이렇게 2, 3이라고 해서 rest에 저장이 된 것을 확인할 수 있습니다.

 

---

 

요약

 

• Spread 연산자는 배열이나 객체를 개별 요소로 분해하여 함수 호출이나 다른 배열, 객체 내에 삽입할 때 사용됩니다.
• Rest 매개변수는 함수의 매개변수 목록에서 마지막에 위치하며, 전달된 인수들을 배열로 모아 받을 수 있게 합니다.
  

이 두 개념은 자바스크립트에서 배열과 객체를 더욱 유연하고 간결하게 다룰 수 있게 해줍니다.