배열과 객체 구조 분해 할당(destructuring assignment)

Javascript

배열과 객체 구조 분해 할당(destructuring assignment)

John' 2023. 11. 21. 18:00

인간은 망각의 동물이다. 특정한 행동이나 생각을 자주 하지 않으면 우리 뇌 속에서는 신경의 가지치기 현상이 일어난다고 한다. 우리가 어떤 생각, 기분, 행동을 수행하지 않으면 뇌는 그와 연관된 뉴런들을 발화시키지 않는데, 그 결과 그러한 생각, 기분, 행동이 점점 약해지다가 결국 시들어버리고 잊게 되는 것을 신경 가지치기라고 한다. 그렇기 때문에 우리는 초등학교 시절처럼 리코더를 연주할 수 없는거고, 곡면의 부피를 구하는 적분 공식이나 근의 공식등에 대해 더는 기억하지 못하는 것이다. 쉽건 어렵건 지금 나는 무조건 많이 생각하고 자꾸 써보고 사용해보는 것 밖에 방도가 없다 생각한다.

배열과 객체 구조 분해 할당

구조 분해 할당은 JavaScript의 표현식으로, 배열과 객체의 요소 및 프로퍼티를 분해하여 그 값을 개별 변수에 할당하는 기능이다. 이를 통해 배열과 객체 내부의 값을 간편하게 추출할 수 있다.

배열의 구조 분해 할당

기본 변수 할당

아래 코드는 각 변수에 해당 값을 할당하고 출력하는 간단한 일반적인 방법이다.

let colors = ["red", "green", "blue"];

let color1 = colors[0];
let color2 = colors[1];
let color3 = colors[2];


console.log(color1); // "red"
console.log(color2); // "green"
console.log(color3); // "blue"

구조 분해 할당 사용

이제, 구조 분해 할당을 사용하여 코드를 더 간결하게 작성을 해보면, 배열의 구조 분해 할당은 대괄호를 사용하며, 할당할 변수를 대괄호 안에 작성할 수 있는데, 아래 코드에서는 colors 배열의 요소를 [color1, color2, color3]로 분해하여 각 변수에 할당하고 있다. 결과는 이전과 동일하다.

let colors = ["red", "green", "blue"];
let [color1, color2, color3] = colors;

console.log(color1); // "red"
console.log(color2); // "green"
console.log(color3); // "blue"

선언 분리 할당

또 다른 방법으로, 변수의 선언과 할당을 분리하여 작성할 수 있는데, 이를 "선언 분리 할당"이라고 하며, 이러한 방식으로 코드를 작성하면 변수를 한 번에 선언하고 값도 할당할 수 있다.

let color1, color2, color3;

[color1, color2, color3] = ["red", "green", "blue"];

console.log(color1); // "red"
console.log(color2); // "green"
console.log(color3); // "blue"

기본값 설정

배열의 구조 분해 할당에서 변수의 수가 배열의 요소 수보다 많을 때, 남은 변수에는 undefined가 할당된다. 이때, 기본값을 설정할 수 있다. 아래 코드에서 color3에는 기본값으로 "blue"가 할당되어 있다. 따라서 배열의 길이보다 변수가 많을 때, 남은 변수에는 기본값이 할당된다.

let colors = ["red", "green"];
let [color1, color2, color3 = "blue"] = colors;

console.log(color1); // "red"
console.log(color2); // "green"
console.log(color3); // "blue"

변수 값 교환하기

배열의 구조 분해 할당은 변수 값 교환에도 유용하게 사용된다. 아래 코드에서는 배열의 구조 분해 할당을 사용하여 a와 b의 값을 교환했다.

let a = 10;
let b = 5;

[a, b] = [b, a];

console.log(a); // 5
console.log(b); // 10

객체의 구조 분해 할당

기본 할당

먼저, 다음과 같이 colors 객체에 색상들을 프로퍼티로 할당한다.

let colors = {
    color1: "red",
    color2: "green",
    color3: "blue"
};

그리고, colors 객체의 각 프로퍼티 값을 color1, color2, color3 변수에 할당하고 값을 출력하자.

let colors = {
    color1: "red",
    color2: "green",
    color3: "blue"
};

let color1 = colors.color1;
let color2 = colors.color2;
let color3 = colors.color3;

console.log(color1); // "red"
console.log(color2); // "green"
console.log(color3); // "blue"

구조 분해 할당 사용

이제, 구조 분해 할당을 사용하여 코드를 더 간결하게 작성해보면, 객체의 구조 분해 할당은 중괄호를 사용하고, 할당할 변수를 중괄호 안에 작성한다. 아래 코드에서는 colors 객체의 프로퍼티를 { color1, color2, color3 }로 분해하여 각 변수에 할당하고 있다.

let colors = {
    color1: "red",
    color2: "green",
    color3: "blue"
};

let { color1, color2, color3 } = colors;

console.log(color1); // "red"
console.log(color2); // "green"
console.log(color3); // "blue"

새로운 변수 이름으로 할당하기

객체의 프로퍼티 이름과 변수 이름이 다를 때, 변수에 다른 이름으로 할당할 수 있는데, 아래 코드에서는 color1, color2, color3을 각각 newColor1, newColor2, newColor3로 변수에 할당하고 있다.

let colors = {
    color1: "red",
    color2: "green",
    color3: "blue"
};

let { color1: newColor1, color2: newColor2, color3: newColor3 } = colors;

console.log(newColor1); // "red"
console.log(newColor2); // "green"
console.log(newColor3); // "blue"

기본값 설정

객체의 구조 분해 할당에서 변수의 수가 프로퍼티의 수보다 많을 때, 남은 변수에는 undefined가 할당된다. 이때, 기본값을 설정할 수 있다. 아래 코드에서는 color3에 기본값으로 "blue"가 할당되어 있다. 따라서 객체의 프로퍼티가 부족하게 할당될 때, 기본값이 할당된다.

let colors = {
    color1: "red",
    color2: "green"
};

let { color1, color2, color3 = "blue" } = colors;

console.log(color1); // "red"
console.log(color2); // "green"
console.log(color3); // "blue"

결론

배열과 객체의 구조 분해 할당은 JavaScript에서 데이터를 효율적으로 추출하고 다룰 때 매우 유용한 기능이다.