JavaScript 구조 분해 할당: 간편하게 변수 추출하기

JavaScript의 구조 분해 할당(destructuring assignment)은 배열과 객체에서 값을 간편하게 추출하여 변수에 할당할 수 있는 강력한 기능입니다. 이 글에서는 구조 분해 할당의 기본 개념부터 다양한 활용 방식까지 다룹니다.

구조 분해 할당이란?

구조 분해 할당은 ECMAScript 2015(ES6)에서 도입된 문법으로, 배열이나 객체의 값을 개별 변수에 손쉽게 할당할 수 있게 합니다. 예를 들어, 배열에서 첫 번째, 두 번째 아이템을 각각 변수에 담고 싶다면, 다음과 같이 할 수 있습니다:

javascript
const [first, second] = [10, 20];
console.log(first); // 출력: 10
console.log(second); // 출력: 20

객체에서도 비슷한 문법을 사용할 수 있습니다:

javascript
const person = {
  name: 'John',
  age: 30
};

const { name, age } = person;
console.log(name); // 출력: John
console.log(age); // 출력: 30

이 간단한 예제들은 구조 분해 할당의 기본적인 사용법을 보여줍니다. 이제 좀 더 다양한 상황에서 이 기능이 어떻게 활용될 수 있는지 알아보겠습니다.

배열에서의 구조 분해 할당

배열에서 구조 분해 할당을 사용하면 원하는 순서대로 값을 추출할 수 있습니다. 앞서 본 것처럼 배열은 대괄호 []를 사용해서 분해합니다. 다음은 여러 가지 예제들입니다:

기본 사용법

javascript
const numbers = [1, 2, 3];
const [one, two, three] = numbers;
console.log(one); // 출력: 1
console.log(two); // 출력: 2
console.log(three); // 출력: 3

일부 값만 추출하기

배열의 일부 값만 추출하고 싶을 때는 이렇게 합니다:

javascript
const numbers = [1, 2, 3, 4];
const [first, , third] = numbers;
console.log(first); // 출력: 1
console.log(third); // 출력: 3

중간의 값은 쉼표 ,를 사용해 건너뛸 수 있습니다.

기본 값 설정

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

javascript
const numbers = [1];
const [first, second = 10] = numbers;
console.log(first); // 출력: 1
console.log(second); // 출력: 10

객체에서의 구조 분해 할당

객체에서 구조 분해 할당을 사용할 때는 중괄호 {}를 사용합니다. 객체의 키 이름을 기준으로 값을 추출할 수 있습니다.

기본 사용법

javascript
const person = {
  name: 'Jane',
  age: 25
};

const { name, age } = person;
console.log(name); // 출력: Jane
console.log(age); // 출력: 25

키 이름 변경

추출한 값을 다른 이름의 변수에 저장하고 싶다면 다음과 같이 할 수 있습니다:

javascript
const person = {
  name: 'Jane',
  age: 25
};

const { name: personName, age: personAge } = person;
console.log(personName); // 출력: Jane
console.log(personAge); // 출력: 25

기본 값 설정

객체에서도 기본 값을 설정할 수 있습니다:

javascript
const person = {
  name: 'Jane'
};

const { name, age = 30 } = person;
console.log(name); // 출력: Jane
console.log(age); // 출력: 30

중첩된 구조 분해 할당

배열이나 객체가 중첩되어 있을 때도 구조 분해 할당을 사용할 수 있습니다.

중첩 배열 분해

javascript
const numbers = [1, [2, 3]];
const [one, [two, three]] = numbers;
console.log(one); // 출력: 1
console.log(two); // 출력: 2
console.log(three); // 출력: 3

중첩 객체 분해

javascript
const person = {
  name: 'John',
  address: {
    city: 'New York',
    country: 'USA'
  }
};

const { name, address: { city, country } } = person;
console.log(name); // 출력: John
console.log(city); // 출력: New York
console.log(country); // 출력: USA

함수에서의 구조 분해 할당

함수의 매개변수에서도 구조 분해 할당을 사용할 수 있습니다. 다음 예제를 통해 알아보겠습니다:

배열 매개변수 분해

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

console.log(sum([1, 2])); // 출력: 3

객체 매개변수 분해

javascript
function greet({ name, age }) {
  return `Hello, my name is ${name} and I am ${age} years old.`;
}

console.log(greet({ name: 'John', age: 30 }));
// 출력: Hello, my name is John and I am 30 years old.

함수 호출 시 전달되는 매개변수를 구조 분해 할당을 통해 편리하게 사용할 수 있습니다.

결론

JavaScript의 구조 분해 할당은 강력하고 유용한 기능입니다. 이 문법을 사용하면 더 간결하고 가독성이 좋은 코드를 작성할 수 있습니다. 배열과 객체에서 값을 추출하고, 함수 매개변수를 더 쉽게 관리할 수 있습니다. 구조 분해 할당을 적극적으로 활용하여 코드의 품질을 높여 보세요.