[모딥다] 36장 디스트럭처링 할당

 

 

디스트럭처링 할당 (구조 분해 할당)
구조화된 배열과 같은 이터러블 또는 객체를 Destructuring = 비구조화, 구조 파괴 하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.

 

 

🐲 36.1 배열 디스트럭처링 할당

 

배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이여야 하며, 할당 기준은 배열의 인덱스다. 

즉, 순서대로 할당된다.

const arr = [1, 2, 3];

const [one, two, tree] = arr;

console.log(one, two, three); // 1, 2, 3

 

const [x, y] = [1, 2];

 

우변에 이터러블 할당을 하지 않으면 오류남. 

 

요소 개수가 반드시 일치할 필요는 없다.

const [a, b] = [1];
console.log(a, b) // 1 undefined

 

기본값보다 할당된 값이 우선된다.

const [a, b, c = 3] = [1, 2, 10];
console.log(a, b, c) //1 2 10

기본값 3이 아닌 할당된 10이 됨.

 

 

 

 

 

 

🐲 36.2 객체 디스트럭처링 할당

 

각 프로퍼티를 객체로부터 디스트럭쳐링 하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야한다.

객체 디스트럭처링 할당 기준은 프로퍼티 키다. 

즉, 순서는 의미가 없으며, 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

 

(흠.. 어디서 많이 들어봤는데)

 

const user = { firstName: 'San', lastName: "ta" };

const firstName = user.firstName;
const lastName = user.lastName;

=> 이 부분을

const { firstName, lastName } = user;

이렇게 써줘도 됨.

console.log(firstName, lastName);
//San ta

 

 

객체의 프로퍼티와 다른 이름으로 값을 할당받으려면 변수를 아래와 같이 선언한다.

const user = { firstName: 'Hi', lastName: "Hello" };

const { lastName: ln, firstName: fn } = user;
console.log(fn, ln);
//Hi Hello

=> firstName, lastName 변수 이름 사용하려하면 에러남.

 

📌 객체 디스트럭처링 할당은 객체에서 필요한 프로퍼티값만 추출하여 변수에 할당하고 싶을 때 유용하다.

const str = "hello";

const { length } = str;
console.log(length);

const todo = { id: 123, content: "HTML", completed: true };

const { id } = todo;
console.log(id);

 

헐 이거 유튭만들기에서 배운거자나?

오우~~~~~

 

const todos = [
    { id: 1, content: "HTML" },
    { id: 2, content: "CSS" },
    { id: 3, content: "JS" },
];

const [, { id }] = todos;
console.log(id); //2

 

배열의 요소가 객체인 경우, 배열 디스트럭처링 할당과 객체 디스트럭처링을 혼용할 수 있다.

 

 

중첩 객체 사용법

const user = {
    name: "ddozza",
    address: {
        zipcode: 12345,
        city: "Seoul"
    }
}

const { address: { city } } = user;

console.log(city); //Seoul