[JavaScript 최신 기능 시리즈] 3일차: JavaScript 디스트럭처링 할당 이해하기

3. 디스트럭처링 할당

디스트럭처링 할당이란 무엇인가?

디스트럭처링 할당(Destructuring Assignment)은 배열이나 객체의 값을 개별 변수로 쉽게 추출할 수 있게 해주는 ES6의 새로운 문법입니다. 이 문법을 사용하면 코드의 가독성과 작성 편의성이 크게 향상됩니다.

배열 디스트럭처링

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

1. 기본 배열 디스트럭처링

let fruits = ['Apple', 'Banana', 'Cherry'];
let [a, b, c] = fruits;

console.log(a);  // 출력: Apple
console.log(b);  // 출력: Banana
console.log(c);  // 출력: Cherry

2. 기본값 지정

배열의 요소가 없는 경우 기본값을 지정할 수 있습니다.

let [x = 1, y = 2, z = 3] = [10, undefined];
console.log(x);  // 출력: 10
console.log(y);  // 출력: 2
console.log(z);  // 출력: 3

3. 나머지 요소 할당

나머지 요소를 별도로 할당할 수 있습니다.

let [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first);  // 출력: 1
console.log(rest);   // 출력: [2, 3, 4, 5]

객체 디스트럭처링

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

1. 기본 객체 디스트럭처링

let person = {
  name: 'Alice',
  age: 25
};

let { name, age } = person;

console.log(name);  // 출력: Alice
console.log(age);   // 출력: 25

2. 다른 이름으로 할당

객체의 속성을 다른 이름으로 할당할 수 있습니다.

let { name: personName, age: personAge } = person;

console.log(personName);  // 출력: Alice
console.log(personAge);   // 출력: 25

3. 기본값 지정

객체의 속성이 없는 경우 기본값을 지정할 수 있습니다.

let { name, age, gender = 'unknown' } = person;
console.log(gender);  // 출력: unknown

4. 중첩 객체 디스트럭처링

중첩된 객체의 속성을 디스트럭처링 할 수 있습니다.

let user = {
  name: 'Bob',
  address: {
    city: 'Seoul',
    country: 'Korea'
  }
};

let {
  name,
  address: { city, country }
} = user;

console.log(city);    // 출력: Seoul
console.log(country); // 출력: Korea

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

디스트럭처링을 함수의 매개변수로 사용할 수 있습니다.

1. 배열 디스트럭처링

function printFruits([first, second, third]) {
  console.log(first);
  console.log(second);
  console.log(third);
}

printFruits(['Apple', 'Banana', 'Cherry']);
// 출력: Apple
//       Banana
//       Cherry

2. 객체 디스트럭처링

function printPerson({ name, age }) {
  console.log(name);
  console.log(age);
}

printPerson({ name: 'Alice', age: 25 });
// 출력: Alice
//       25

결론

디스트럭처링 할당은 배열이나 객체의 값을 쉽게 추출하여 변수에 할당할 수 있는 강력한 문법입니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있으며, 함수 매개변수로도 유용하게 사용할 수 있습니다.

다음 글에서는 화살표 함수에 대해 알아보겠습니다. 다음 글에서 만나요!