[JavaScript] 36. 디스트럭처링 할당

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

 

🔹 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

01. 배열 디스트럭처링 할당

💡 ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여, 1개 이상의 변수에 할당

🔹 배열 디스트럭처링 할당의 대상은 이터러블이어야 하고, 할당 기준은 배열의 인덱스다.

// ES5

var arr = [1, 2, 3]

var one = arr[0]
var two = arr[1]
var three = arr[2]


// ES6

const [one, two, three] = arr

// 기본값
const [a, b, c = 3] = [1, 2]
console.log(a, b, c) // 1 2 3

// 기본값보다 할당된 값이 우선
const [e, f=10, g=3] = [1, 2]
console.log(e, f, g) // 1, 2, 3

---

02. 객체 디스트럭처링 할당

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

// ES5

var user = { firstName: 'Ungmo', lastName: 'Lee' };

var firstName = user.firstName;
var lastName = user.lastName;

console.log(firstName, lastName); // Ungmo Lee

 

💡 ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다.

🔹 객체 디스트럭처링 할당의 대상은 객체이어야 하며, 할당 기준은 프로퍼티 키다.

const user = { firstName: 'Ungmo', lastName: 'Lee' };

// ES6 객체 디스트럭처링 할당
// 변수 lastName, firstName을 선언하고 user 객체를 디스트럭처링하여 할당한다.
// 이때 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다. 순서는 의미가 없다.
const { lastName, firstName } = user;

console.log(firstName, lastName}; // Ungmo Lee

// 기본값 설정
const { firstName = 'Ungmo', lastName } = { lastName: 'Lee' };

const { firstName = fn = 'Ungmo', lastName: ln } = { lastName: 'Lee' };
console.log(fn, ln); // Ungmo Lee

 

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

const str = 'Hello';

// String 래퍼 객체로부터 length 프로퍼티만 추출한다.
const { length } = str;
console.log(length); // 5

const todo = { id: 1, content: 'HTML', conpleted: true };
// todo 객체로부터 id 프로퍼티만 추출한다.
const { id } = todo;
console.log(id); // 1

 

 

📖 참고자료

https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C/dashboard