JS | 디스트럭처링 할당 (Destructuring)

'모던 자바스크립트 Deep Dive' (36장)을 읽고 정리한 글입니다

 

객체를 1개 이상의 변수에 개별적으로 할당하고 싶을때, 객체 리터럴에서 필요한 값만 추출하여 변수에 할당시키는 방식을 Destructuring Assignment, 디스트럭처링 할당이라고 한다. 

 

자바스크립트에서 배열과 객체를 각각 분할해서 변수에 할당시키는 방식을 알아보자. 

 

1. 배열 디스트럭처링 (ES6 기준)

const arr = [1, 2, 3];

// ES6 배열 디스트럭처링 할당 
const [one, two, three] = arr;
console.log(one, two, three);	// 1 2 3 

위의 코드를 보면 변수 one, two, three를 선언하고 배열 arr를 비구조화(디스트럭처링) 하여 변수에 할당시켜 준다.

배열 디스트럭처링 할당을 위해서는 반드시 변수와 할당 대상 양쪽 모두 배열이어야 한다. 

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

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

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

const [c, d] = [1];
console.log(c, d)	// 1 undefined

const [e, f] = [1, 2, 3];
console.log(e, f)	// 1 2

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 

 

만약 우변에 이터러블 형태로 할당하지 않으면 다음과 같은 에러가 발생할 것이다. 

const [x, y];
const [a, b] = {};	// TypeError

{}는 이터러블이 아니기때문에 발생하는 에러! 

 

2. 객체 디스트럭처링 (ES6 기준)

객체의 디스트럭처링 할당의 경우, 객체 프로퍼티의 키값을 사용해야 한다. 

const user = { firstName: 'Ahn', lastName: 'Lee' };
const { lastName, firstName } = user;
console.log(firstName, lastName);	// Ahn Lee

변수를 선언하고, user 객체를 디스트럭처링 하여 할당시켜준 모습이다. 

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

객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 이렇게!

 

const { firstName = 'Ahn', lastName } = { lastName: 'Lee' };
console.log(fistName, lastName);	// Ahn Lee

const todo = { id: 1, content: 'HTML', completed: true };
const { id } = todo;
console.log(id);	// 1

이렇게 객체 디스트처링은 객체에서 프로퍼티 키로 필요한 값만 추출하고 싶을때 유용하다 

function printTodo(todo) {
	console.log(`할일 ${todo.content}은 ${todo.completed ? '완료' : '비완료'} 상태입니다.`);
}
printTodo({ id: 1, content: 'HTML', completed: true});	// 할일 HTML은 완료 상태입니다. 

실제로 위와같이 사용했을때 매개변수를 계속 불러와야 해서 불편했는데 

todo에 객체들을 할당시키고 todo 키워드를 버리고 객체들만 불러오면 좀더 간단해진다 

function printTodo({ content, completed }) {
	console.log(`할일 ${content}은 ${completed ? '완료' : '비완료'} 상태입니다.`);
}
printTodo({ id: 1, content: 'HTML', completed: true});	// 할일 HTML은 완료 상태입니다. 

 

마지막으로 중첩된 객체에서의 디스트럭처링이다. 

const user = {
	name: 'Lee', 
    	address: {
    	zipCode: '03068',
      city: 'Seoul'
    }
};
const { address: { city } } = user;
console.log(city);	// 'Seoul'

이 경우에는 address 프로퍼티 키로 먼저 객체를 추출하고, 이 객체의 city 프로퍼티 키로 값을 추출하면 된다.