자바스크립트 - 배열과 객체 구조분해할당

구조 분해 할당

• 구조분해할당이란 배열이나 객체의 요소 및 프로퍼티들을 분해해서 그 값들을 각각의 변수에 할당하는 자바스크립트의 표현식입니다. 

 

배열의 구조 분해 할당

 

기본 변수 할당

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

위 배열의 요소들을 각각의 변수에 할당해 출력해보겠습니다.

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

let c1 = colors[0]; // "green"
let c2 = colors[1]; // "blue"
let c3 = colors[2]; // "purple"

console.log(c1); // "green"
console.log(c2); // "blue"
console.log(c3); // "purple"

 

위의 작성한 코드를, 구조분해를 사용해보겠습니다.

 

배열의 구조분해 할당은 배열의 요소들을 분해한 다음, 그 값들을 순서대로 각각의 새로운 변수에 할당할 수 있는 방법으로, 대괄호안에 변수들을 선언하고 할당할 배열의 이름인 colors를 작성해 배열의 요소들을 할당해줍니다.

 

let colors = ["green", "blue", "purple"];
let [c1, c2, c3] = colors;

console.log(c1); // "green"
console.log(c2); // "blue"
console.log(c3); // "purple"

 

 

선언 분리 할당

위의 코드를 더 간단하게 작성해보겠습니다.

• c1,c2,c3 변수를 한번에 선언하고, colors라는 배열을 별도로 선언하지 않고, 이 변수들에 배열의 값을 바로 할당해주도록하겠습니다.

let c1, c2, c3;
[c1, c2, c3] = ["green", "blue", "purple"];

console.log(c1); // "green"
console.log(c2); // "blue"
console.log(c3); // "purple"

이렇게 변수의 선언을 분리해서 배열의 값을 할당하는 방법을 "선언 분리 할당"이라고 부릅니다.

 

이번에는 배열의 길이와 같은 수의 변수에 값을 할당하지 않고, 배열의 길이보다 더 많은 변수, 배열의 길이보다 더 적은 변수들에 배열의 값을 할당해보겠습니다.

 

배열의 길이보다 적은 변수에 배열 요소를 할당하는 경우

let c1, c2;
[c1, c2] = ["green", "blue", "purple"];

console.log(c1); // "green"
console.log(c2); // "blue"

 

기본값 설정

• 배열의 길이보다 더 많은 변수에 값을 할당하는 경우

let c1, c2, c3, c4;
[c1, c2, c3, c4] = ["green", "blue", "purple"];

console.log(c1); // "green"
console.log(c2); // "blue"
console.log(c3); // "purple"
console.log(c4); // undefined

이렇게 배열의 길이보다 더 많은 수의 변수에 배열 요소의 값을 할당하려 한다면,

배열 요소들이 각각의 변수에 할당 된 이후에 남은 변수들에는 undefined가 할당되게 됩니다.

 

다음과 같은 것도 가능합니다. 

let c1, c2, c3, c4;
[c1, c2, c3, c4 = "yellow"] = ["green", "blue", "purple"];

console.log(c1); // "green"
console.log(c2); // "blue"
console.log(c3); // "purple"
console.log(c4); // "yellow"

 

 

 

변수 값 교환하기

배열의 구조분해는 이렇게 배열 요소의 값을 추출할 때 자주 사용하지만,

두 개의 변수 값을 서로 바꿀 때 사용되기도 합니다.

 

먼저 구조분해를 사용하지 않고 코드를 작성해보겠습니다.

let a = 10;
let b = 5;
let tmp;

console.log(a, b);

tmp = a;
a = b;
b = tmp;

console.log(a, b);

 

tmp와 같은 임시변수가 필요하지만,

구조분해를 이용하면 임시변수 없이 가능합니다.

 

let c1, c2, c3, c4;
[c1, c2, c3, c4 = "yellow"] = ["green", "blue", "purple"];

우리가 작성했던 코드처럼, 왼쪽에는 값을 할당 할 변수를, 오른쪽에는 교환할 값의 변수를 작성해주겠습니다.

 

let a = 10;
let b = 5;

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

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

배열의 구조분해를 사용하면 훨씬 쉽고 단순하게 사용할 수 있습니다.

 

 

 

객체의 구조 분해 할당

기본할당

let colors = {
    c1: "green",
    c2: "blue",
    c3: "purple",
};

let c1 = colors.c1;
let c2 = colors.c2;
let c3 = colors.c3;

console.log(c1);// green
console.log(c2);// blue
console.log(c3);// purple

위의 코드를 실행시켜보면 각 변수에 원하는 값이 잘 할당된 것을 볼 수 있습니다.

 

구조분해할당을 사용해 보겠습니다.

객체의 구조분해할당은 대괄호가 아닌, 중괄호를 사용합니다.

배열 구조 분해 할당과 동일하게 중괄호안에 변수들을 작성하고, 오른쪽에는 분해 할 객체의 이름을 작성해주겠습니다.

 

let colors = {
    c1: "green",
    c2: "blue",
    c3: "purple",
};

let { c1, c2, c3 } = colors;

console.log(c1);// green
console.log(c2);// blue
console.log(c3);// purple

객체의 구조 분해 할당은 인덱스를 이용해 인덱스의 순서대로 변수에 값을 할당하는 배열의 구조분해와는 다르게,

key값을 기준으로 객체를 분해해, 변수에 할당한다는 차이점이 있습니다.

 

 

 

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

• 이번에는 c1,c2,c3이라는 key값을 변수의 이름으로 사용하지 않고, 다른 이름을 갖는 변수에 값을 할당하는 방법을 배워보도록하겠습니다. 

먼저 구조분해를 사용하지 않고, 객체 프로퍼티의 값을 새로운 color1, color2, color3라는 변수에 할당해보겠습니다.

let colors = {
    c1: "green",
    c2: "blue",
    c3: "purple",
};

let color1 = colors.c1;
let color2 = colors.c2;
let color3 = colors.c3;

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

 

이제 객체의 구조 분해 할당을 사용해 코드를 변경해보겠습니다.

객체 프로퍼티의 값을 할당할 변수가 객체 프로퍼티의 key값과 다를 경우에는 :(클론)을 이용해, 다른 이름의 변수에 값을 할당할 수 있습니다.

 

let colors = {
    c1: "green",
    c2: "blue",
    c3: "purple",
};

let { c1: color1, c2: color2, c3: color3 } = colors;

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

 

객체의 구조 분해 할당 또한 배열의 구조 분해할당과 같이,

변수의 수가 객체 프로퍼티의 수보다 클 경우, undefined가 할당되는 변수에 기본값을 설정할 수 있습니다.

let colors = {
    c1: "green",
    c2: "blue",
    c3: "purple",
};

let { c1: color1, c2: color2, c3: color3 } = colors;

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

변수 c4에 기본값을 할당하고 싶다면

let colors = {
    c1: "green",
    c2: "blue",
    c3: "purple",
};
let { c1, c2, c3, c4 = "yellow" } = colors;

console.log(c1);// green
console.log(c2);// blue
console.log(c3);// purple
console.log(c4); //yellow