객체 디스트럭처링 할당 (구조분해할당)

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

: 이때 할당 기준은 프로퍼티 키, 즉 순서는 의미가 없고 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

const user = { firstName: 'egg', lastName: 'Lee' };
const { lastName, firstName } = user;
//프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어지기 때문에 순서는 의미가 없다.

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

 

할당 연산자 왼쪽에 프로퍼티 값을 할당받을 변수를 선언해야 한다.
이때 변수는 객체 리터럴(우리가 일반적으로 알고 있는 객체 형태) 형태로 선언한다.

const { lastName, firstName } = { firstName : 'egg', lastName: 'Lee' };
// 프로퍼티 값을 할당 받을 변수를 객체리터럴 형태로 선언 = 객체

우변에 객체 또는 객체로 평가될 수 있는 표현식(문자열, 숫자, 배열 등)을 할당하지 않으면 에러가 발생한다.

const { lastName, firstName };
const { lastName, firstName } = null;
//이와 같이 우변에 객체 혹은 객체로 평가될 수 있는 표현식(문자열, 숫자, 배열 등)을 할당하지 않으면 에러

 

프로퍼티 축약 표현 : 객체를 생성할 때 변수 이름과 프로퍼티 이름이 같은 경우, 코드를 간결하게 작성할 수 있도록 해 준다.

const { lastName, firstName } = user;
const { lastName: lastName, firstName: firstName } = user;
// 위의 두 예시는 동치이다.

 

객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받는 방법

const user = { firstName: 'egg', lastName: 'silver' };
const { lastName: ln, firstName: fn } = user;
//프로퍼티 키를 기준으로 할당이 이루어짐
// lastName을 ln에 firstName을 fn에 할당

console.log(fn, ln); //egg silver

 

객체 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.

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

 

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

const str = 'Hi';
const { length } = str; 
// str는 문자열, 문자열에는 내장 속성 중 length라는 속성이 있어서 길이를 나타냄

console.log(length); // 2

//---------------------

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

 

객체를 인수로 전달받는 함수의 매개변수에도 사용 가능

function printTodo(todo) {
	console.log( `할일 ${todo.content} ${todo.completed ? '완료' : '비완료'} 상태입니다.` )
}

printTodo( {id: 1, content: 'JS', completed: true }); // 할일 JS 완료 상태입니다.

//-------------

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

printTodo( {id: 1, content: 'JS', completed: true }); // 할일 JS 완료 상태입니다.

 

배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당 혼용 가능

const todos = [
	{ id: 1, content: 'JS', completed: false},
    { id: 2, content: 'CSS', completed: true},
    { id: 3, content: 'HTML', completed: false},
]

const [, {id}] = todos; //, (콤마)를 사용해서 배열의 첫 번째 요소는 건너뜀. 그래서 두 번째 요소에 집중
console.log(id) // 2

 

중첩 객체의 경우

const user = {
	name: 'Lee',
    address: {
    	zipCode: '12345'
        city: 'Seoul'
    }
};

const { address: { city }} = user;
// address 프로퍼티 키로 객체 추출
// 추출한 객체의 city 프로퍼티 키로 값을 추출한다.

console.log(city); // Seoul

 

Rest 프로퍼티 사용

const { x, ...rest } = { x: 1, y:2, z:3 };
console.log(x, rest); // 1 { y:2, z:3 }
// Rest 프로퍼티는 반드시 마지막에 위치하여야 함