node JS 스프레드 연산자에 대해

Node에서 ... 인 코드가 종종 보인다.

 

처음 봤을 때 느낌

자바 개발자 입장에서 ... 이거 보면 당황함
“이게 뭐야? 매개변수도 아닌데 변수 앞에 점 세 개?”
“전개? 복사? 구조분해?”
대충 느낌은 오는데 정확히 뭐하는 놈인지는 헷갈림

 

 

 

1️⃣ 기본 개념

스프레드(spread) 연산자는 말 그대로 ‘펼친다’는 뜻임.
배열이나 객체 안의 요소를 하나씩 꺼내서 ‘전개’해줌.

const arr1 = [1, 2, 3]
const arr2 = [...arr1, 4, 5] // [1,2,3,4,5]

 

...arr1 이 부분이 배열의 요소를 풀어서 넣어주는 것.

만약 arr2 = [arr1, 4, 5] 했으면 [ [1,2,3], 4, 5 ] 됐을 거임.

즉, ...은 “이 배열(또는 객체)의 안쪽 내용을 꺼내라”는 의미임!

 

 

2️⃣ 객체에서도 가능

객체도 마찬가지로 펼칠 수 있음.

 

const user = { name: 'sion', age: 29 }
const updated = { ...user, age: 30, job: 'developer' }

 

이러면 user 내용이 먼저 펼쳐지고,
그 다음 age가 30으로 덮어씌워짐.

→ 자바에서 copy constructor나 clone 후 일부 수정 같은 느낌.

 

3️⃣ 조건부로 값 추가할 때 유용

내가 제일 당황했던 부분.
아래처럼 쓰는 코드 보고 ‘이게 뭐야?’ 했음.

return {
  bot_type: 'default',
  ...(this.description !== undefined ? { description: this.description } : {}),
  ...(this.scopes !== undefined ? { scopes: this.scopes } : {}),
}

 

이건 “description이 있으면 그 속성만 추가”하는 트릭임.
undefined일 때는 빈 객체 {}가 펼쳐지니까 아무 일도 안 일어남.

이거 덕분에 if문 줄 필요 없이 깔끔하게 조건부 필드 추가 가능함.