[JS] 구조 분해 할당

알고리즘 문제를 푸는데 구조 분해 할당을 잘 사용하면 코드를 많이 줄일 수 있었다. 구조 분해 할당에 대해 잘 정리해두고 문제에 활용하려 한다.

 

---

 

구조 분해 할당(destructuring assignment)

구조화된 배열과 같은 이터러블 또는 객체의 구조를 파괴하려 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 객체에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

 

1. 배열 구조 분해 할당

배열 구조 분해 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스이다. 즉 순서가 중요하다.

이때 변수의 개수와 이러터블의 요소 개수가 반드시 일치할 필요는 없다.

const [x,y] =[1,2];
console.log(x,y)	//1 2

const [x,y] =[1];
console.log(x,y)	//1 undefined

const [x,y] =[1,2,3];
console.log(x,y)	//1 2

const [x, ,y] =[1,2,3];
console.log(x,y)	//1 3

//Rest 요소를 사용할 수 있으며, 반드시 마지막에 위치해야 한다.

const [x,...y] =[1,2,3];
console.log(x,y)	//1 [2, 3]

2. 객체 구조 분해 할당

객체의 각 프로퍼티를 객체로부터 구조 분해하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 한다. 변수 선언을 통해 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받을 수도 있다.

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

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

//중첩객체의 경우
const user = {
  name: 'poylib',
  address: {
    zipCode: '51153',
    city: 'Changwon'
  }
};
const { address:{city}} = user;
console.log(city)	//Changwon

객체의 구조 분해 할당은 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용하다.

const myName = 'poylib'
const { length } = myName;
console.log(length)	//6

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

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

배열과 마찬가지로 Rest 프로퍼티를 사용 가능하다.

const { x,...rest } = {x: 1,y: 2,z: 3};
console.log(x, rest);	//1 { y:2, z:3 }

 

 

출처 : deep dive