안녕하세요🤗
이번 시 간에는 지난 "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 이 출력되는 것을 확인할 수 있습니다.
next
이번 시간에는 배열과 객체의 구조분해에 대해 배워보았습니다.
구조분해는 실제로 많이 사용하고, 아주 유용하게 쓰이는 문법이기 때문에 잘 알아두시면 좋을 것 같습니다.
다음 시간에는 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