배열과 객체의 구조 분해 할당

안녕하세요🤗

이번 시간에는 배열과 객체의 구조 분해 할당에 대해 배워보도록하겠습니다.

구조 분해 할당

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

구조 분해 할당을 이용하면, 배열이나 객체 안에 있는 값을 쉽고 간편하게 추출할 수 있습니다.

코드 샌드박스에서 직접 배열과 객체 안의 요소와 프로퍼티 값들을 간편하게 추출해보겠습니다.

배열의 구조 분해 할당

먼저 배열의 구조 분해 할당에 대해 배워봅시다.

기본 변수 할당

먼저 우리가 이전에 사용했던 colors 배열에 green, blue, purple이라는 요소들을 담아주도록하겠습니다.

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

그 다음, 이 colors 배열의 요소인 "green","blue","purple"를 각각 c1, c2, c3 변수에 순서대로 할당해준다음 해당 변수들을 출력해보겠습니다.

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

한 번 작성해보겠습니다.

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

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

코드를 실행하면, 동일하게 c1에는 green 이, c2에는 blue, 그리고 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"

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

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

먼저 배열의 길이보다 적은 변수에 배열 요소를 할당해보겠습니다.

변수 c3을 전부 지워본 다음 코드를 실행해보겠습니다.

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

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

코드를 실행하면, 각 변수들에 배열 요소의 순서대로 green과 blue의 값이 할당된 것을 볼 수 있습니다.

기본값 설정

이번엔 배열의 길이보다 더 많은 수의 변수에 값을 할당해보겠습니다.

c3 변수를 다시 선언해주고, c3 변수 옆에 c4라는 변수를 추가로 선언하고, c4에도 배열 요소의 값을 할당해주도록하겠습니다.

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

길이가 3인 배열을 4개의 변수에 할당을 한 결과, 첫 번째 변수인 c1에는 "green", 변수 c2에는 "blue", 변수 c3에는 "three" 값이 할당되었고, 마지막 변수인 c4에는 "undefined" 이 할당된 것을 볼 수 있습니다.

이렇게 배열의 길이보다 더 많은 수의 변수에 배열 요소의 값을 할당하려 한다면, 배열 요소들이 각각의 변수에 할당 된 이후에 남은 변수들에는 undefined 가 할당되게 됩니다.

만약 남은 변수들에 undefined라는 값이 할당되는 것을 원하지 않는다면, 우리는 해당 변수에 기본값을 지정해 줄 수 있습니다.

변수 c4에 yellow 라는 값을 할당해주겠습니다.

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"

출력 결과, c4에는 undefined가 아닌, yellow 라는 값이 할당 된 것을 확인할 수 있습니다.

이렇게 배열의 길이보다 큰 변수들에 배열 요소들을 할당하려해서, 값을 할당 받지 못하는 변수가 있을 때, c4변수에 yellow라는 값을 할당해준 것처럼, 우리가 원하는 값을 남은 변수들에 할당해주는 것을 "기본값 할당" 이라고 부릅니다.

변수에 기본값을 할당하면, 배열 요소들을 분해한 값들이 undefined일 때 우리가 작성해준 기본값이 할당되게됩니다.

변수 값 교환하기

배열의 구조분해는 이렇게 배열 요소의 값을 추출할 때 자주 사용하지만, 두 개의 변수 값을 서로 바꿀 때 사용되기도합니다.

먼저 구조분해를 사용하지 않고, 두 변수의 값을 서로 바꾸는 코드를 작성해보겠습니다.

변수 a 에는 10을, 변수 b 에는 5를 할당하고, 이 두 변수의 값을 바꿔봅시다.

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

코드를 실행해보면, 실제로 변수 a와 변수 b의 값이 서로 교환된 것을 확인할 수 있고, 이렇게 배열의 구조분해를 사용하면 코드를 훨씬 쉽고 단순하게 사용할 수 있습니다.

객체의 구조 분해 할당

이번에는 객체의 구조 분해 할당에 대해 알아보도록 하겠습니다.

기본 할당

colors 라는 객체에 key값은 c1, c2, c3 이고 value값은 green, blue, purple 인 프로퍼티들을 넣어주도록 하겠습니다.

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

그 다음, c1, c2, c3 라는 변수에 각각의 값을 할당해주겠습니다.

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

이렇게 객체 프로퍼티의 key값의 오른쪽에 클론을 작성하고, 다른 이름의 변수를 작성해줍니다.

이 코드의 의미는, colors 객체의 c1, c2, c3 각각 color1, color2, color3 로 변경하겠다 라는 의미이고, 코드 실행 결과 각각의 변수에 값이 알맞게 할당 된 것을 확인할 수 있습니다.

기본값 설정

객체의 구조 분해 할당 또한 배열의 구조 분해 할당과 같이, 변수의 수가 객체 프로퍼티의 수보다 클 경우, undefined가 할당되는 변수에 기본값을 설정할 수 있습니다.

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

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

이렇게 colors 객체의 값이 c4라는 변수에 할당되지 않아, undefined라는 값이 할당되었을 때, 변수 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

c4 yellow 이라는 기본값을 지정해주면 undefined 이 아닌 yellow가 출력되는 것을 확인할 수 있습니다.

이렇게 배열과 객체의 값들을 분해해서 각각의 변수에 담을 수 있어 배열과 객체의 값들을 쉽게 추출할 수 있는 배열과 객체의 구조 분해 할당에 대해 배워보았습니다.

다음시간에는 자바스크립트의 spread와 rest 문법에 대해 배워보도록하겠습니다.

감사합니다.