안녕하세요🤗
이번 시 간에는 지난 "JS 객체 다루기" 시간에 살짝 언급되었던 구조분해에 대해 자세히 알아보도록 하겠습니다.
구조분해란 배열이나 객체 안에 있는 값을 쉽고 간편하게 추출하는 방법입니다.
배열의 구조분해 먼저 다뤄보도록 하겠습니다.
let arr = ["one", "two", "three"];
위의 arr 배열 값인 "one","two","three"를 각각 num1, num2, num3 변수에 순서대로 할당해보겠습니다.
let arr = ["one", "two", "three"];
let num1 = arr[0]; // "one"
let num2 = arr[1]; // "two"
let num3 = arr[2]; // "three"
위의 코드를 실행시켜보면 각 변수에 원하는 값이 잘 할당된 것을 볼 수 있습니다.
이번에는 구조분해를 사용해 코드를 간단하게 바꿔보도록 하겠습니다.
let arr = ["one", "two", "three"];
let [num1, num2, num3] = arr;
console.log(num1); // "one"
console.log(num2); // "two"
console.log(num3); // "three"
배열의 구조분해는, 위의 코드처럼 arr배열의 값을 순서대로 각각의 새로운 변수에 할당할 수 있는 방법입니다.
이번에는 위의 코드를 더 간략하게 변경해보겠습니다.
let num1, num2, num3;
[num1, num2, num3] = ["one", "two", "three"];
console.log(num1); // "one"
console.log(num2); // "two"
console.log(num3); // "three"
위의 코드에서는 arr배열을 별도로 선언하지 않고 바로 구조 분해를 통해 값을 할당했습니다.
이러한 방법을 선언 분리 할당 이라고 합니다.
지금까지는 배열의 길이와 같은 수의 변수에 값을 할당했습니다.
만약 배열의 길이보다 더 많은 수의 변수에 값을 할당하게 된다면 출력값이 어떻게 되는지 알아보도록 하겠습니다.
let num1, num2, num3, num4;
[num1, num2, num3, num4] = ["one", "two", "three"];
console.log(num1); // "one"
console.log(num2); // "two",
console.log(num3); // "three"
console.log(num4); // undefined
길이가 3인 배열을 4개의 변수에 할당을 한 결과, 첫 번째 변수인 num1에는 "one", 변수 num2에는 "two", 변수 num3에는 "three" 값이 할당되었고, 마지막 변수인 num4에는 "undefined" 가 할당된 것을 볼 수 있습니다.
let num1, num2, num3, num4;
[num1, num2, num3, num4 = "four"] = ["one", "two", "three"];
console.log(num1); // "one"
console.log(num2); // "two",
console.log(num3); // "three"
console.log(num4); // "four"
만약 마지막 변수에 undefined가 할당되는 것을 원하지 않는다면, 위의 코드와 같이 해당 변수에 기본값을 지정해 줄 수 있습니다.
배열의 구조분해는 두 개의 변수 값을 서로 바꿀 때 사용할 수 있습니다.
구조분해를 이용해 두 변수 값을 교환하면, 임시 변수 없이 두 변수의 값을 교환할 수 있습니다.
let num1 = 1;
let num2 = 10;
[num1, num2] = [num2, num1];
console.log(num1); // 10
console.log(num2); // 1
위의 코드를 실행하면 변수 num1, num2 의 값이 서로 바뀐 것을 확인할 수 있습니다.
이번에는 객체의 구조분해에 대해 알아보도록 하겠습니다.
let number = {
num1: 10,
num2: 20,
num3: 30,
};
3개의 프로퍼티를 가진 number 객체를 예시로 들어보겠습니다.
위의 number 객체 프로퍼티를 각각 num1, num2, num3 변수에 순서대로 할당해보겠습니다.
let number = {
num1: 10,
num2: 20,
num3: 30,
};
let num1 = number.num1; //10
let num2 = number.num2; //20
let num3 = number.num3; //30
위의 코드를 실행시켜보면 각 변수에 원하는 값이 잘 할당된 것을 볼 수 있습니다.
이번에는 구조분해를 사용해 코드를 더욱 간단하게 바꿔보도록 하겠습니다.
let number = {
num1: 10,
num2: 20,
num3: 30,
};
let { num1, num2, num3 } = number;
console.log(num1); //10
console.log(num2); //20
console.log(num3); //30
객체의 구조분해는 인덱스를 이용하는 배열의 구조분해와는 달리, key값을 기준으로 할당한다는 차이점이 있습니다.
이번에는 객체 구조분해 과정에서, 객체의 원래 속성명과는 다른 이름의 변수에 할당하는 방법을 배워보도록 하겠습니다.
let number = {
num1: 10,
num2: 20,
num3: 30,
};
let ten = number.num1;
let twenty = number.num2;
let thirty = number.num3;
console.log(ten); //10
console.log(twenty); //20
console.log(thirty); //30
위의 코드에서는 number.num1, number.num2, number.num3 값을 각각 ten, twenty, thirty 라는 변수에 담고있습니다.
이름이 동일 하다면 값을 바로 할당할 수 있지만, 변수 명이 서로 다르기 때문에 구조분해를 사용하지 못했습니다.
이런 경우에는 아래와 같이 : 를 이용해, 원래 객체의 속성명과는 다른 이름의 변수에 값을 할당할 수 있습니다.
let number = {
num1: 10,
num2: 20,
num3: 30,
};
let { num1: ten, num2: twenty, num3: thirty } = number;
console.log(ten); //10
console.log(twenty); //20
console.log(thirty); //30
이렇게 : 를 이용해 작성한 코드는, number 객체의 num1, num2, num3을 각각 ten, twenty, thirty 로 변경하겠다 라는 의미이고,
코드 실행 결과 각각의 변수에 값이 잘 할당 된 것을 확인할 수 있습니다.
객체의 구조분해 또한 배열의 구조분해와 같이 기본값을 설정할 수 있습니다.
let number = {
num1: 10,
num2: 20,
num3: 30,
};
let { num1, num2, num3, num4 } = number;
console.log(num1); //10
console.log(num2); //20
console.log(num3); //30
console.log(num4); //undefined
위의 코드와 같이 number 객체에 num4의값이 주어지지 않았을 때 num1, num2, num3, num4의 값을 출력하면, num1, num2, num3 는 각각 10,20,30의 값이 출력되지만 num4의 값은 undefined 가 나오게 됩니다.
let number = {
num1: 10,
num2: 20,
num3: 30,
};
let { num1, num2, num3, num4 = 40 } = number;
console.log(num1); //10
console.log(num2); //20
console.log(num3); //30
console.log(num4); //40
이 때 num4의 값에 기본 값을 주고 싶다면, 위의 코드와 같이 num4에 40 이라는 기본값을 지정해주면 undefined 이 아닌 40 이 출력되는 것을 확인할 수 있습니다.
이번 시간에는 배열과 객체의 구조분해에 대해 배워보았습니다.
구조분해는 실제로 많이 사용하고, 아주 유용하게 쓰이는 문법이기 때문에 잘 알아두시면 좋을 것 같습니다.
다음 시간에는 spread 와 rest 문법에 대해 배워보도록 하겠습니다.
감사합니다!
🙏참고 & 출처
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%EC%8B%9C%EB%8F%84%ED%95%B4%EB%B3%B4%EA%B8%B0