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

Ahnzi·2025년 2월 3일

one-bite-react

목록 보기

11/11

“Spread”는 “흩뿌리다.” 또는 “펼치다.” 라는 의미를 갖고 있습니다. 따라서 Spread 연산자는 객체나 배열에 저장된 여러 개의 값을 개별 요소로 분리하여 확장하는 역할을 합니다.

아래와 같은 배열 두 개가 있다고 가정합니다.

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

arr2 배열의 4와 5 사이에 arr1 배열의 값들을 순서대로 흩뿌려봅니다.

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

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

"..."이 바로 Spread 연산자입니다.

Spread 연산자는 배열뿐만 아니라 객체에도 사용할 수 있습니다.

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

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

console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }

함수를 호출할 때도 Spread 연산자를 자주 활용합니다.

let arr1 = [1, 2, 3];

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

funcA(...arr1);

Rest는 "나머지." 라는 뜻을 가지고 있습니다.

Rest 매개변수는 앞서 만든 funcA() 함수처럼 여러 개의 매개변수를 받아야 할 때, 이를 배열 형태로 한 번에 수집할 수 있도록 도와주는 문법입니다.

function funcB(...rest) {
  console.log(rest); // [1, 2, 3]
}

funcB(...arr1);

만약 첫 번째 매개변수를 별도의 이름으로 저장하고 싶다면, 아래와 같이 작성할 수 있습니다.

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

funcB(...arr1);

운동하는 개발자 Ahnzi 입니다.