[JavaScript] 비구조화 할당 (Destructuring Assignment) 배열 또는 객체의 값 추출

1. 비구조화 할당 (Destructuring Assignment)란?

비구조화 할당은 배열(Array) 또는 객체(Object)의 값을 쉽게 추출하고, 이를 변수에 담아 사용하는 방법입니다. 코드의 가독성을 높이고, 특히 여러 개의 변수를 한 번에 선언하고 값을 할당할 때 매우 유용합니다.

배열 비구조화

배열에서 비구조화 할당을 사용하면, 배열의 각 요소를 변수에 쉽게 할당할 수 있습니다.

// 배열 비구조화 할당
const fruits = ["apple", "banana", "orange"];

// 비구조화 할당으로 배열 요소를 변수에 담기
const [firstFruit, secondFruit, thirdFruit] = fruits;

console.log(firstFruit);  // apple
console.log(secondFruit); // banana
console.log(thirdFruit);  // orange

 

위 예제에서 fruits 배열의 요소들이 각각 firstFruit, secondFruit, thirdFruit 변수에 할당되었습니다. 배열의 인덱스에 맞게 변수를 선언하여 데이터를 간편하게 받을 수 있습니다.

객체 비구조화

객체 비구조화는 객체의 속성값을 추출하여 변수로 사용할 수 있습니다.

// 객체 비구조화 할당
const user = {
  name: "John",
  age: 30,
  job: "developer"
};

// 객체의 속성을 변수에 할당
const { name, age, job } = user;

console.log(name);  // John
console.log(age);   // 30
console.log(job);   // developer

 

위 코드에서는 user 객체의 name, age, job 속성값들이 각각 동일한 이름의 변수로 추출되었습니다.

기본값 설정

비구조화 할당 시, 변수가 할당되지 않을 경우를 대비해 기본값을 설정할 수도 있습니다.

const { name, country = "Unknown" } = { name: "John" };

console.log(name);    // John
console.log(country); // Unknown (값이 없을 경우 기본값 사용)

 

country 속성은 객체에 없기 때문에, 기본값으로 "Unknown"이 할당됩니다.

중첩된 구조 비구조화

중첩된 객체나 배열에서도 비구조화 할당을 사용할 수 있습니다.

const person = {
  name: "Jane",
  address: {
    city: "New York",
    zipCode: 10001
  }
};

// 중첩된 구조에서 비구조화
const { name, address: { city, zipCode } } = person;

console.log(name);    // Jane
console.log(city);    // New York
console.log(zipCode); // 10001

 

address 객체 내의 city와 zipCode 속성값을 한 번에 추출할 수 있습니다.

2. 배열과 객체 비구조화 할당의 장점

• 코드 가독성 향상: 변수를 직접 선언하고 값을 일일이 할당하는 것보다 훨씬 간결합니다.
• 간편한 데이터 추출: 배열이나 객체에서 필요한 값만 빠르게 추출할 수 있습니다.
• 구조에 맞춘 추출: 중첩된 구조에서도 효율적으로 데이터를 다룰 수 있습니다.

 

비구조화 할당은 JavaScript에서 매우 유용한 기능 중 하나로, 특히 배열이나 객체에서 많은 데이터를 다룰 때 그 유용성을 극대화할 수 있습니다.