구조 분해와 spread

개념 이해하기

구조 분해 할당은 위치나 속성 이름으로 값을 꺼냅니다. spread는 배열 항목이나 객체 속성을 새 컨테이너에 펼칩니다. 복사는 한 단계만 이루어지는 얕은 복사이므로 중첩 객체는 여전히 같은 참조를 공유합니다.

const { title, level } = course가 같은 이름의 속성을 꺼내 title은 JavaScript, level은 입문이 됩니다. updated는 course의 속성을 모두 펼친 뒤 level만 기초로 다시 써서 만든 새 객체라 course.level은 입문 그대로이고, 마지막 부분은 skills를 펼친 새 배열 끝에 JavaScript를 더해 HTML, CSS, JavaScript를 출력합니다.

구조 분해에서는 이름을 바꾸거나 기본값을 줄 수 있습니다. const { title: courseTitle, price = 0 } = course는 title 값을 courseTitle이라는 이름으로 받고, course에 없는 price에는 0을 넣습니다. 객체를 펼칠 때는 뒤에 적은 속성이 앞의 것을 덮으므로, level을 먼저 적고 ...course를 뒤에 두면 level은 다시 입문이 됩니다.