[TIL] 구조 분해 할당

본격적인 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!