구조 분해 할당 (Destructuring assignment)

디스트럭처링 할당(Destructuring assignment)은 배열이나 객체의 속성을 해체하여, 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 이 기능을 통해 필요한 데이터만을 선택적으로 추출하거나, 함수에서 객체나 배열을 인자로 받을 때 바로 변수로 할당하는 등 코드를 더욱 간결하고 가독성 있게 만들 수 있습니다.

배열 디스트럭처링

배열 디스트럭처링은 배열의 각 요소를 변수에 할당할 수 있게 해줍니다.

const numbers = [1, 2, 3, 4, 5];

const [first, second, , , fifth] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(fifth); // 5

이 예제에서는 numbers 배열의 첫 번째, 두 번째, 그리고 다섯 번째 요소를 각각 first, second, fifth 변수에 할당했습니다. 세 번째와 네 번째 요소는 무시되었습니다.

객체 디스트럭처링

객체 디스트럭처링은 객체의 속성을 변수로 추출할 수 있게 해줍니다.

javascriptCopy code
const person = {
  name: 'John Doe',
  age: 30,
  location: 'New York'
};

const { name, age, location } = person;
console.log(name); // John Doe
console.log(age); // 30
console.log(location); // New York

이 예제에서는 person 객체의 name, age, location 속성을 각각 동일한 이름의 변수에 할당했습니다.

기본값과 새 변수 이름

디스트럭처링 할당에서는 없는 속성에 대해 기본값을 정의할 수 있으며, 새로운 변수 이름으로 속성을 할당할 수도 있습니다.

const { name: fullName, age, location, profession = 'Unknown' } = person;
console.log(fullName); // John Doe
console.log(profession); // Unknown

이 경우, person 객체에 profession 속성이 없으므로 기본값인 **'Unknown'**이 profession 변수에 할당됩니다. 또한, name 속성은 **fullName**이라는 새로운 변수 이름으로 할당되었습니다.

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

함수의 매개변수에서도 디스트럭처링을 사용할 수 있습니다. 이는 특히 객체를 인자로 받는 함수에서 유용합니다.

function introduce({ name, age }) {
  console.log(`My name is ${name} and I am ${age} years old.`);
}

introduce(person); // My name is John Doe and I am 30 years old.

이 예제에서는 introduce 함수가 객체를 매개변수로 받고, 이 객체 내에서 **name**과 age 속성을 바로 변수로 할당하여 사용합니다.

디스트럭처링 할당은 코드의 양을 줄이고, 특히 함수 매개변수를 다룰 때 더 명확하고 직관적인 코드를 작성할 수 있게 도와줍니다.