본격적인 node.js 주차가 시작됐다. 자바스크립트 꽤 익숙해진 줄 알았는데 아직 써보지 못했던 구조 분해 할당이 헷갈려 기록해봐야겠다.
🧨 구조 분해 할당
- 배열이나 객체의 속성을 해체하여 그 안의 값을 개별 변수로 담을 수 있게 하는 표현식
- 구조화된 배열과 같은 이터러블 또는 객체를 구조파괴(destructuring) 하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.
- 배열의 각 요소를 배열로부터 추출, 1개 이상의 변수에 할당한다.(배열의 길이에 맞춰서 변수 할당 하지 않아도 OK)
- 배열 구조 분해 할당의 대상(할당문의 우변)은 이터러블이어야 한다.
🙋♀️ 이터러블?
- Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토 타입 체인 통해 상속 받은 객체
- ex) 배열(Array.prototype의 Symbol.iterator 메서드를 상속 받음)
⌨️ 예시
기본 구문
- a, b, restValue 라는 변수에 각각 값을 담아주었다.
let a, b, restValue;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
[a, b, ...restValue] = [10, 20, 30, 40, 50];
console.log(restValue); // Array [30, 40, 50]배열 구조 분해
- colorCode 안에 hexcode 값들을 쉽게 쓰기 위해 변수 red, green, purple에 지정해주기
const colorCode = ['#c23616', '#44bd32', '#9c88ff'];
const [red, green, purple] = colorCode;
console.log(red); // #c23616
console.log(green); // #44bd32
console.log(purple); // #9c88ff객체 구조 분해 방식
- 사용자의 아이디, 비밀번호 객체 구조 분해 해보기
const user = { userName: 'soo', password: 's!@002!'};
const {userName, password} = user;
console.log(userName, password); // soo s!@002!