[JS] 전개 연산자

1. 전개 연산자 개요

1. 전개 연산자 개념

전개 연산자(spread operator)란 배열이나 객체를 전개하는 문법이다.

배열이나 객체를 펼쳐서 각각의 요소를 개별적으로 다룰 수 있게 해준다.

2. 전개 연산자 사용하기

배열이나 객체 앞에 점 세 개(…)를 붙여주면 된다.

2.1 배열

1, 2, 3과 같이 개별적인 값으로 펼쳐진다.

let array = [1, 2, 3];

console.log(array); // [ 1, 2, 3 ]
console.log(...array); // 1 2 3

첫 번째 요소를 name에 할당하고, 나머지 요소들을 rest 배열로 추출한다.

let [name, ...rest] = ["Tom", 10, "Seoul"];

console.log(name); // Tom
console.log(rest); // [ 10, 'Seoul' ]

첫 번째 요소를 a에 할당하고, 나머지 요소들을 b 배열로 추출한다.

const array = [1, 2, 3];
const [a, ...b] = array;

console.log(a); // 1
console.log(b); // [2, 3]

배열에 4를 추가하고 싶다면 push를 사용해도 좋지만, 전개 구문을 활용하면 정말 쉽게 할 수 있다!

const array = [1, 2, 3];
const newArray = [...array, 4];

console.log(newArray); // [ 1, 2, 3, 4 ]

2.2 객체

user 객체는 변경되지 않고 그대로 유지되며, user2 객체는 name 속성만 업데이트된 복제본이 출력된다.

let user = {
  name: "sieun",
  age: 22,
  cute: "yes",
};

let user2 = { ...user };

user2.name = "totoro";

console.log(user); // { name: 'sieun', age: 22, cute: 'yes' }
console.log(user2); // { name: 'totoro', age: 22, cute: 'yes' }

아래처럼 사용할 수도 있다.

let user = {
  name: "sieun",
  age: 22,
  cute: "yes",
};

let user2 = {
  ...user,
  name: "totoro",
};

console.log(user); // { name: 'sieun', age: 22, cute: 'yes' }
console.log(user2); // { name: 'totoro', age: 22, cute: 'yes' }

3. 나머지 매개변수

매개변수의 개수를 정확히 모를 때, 나머지 매개변수를 사용한다.

function func(a, b, ...args) {
  console.log(...args);
}

func(1, 2, 3); // 3
func(1, 2, 3, 4, 5, 6, 7); // 3 4 5 6 7

⚠️ 스프레드 문법을 써줬을 때만 나머지 매개변수로 인식이 가능하다!

4. 참조

1. https://ko.javascript.info/rest-parameters-spread