[자바스크립트] 디스트럭처링 (Destructuring)

디스트럭처링 (Destructuring)은 자바스크립트에서 배열(Array)이나 객체(Object)의 값을 쉽게 추출하여 변수에 할당할 수 있는 문법입니다.

 

1. 배열 디스트럭처링

배열 디스트럭처링을 사용하면, 배열의 각 요소를 배열 변수에 할당할 수 있습니다. 예를 들어, 다음과 같은 배열이 있다고 가정해 봅시다.

const arr = [1, 2, 3];

이 배열의 각 요소를 변수에 할당하려면, 다음과 같이 할 수 있습니다.

 

const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

이렇게 배열의 각 요소를 변수에 할당할 때, 변수 이름은 원하는 대로 지정할 수 있습니다. 만약, 배열에서 일부 요소만 추출하고 싶다면, 다음과 같이 할 수 있습니다.

 

const [a, , c] = arr;

console.log(a); // 1
console.log(c); // 3

위 코드에서, 변수 b는 사용하지 않으므로 빈칸으로 비워두었습니다.

2. 객체 디스트럭처링

객체 디스트럭처링을 사용하면, 객체의 속성값을 변수에 할당할 수 있습니다. 예를 들어, 다음과 같은 객체가 있다고 가정해 봅시다.

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

이 객체의 속성값을 변수에 할당하려면, 다음과 같이 할 수 있습니다.

 

const {name, age} = obj;

console.log(name); // 'John'
console.log(age); // 30

이렇게 객체의 속성값을 변수에 할당할 때, 변수 이름은 객체의 속성 이름과 일치해야 합니다. 만약, 객체에서 일부 속성만 추출하고 싶다면, 다음과 같이 할 수 있습니다.

 

const {name} = obj;

console.log(name); // 'John'

 

 

위 코드에서, 변수 age는 사용하지 않으므로 생략했습니다.

3. 중첩된 객체와 배열 디스트럭처링

중첩된 객체나 배열의 경우, 다음과 같이 중첩된 구조에 따라 값을 추출할 수 있습니다.

 

const obj = {
  name: 'John',
  age: 30,
  job: {
    title: 'Developer',
    yearsOfExperience: 5
  },
  hobbies: ['reading', 'swimming']
};

const {name, job: {title}, hobbies: [hobby1, hobby2]} = obj;

console.log(name); // 'John'
console.log(title); // 'Developer'
console.log(hobby1); // 'reading'
console.log(hobby2); // 'swimming'

위 코드에서, job 속성과 hobbies 속성은 객체나 배열에서 값을 추출할 때, 추출한 값을 기본값으로 지정할 수도 있습니다. 기본값은 변수에 할당될 값이 없는 경우에만 사용됩니다. 예를 들어, 다음과 같이 객체의 속성값을 변수에 할당할 때, 기본값을 지정할 수 있습니다.

 

const obj = {name: 'John', age: 30};
const {name, city = 'Seoul'} = obj;

console.log(name); // 'John'
console.log(city); // 'Seoul'

위 코드에서, 객체 obj에는 city 속성이 없습니다. 그래서 city 변수에 기본값 'Seoul'이 할당됩니다.

디스트럭처링은 함수 매개변수에서도 사용할 수 있습니다. 예를 들어, 다음과 같이 함수의 매개변수로 배열을 받아와서 각 요소를 변수에 할당할 수 있습니다.

 

function printArr([a, b, c]) {
  console.log(a);
  console.log(b);
  console.log(c);
}

const arr = [1, 2, 3];
printArr(arr);

위 코드에서, printArr 함수는 배열을 매개변수로 받아와서 각 요소를 변수 a, b, c에 할당합니다. 그리고 각 요소를 출력합니다.

 

4. 정리

 

마지막으로, 디스트럭처링은 ES6부터 추가된 문법이므로, 오래된 브라우저에서는 동작하지 않을 수 있습니다. 따라서, 웹 페이지에서 디스트럭처링을 사용할 경우에는 브라우저 호환성을 확인하고 폴리필(Polyfill)을 사용하는 것이 좋습니다.