전개 구문, 속성 스프레드 구문 (Spread Syntax) 이란?

전개 구문, 속성 스프레드 구문 (Spread Syntax) 이란?

• ... 이라는 표현을 통해, 오브젝트 내부의 요소들을 전개할 수 있다.
• iterable 한 오브젝트에 사용 가능하다.
  • ex) string, array, {}
• 오브젝트 리터럴 ({}) 의 경우에는 enumerable 한 프로퍼티를 순회하는 형식이다.
• 생긴 건 Rest Syntax 와 흡사한데, 역할이 다르다.
  • Rest Syntax 는 파라미터나 프로퍼티를 모으는 역할 이지만 Spread Syntax 는 오브젝트 내부의 요소들을 하나씩 늘어뜨리는 역할이다.
• 다른 객체의 속성이 모두 포함된 객체를 만들 때 유용하다.
  • "불변" 방식으로 프로그래밍할 때 일반적이다.
• null 이나 undefined 가 뒤에 와도 에러를 내뱉지 않는다.
  • 의도된 것이다.
• 상속된 속성이 아니라 객체 고유의 열거 가능한 속성만 사용한다.

배열 예제

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

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.apply(null, numbers));
// expected output: 6

오브젝트 예제

const defaultOptions = {
  title: "ABC",
  text: "default text",
};

const customOptions = {
  text: "custom text",
};

const finalOptions = {
  ...defaultOptions,
  ...customOptions,
};

console.log(finalOptions); // {title: 'ABC', text: 'custom text'}

• Spread Syntax 를 통해 프로퍼티를 덮어씌워보았다.
• 뒤에 오는 것이 승리한다.

Object.assign() 과의 비교

그렇다면, Object.assign() 과 비슷한 역할인 것 같은데, 대체될 수 있을까? 대체될 수 없다.

• Object.assign() 은 원본 객체를 변화시키는 방법을 통해 프로퍼티를 덮어씌운다.
• Spread Syntax (...) 는 새로운 객체를 만드는 방법을 통해 프로퍼티를 덮어씌운다.

둘의 공통점은 enumerable 한 프로퍼티만 복사해준다는 점이다.

null 이나 undefined 가 왔을 때

const obj = {
  ...null,
  ...undefined,
};

console.log(obj); // {}

• 혹여 표현식이 null 이나 undefined 더라도 에러 걱정없이 사용할 수 있다.

연산자가 아니다.

• 가끔 이를 연산자라고 부르는 사람들이 있는데, Spread Syntax 는 연산자가 아니라 구문/표기로 봐야 한다.
• 연산자의 정의는 피연산자를 가지고 있으며, 단일 결과값이 나오는 것이다.
• 연산자는 표현식이 예상되는 모든 곳에서 사용할 수 있는 반면, ... 은 특정 위치에서만 사용 가능하다.
  • 속성 스프레드 구문은 {} 라는 객체 리터럴 내부에서만 사용이 가능하다.

이터러블 스프레드 문법과 다르다.

• 이터러블 스프레드 문법은 iterable 객체를 이산 값으로 분산하여 이터러블을 소비하는 방법이다.
• 이터러블 스프레드 문법이란? 링크에서 살펴볼 수 있다.

레퍼런스

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax