Javascript Spread 문법(...): 코드를 간결하게 만드는 비법

오늘은 Javascript의 spread 문법에 대해서 정리해 보겠습니다.

 

1. Spread(...)문법

이 문법은 ES6(ES2015)에 도입되었는데요.

 

Spread 문법은 ... (세 개의 점)을 사용해 배열, 객체, 혹은 함수의 인자 등을 '펼쳐서(spread out)',

사용하게 해 주는데요.

이 점3개가 요소가 펼쳐짐을 의미합니다.

객체나 배열을 분해해 펼쳐서 사용하게 해주는 유용한 문법이지요.

 

Spread 문법(...)을 이용하면,

배열이나 객체를 쉽게 조작할 수 있게 해주기 때문에,

코드가 간결해지고, 데이터 처리가 유연해 집니다.

함수 인자를 다루는 상황에서도 활용도가 매우 높구요.

 

2. Spread(...) 문법 사용 예

1-1. 배열 합치기

코드를 보면서 Spread 문법을 이해해 보겠습니다.

아래와 같이 first와 second라는 2개의 배열을,

어떻게 합쳐버리는지 보겠습니다.

 

const first = [1, 2, 3];
const second = [4, 5, 6];

const combined = [...first, ...second];
console.log(combined); // [1, 2, 3, 4, 5, 6]

 

아래와 같이 합칠수도 있습니다.

합쳐질 때, 순서도 아래와 같이 정해줄 수 있으므로,

유연하고 편리합니다.

const parts = ['shoulders', 'knees'];
const lyrics = ['head', ...parts, 'and', 'toes']; 
console.log(lyrics); // ["head", "shoulders", "knees", "and", "toes"]

 

 

1-2. 배열의 복사

이 spread문법을 이용해서 배열을 어떻게 복사할 수 있는지 보시지요.

 

const original = [1, 2, 3];
const copied = [...original];

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

 

1-3. 함수의 인자에서 사용하기

유연하기로 유명한 JS 함수의 인자에서는 어떻게 사용하는지도 보겠습니다.

이렇게 간단하게, 배열의 값을 바로 함수 계산값으로 출력할 수 있습니다.

 

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers)); // 6

 

 

1-4. 객체 합치기와 복사하기

객체를 합치는 것도,

spread 문법만 있으면 아래와 같이 너무 쉽습니다.

 

const student = {
  name: "홍길동",
  age: 23,
  class: "물리학"
};

const scores = {
  math: 95,
  science: 89,
  language: 76
};

const studentScores = { ...student, ...scores, parent: "홍길서" };
console.log(studentScores);

 

당연히 배열을 복사했던 것 처럼, 객체도 아래와 같이 복사할 수 있습니다.

 

const originalObj = { a: 1, b: 2 };
const copiedObj = { ...originalObj };

console.log(copiedObj); // { a: 1, b: 2 }

 

2. 정리

이상으로 Spread 문법을 살펴보았는데요.

'...' (세 점)을 사용하는 이 문법을 잘 이해한다면,

코드를 간결하게 만들어 읽기 쉬워지기 때문에,

좋은 코드 작성에 큰 도움이 될 것입니다.