알고리즘 문제를 푸는데 구조 분해 할당을 잘 사용하면 코드를 많이 줄일 수 있었다. 구조 분해 할당에 대해 잘 정리해두고 문제에 활용하려 한다.
구조 분해 할당(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
'Programing > Javascript' 카테고리의 다른 글
[JS] Set & Map (0) | 2022.06.03 |
---|---|
[JS] 정규 표현식 RegExp (0) | 2022.06.01 |
<JS> 자바스트립트로 HTML수정 (0) | 2022.04.20 |
<JS> for문 탐색 (0) | 2022.04.08 |
<JS> 최솟값, 최댓값 (0) | 2022.03.30 |