꺼낼 때 구조분해, 합칠 때 스프레드를 쓴다
두 문법은 ...처럼 비슷해 보이는 기호도 있지만, 값 추출과 값 복사의 위치가 다르므로 목적을 먼저 나누면 쉽다.
| 목적 | 구조 분해 | 스프레드 | 주의점 |
|---|---|---|---|
| 값 꺼내기 | const { name } = user | 해당 없음 | 없는 값 기본값 처리 |
| 이름 바꾸기 | { name: label } | 해당 없음 | 원래 속성명과 변수명 구분 |
| 남은 값 묶기 | { id, ...rest } | rest property | 얕은 복사 |
| 값 펼치기 | 해당 없음 | { ...user, active:true } | 뒤 값이 앞 값을 덮음 |
| 배열 조합 | [first, ...others] | [...a, ...b] | 중첩 배열은 그대로 공유 |
구조 분해는 읽는 쪽, 스프레드는 만드는 쪽에서 쓰이는 문법이라고 나누면 헷갈림이 줄어든다.