[ Javascript ] 알아두면 유용한 문법 - Spread

안녕하세요 코띵입니다.

오늘 배운 개념은 C언어 공부할 때 봤던 것 같은데요,

자바스크립트에서도 사용할 수 있길래 포스팅 합니다.

 

| Spread

말 그대로 '펼친다' 는 개념인데요, 객체 혹은 배열을 펼칠 수 있다는 의미로 생각하시면 됩니다.

기존의 객체를 참고해서 새로운 객체를 생성하고, 새로운 객체에 추가적인 값을 넣어줄 때 유용합니다.

 

예시를 들어보겠습니다. 다음과 같이 3개의 객체가 있습니다.

 

const person = {
  name: '샛별이'
}
 
const woman = {
  name: '샛별이',
  gender: 'woman'
}
 
const kindWoman = {
  name: '샛별이',
  gender: 'woman',
  character : 'kind'
}

 

자세히 보시면 person 속성을 woman이 가지고 있고, woman의 속성을 kindWoman가 가지고 있습니다.

즉, 포함관계가 person< woman < kindWoman인 것입니다.

 

이럴 경우, spread를 쓰면 다음과 같이 변경할 수 있습니다.

 

const person = {
  name: '샛별이'
}
 
const woman = {
  ...person,
  gender: 'woman'
}
 
const kindWoman = {
  ...woman,
  character : 'kind'
}

 

'...객체명' 을 쓰면 해당 객체 값을 포함시킬 수 있는 것입니다.

 

배열의 경우도 사용할 수 있습니다. 다음과 같이 배열을 생성합니다.

 

const fastFood = ['치킨', '햄버거', '피자']
const food = [...fastFood, '비빔밥', '초밥']
 
console.log(food) // 치킨, 햄버거, 피자, 비빔밥, 초밥

 

이렇듯, spread는 기존에 생성되어 있는 것을 확장하여 새로운 객체나 배열을 생성할 때

유용하게 사용되는 문법입니다. 

 

도움이 돼셨다면 좋아요 꾸욱! 

부탁드립니다. 감사합니다.