JavaScript Destructuring Assignment

JavaScript에서 디스트럭처링 할당(Destructuring Assignment)은 배열이나 객체의 속성을 분해하여 변수에 할당하는 간편한 방법을 제공합니다. 이 문법은 코드를 더 읽기 쉽고, 더 간결하게 작성할 수 있게 해줍니다. 디스트럭처링 할당은 배열과 객체 모두에서 사용할 수 있습니다.

1. 배열 디스트럭처링

배열 디스트럭처링을 사용하면 배열의 요소를 손쉽게 변수에 할당할 수 있습니다.

1.1 기본 배열 디스트럭처링

const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1 2 3

1.2 디폴트 값

배열의 요소가 undefined일 경우 디폴트 값을 지정할 수 있습니다.

const numbers = [1, 2];
const [a, b, c = 3] = numbers;
console.log(a, b, c); // 1 2 3

1.3 일부 요소 건너뛰기

배열의 일부 요소를 건너뛰고 할당할 수 있습니다.

const numbers = [1, 2, 3, 4];
const [a, , b] = numbers;
console.log(a, b); // 1 3

1.4 나머지 요소

나머지 요소를 배열로 받을 수 있습니다.

const numbers = [1, 2, 3, 4];
const [a, ...rest] = numbers;
console.log(a); // 1
console.log(rest); // [2, 3, 4]

2. 객체 디스트럭처링

객체 디스트럭처링을 사용하면 객체의 속성을 변수에 손쉽게 할당할 수 있습니다.

2.1 기본 객체 디스트럭처링

const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name, age); // Alice 25

2.2 디폴트 값

객체의 속성이 undefined일 경우 디폴트 값을 지정할 수 있습니다.

const person = { name: 'Alice' };
const { name, age = 30 } = person;
console.log(name, age); // Alice 30

2.3 속성 이름 변경

디스트럭처링 할 때 속성의 이름을 변경할 수 있습니다.

const person = { name: 'Alice', age: 25 };
const { name: firstName, age: yearsOld } = person;
console.log(firstName, yearsOld); // Alice 25

2.4 나머지 속성

나머지 속성을 객체로 받을 수 있습니다.

const person = { name: 'Alice', age: 25, city: 'New York' };
const { name, ...rest } = person;
console.log(name); // Alice
console.log(rest); // { age: 25, city: 'New York' }

3. 중첩 구조 디스트럭처링

배열이나 객체가 중첩된 경우에도 디스트럭처링 할당을 사용할 수 있습니다.

3.1 중첩된 배열

const numbers = [1, [2, 3], 4];
const [a, [b, c], d] = numbers;
console.log(a, b, c, d); // 1 2 3 4

3.2 중첩된 객체

const person = {
  name: 'Alice',
  address: {
    city: 'New York',
    zip: 10001
  }
};
const { name, address: { city, zip } } = person;
console.log(name, city, zip); // Alice New York 10001

4. 함수 매개변수에서의 디스트럭처링

함수의 매개변수로 전달되는 객체나 배열을 디스트럭처링 할당할 수 있습니다.

4.1 객체 디스트럭처링

function printPerson({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const person = { name: 'Alice', age: 25 };
printPerson(person); // Name: Alice, Age: 25

4.2 배열 디스트럭처링

function sum([a, b]) {
  return a + b;
}

const numbers = [1, 2];
console.log(sum(numbers)); // 3

5. 활용 사례

5.1 스왑 변수

디스트럭처링을 사용하여 두 변수의 값을 쉽게 스왑할 수 있습니다.

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

5.2 API 응답 처리

API로부터 받은 JSON 데이터를 디스트럭처링하여 쉽게 처리할 수 있습니다.

const response = {
  status: 200,
  data: {
    user: {
      id: 1,
      name: 'Alice'
    }
  }
};

const {
  status,
  data: {
    user: { id, name }
  }
} = response;
console.log(status, id, name); // 200 1 Alice

5.3 함수 반환 값

디스트럭처링을 사용하여 함수의 반환 값을 쉽게 분해할 수 있습니다.

function getCoordinates() {
  return [50.123, 8.456];
}

const [lat, lon] = getCoordinates();
console.log(lat, lon); // 50.123 8.456

결론

디스트럭처링 할당은 JavaScript에서 배열과 객체를 다루는 매우 유용한 기능입니다. 이를 통해 코드를 더 간결하고 읽기 쉽게 작성할 수 있습니다. 다양한 상황에서 디스트럭처링을 사용하여 복잡한 데이터 구조를 쉽게 처리할 수 있으며, 함수의 매개변수나 반환 값을 다룰 때 특히 유용합니다. 이 문법을 잘 활용하면 코드의 가독성과 유지보수성이 크게 향상될 수 있습니다.

Post Views: 129