[Javascript] 6. 구조분해할당

[인프런x코드캠프] 훈훈한 Javascript - 인프런 | 강의

인프런 강의 "훈훈한 Javascript"를 보고 정리한 내용이며, 추가로 공부한 내용도 덧붙였습니다.

---

1. 구조 분해 할당 (Destructuring Assignment)

자바스크립트의 구조 분해 할당 기능은 배열이나 객체의 속성을 분해하여 그 값들을 변수에 할당하는 데 사용됩니다. 구조 분해 할당은 코드를 더욱 간결하고 이해하기 쉽게 만드는 데 효과적인 방법입니다.

배열에서 구조 분해 할당

기본적인 사용 방법은 다음과 같습니다:

let arr = [1, 2, 3];
let [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

배열에서 특정 요소를 무시하려면 다음과 같이 합니다:

let arr = [1, 2, 3];
let [a, , c] = arr;

console.log(a); // 1
console.log(c); // 3

객체에서 구조 분해 할당

객체에서 구조 분해 할당을 사용할 때는 변수 이름이 객체의 속성 이름과 일치해야 합니다:

let obj = {name: "John", age: 30, country: "USA"};
let {name, age, country} = obj;

console.log(name); // "John"
console.log(age); // 30
console.log(country); // "USA"

다른 이름의 변수에 값을 할당하려면 다음과 같이 합니다:

let obj = {name: "John", age: 30, country: "USA"};
let {name: firstName, age: userAge, country: place} = obj;

console.log(firstName); // "John"
console.log(userAge); // 30
console.log(place); // "USA"

 

객체의 특정 키의 값이 배열일 때의 경우 구조 분해 할당시 배열을 가집니다:

let obj = {name: "John", age: [30, 31], country: "USA"};
let {name: firstName, age: userAge, country: place} = obj;

console.log(firstName); // "John"
console.log(userAge); // [30, 31]
console.log(place); // "USA"

만약 배열 내부의 값을 분해해서 할당하고 싶다면, 이중 구조 분해 할당을 사용할 수 있습니다:

let obj = {name: "John", age: [30, 31], country: "USA"};
let {name: firstName, age: [firstYear, secondYear], country: place} = obj;

console.log(firstName); // "John"
console.log(firstYear); // 30
console.log(secondYear); // 31
console.log(place); // "USA"

기본값 설정

값이 없는 경우 기본값을 설정할 수도 있습니다:

let arr = [1, undefined, 3];
let [a, b = 2, c] = arr;

console.log(a); // 1
console.log(b); // 2 (기본값 사용)
console.log(c); // 3