[Javascript] 원시타입에 전개연산자 사용

객체 또는 배열에 전개 연산자를 사용해서 쉽게 병합 또는 복사할 수 있는 기능을 제공한다.

 

🎈 원시타입값을 객체에 전개 연산자 사용

아래와 같이 원시 타입의 값을 전개연산자를 사용하면 어떻게 될까? 

 

const obj = {
  ...1,
  ...'',
  ...undefined,
  ...null
}

 

처음에는 오류가 날 것으로 생각하였다. 하지만 객체에 원시값을 전개 연산자를 사용하더라도 오류가 나지 않고 값이 무시된다. 빈 객체가 생성되는 것을 확인할 수 있다.

console.log(obj); // {}

 

이걸 알기 전에는 오류가 날 것이라 생각해서 전개 연산자를 사용할 땐 값이 없는 경우도 존재한다면, 빈 객체로 초기화를 하도록 코드를 작성하였다.

 

아래의 예제 처럼 조건에 따라 병합 여부를 결정하는 경우에 조건이 맞지 않으면 빈 객체를 선언하여 사용했다.

const isValue = true;
const obj = {
  ...(isValue ? { name: 'Hello' } : {})
}

 

하지만 아래와 같이 코드를 작성하더라도 오류는 발생하지 않기 때문에 좀 더 간결하게 사용할 수 있다.

const isValue = false;
const obj = {
  ...(isValue && { name: 'Hello' })
}

 

 

📯 원시타입값을 배열에 전개 연산자 

그렇다면 배열에도 동일하게 전개 연산자를 사용했을 때 값이 무시되는 것일까? 아래와 같이 코드를 작성했을 때 어떻게 될까?

const list = [
  ...1,
  ...'',
  ...undefined,
  ...null
]

 

정답은 오류가 발생한다. 전개 연산자가 객체와는 달리 작동하기 때문에 오류가 발생하게 된다.

 

배열에서 전개 연산자를 사용하면 이터러블 프로토콜을 사용하게 된다.

그래서 문자열을 제외한 나머지 원시값의 경우에 이터러블이 아니라서 다음과 같은 에러를 마주하게 된다.

TypeError: 1 is not iterable