[JavaScript] Spread Operator 펼침연산자

펼침연산자는 ...로 표기하며 말 그대로 객체나 배열 내부의 값을 펼쳐주는 연산자이다.

 

1. 배열에서의 펼침연산자

const weekday = ["Mon", "Tue", "Wed", "Thu", "Fri"];
const weekday2 = [...weekday];

console.log(weekday); // [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri' ]
console.log(weekday2); // [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri' ]
console.log(weekday === weekdays); // false

weekday와 weekday2를 콘솔에 출력하면 출력값이 같지만,

weekday2는 weekday를 똑같이 복사했을뿐 다른 메모리 공간에 만들어진 것으로 둘의 참조값은 다르기 때문에 둘을 비교하면 false가 출력된다.

 

펼침연산자는 배열을 합칠 때 유용하게 사용할 수 있다.

const weekday = ["Mon", "Tue", "Wed", "Thu", "Fri"];
const weekend = ["Sat", "Sun"];
const week = [...weekday, ...weekend];

console.log(week); // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

 

인자로 전달할 때 사용할 수도 있다.

const num = [ 1, 2, 3 ];

function sum(a, b, c) {
  return a + b + c;
}

console.log(sum(num[0], num[1], num[2])); // 6
console.log(sum(...num)); // 6

펼침연산자를 사용하지 않을 경우 배열 num에서 값을 일일이 하나씩 꺼내 sum의 인자로 넣어주어야 하지만

펼침연산자를 사용하면 배열 num을 펼쳐서 1, 2, 3을 a, b, c에 각각 할당해준다.

 

2. 객체에서의 펼침연산자

객체를 합칠 때 유용하게 사용할 수 있다.

const red = {
  color: "red",
};

const apple = {
  name: "apple",
};

const redApple = { ...red, ...apple };

const sweetRedApple = {
  taste: "sweet",
  ...redApple,
};

console.log(redApple); // { color: 'red', name: 'apple' }
console.log(sweetRedApple); // { taste: 'sweet', color: 'red', name: 'apple' }