JavaScript

구조분해할당

구조 분해 할당(Destructuring Assignment)은 JavaScript에서 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다. ES6에서 도입된 이 기능은 코드의 가독성을 높이고, 코드를 더욱 간결하게 만드는 데 도움을 준다.

객체 구조분해할당

객체 구조분해 할당을 사용하면 객체의 속성을 쉽게 개별 변수로 추출할 수 있다. 이는 함수 매개변수에서도 사용될 수 있어 코드의 간결함을 더한다.

기본 사용법

function buildObj(obj) {
    let dataA = obj.dataA;
    let dataB = obj.dataB;
    let dataC = obj.dataC;
}

// 구조분해할당을 사용한 동일한 코드

function buildObj(obj) {
    let { dataA, dataB, dataC } = obj;
}

깊은 객체 구조분해할당

객체 내부의 중첩된 객체에서도 구조분해할당을 사용할 수 있다. 이를 통해 중첩된 속성값에 더 쉽게 접근할 수 있다.
let cat = {
    name: 'mori',
    age: 4,
    feature: {
        face: 'cute',
        body: 'furry',
        eyes: 'brown'
    }
};

let { feature: { face, body, eyes } } = cat;

console.log(face, body, eyes);
// 출력: cute, furry, brown

배열 구조분해할당

배열 구조분해 할당을 사용하면 배열의 각 요소를 개별 변수에 쉽게 할당할 수 있다. 또한, 특정 요소를 건너뛰고 필요한 요소만 추출하는 것도 가능하다.

기본 사용법

const fruits = ['apple', 'pear', 'grape'];
const juice1 = fruits[0];
const juice2 = fruits[1];
const juice3 = fruits[2];

// 구조분해할당을 사용한 동일한 코드
const [juice1, juice2, juice3] = fruits;

응용: 특정 요소 건너뛰기

const fruits = ['apple', 'pear', 'grape'];

// 첫 번째 요소를 건너뛰고 두 번째 요소만 추출
const [, juice2] = fruits;
console.log(juice2); // 출력: pear