ES6(ECMAScript 2015) - 디스트럭처링 - 1 - 객체 디스트럭처링

ES6(ECMAScript 2015) - 객체 리터럴 확장 - 2 - 프로토타입 축약 — ES6(ECMAScript 2015) – 디스트럭처링 – 1 – 객체 디스트럭처링

쉬운 목차

ES6(ECMAScript 2015) – 디스트럭처링 – 1 – 객체 디스트럭처링

주제: 객체 디스트럭처링이란?

자바스크립트의 ES6(ECMAScript 2015)에서 도입된 디스트럭처링(Destructuring)은 배열이나 객체의 값을 추출하여 개별 변수로 할당하는 기능입니다. 객체 디스트럭처링은 객체의 속성(property)을 변수로 분해하여 접근하는 것을 의미합니다. 이를 통해 코드를 더욱 간결하고 가독성있게 작성할 수 있습니다.

예시를 통해 쉽게 이해해보겠습니다.

// 객체 디스트럭처링 예시
const person = {
  name: '홍길동',
  age: 30,
  address: '서울시'
};

// 기존 방식
const name = person.name;
const age = person.age;
const address = person.address;

console.log(name);    // '홍길동'
console.log(age);     // 30
console.log(address); // '서울시'

// 디스트럭처링 방식
const { name, age, address } = person;

console.log(name);    // '홍길동'
console.log(age);     // 30
console.log(address); // '서울시'

위의 예시에서는 person 객체에서 name, age, address 속성을 추출하여 개별 변수로 할당하고 있습니다. 객체 디스트럭처링을 사용하면 기존에 번거로웠던 속성 접근을 간단하게 표현할 수 있습니다.

객체 디스트럭처링 사용법

객체 디스트럭처링을 사용하기 위해서는 할당 연산자(=) 왼쪽에 중괄호({})를 사용하여 추출하고자 하는 속성을 지정합니다. 이때, 중괄호 내부에는 추출하고자 하는 속성의 이름과 할당할 변수명을 콜론(:)으로 구분하여 작성합니다.

const { 속성1, 속성2, ... } = 객체;

위의 문법에서 속성1, 속성2는 객체에서 추출하고자 하는 속성의 이름을 의미하며, 할당할 변수명으로 사용됩니다. 객체 디스트럭처링을 통해 속성의 값을 변수에 할당할 수 있습니다.

객체 디스트럭처링의 유연한 활용

객체 디스트럭처링은 더욱 유연하게 사용할 수 있는 다양한 기능을 제공합니다. 예를 들어, 기본값 설정, 다른 변수명으로 할당, 중첩된 객체 디스트럭처링 등을 활용할 수 있습니다.

1. 기본값 설정

객체 디스트럭처링을 사용할 때, 추출하고자 하는 속성이 존재하지 않을 경우 기본값을 설정할 수 있습니다.

const person = {
  name: '홍길동',
  age: 30
};

const { name, age, address = '서울시' } = person;

console.log(name);    // '홍길동'
console.log(age);     // 30
console.log(address); // '서울시' (기본값)

위의 예시에서는 person 객체에 address 속성이 없지만, 디스트럭처링 할당 시에 기본값으로 '서울시'를 설정하였습니다. 따라서 address 변수의 값은 기본값인 '서울시'가 할당됩니다.

2. 다른 변수명으로 할당

객체 디스트럭처링을 할 때, 추출한 속성을 다른 변수명으로 할당할 수 있습니다. 이는 기존의 속성명이 다른 변수명과 충돌할 때 유용합니다.

const person = {
  name: '홍길동',
  age: 30
};

const { name: fullName, age } = person;

console.log(fullName); // '홍길동' (name 속성을 fullName 변수로 할당)
console.log(age);      // 30

위의 예시에서는 person 객체의 name 속성을 fullName 변수로 할당하였습니다. 따라서 name 대신 fullName 변수를 사용하여 값을 접근할 수 있습니다.

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

객체 내부에 중첩된 객체가 있다면, 중첩된 객체의 값을 추출할 수도 있습니다.

const person = {
  name: '홍길동',
  age: 30,
  address: {
    city: '서울',
    street: '강남'
  }
};

const { name, age, address: { city, street } } = person;

console.log(name);   // '홍길동'
console.log(age);    // 30
console.log(city);   // '서울'
console.log(street); // '강남'

위의 예시에서는 person 객체의 address 속성이 중첩된 객체입니다. 객체 디스트럭처링을 통해 address 객체 내부의 city와 street 속성을 추출하고 변수로 할당하였습니다.

객체 디스트럭처링의 주의할 점

객체 디스트럭처링을 사용할 때 주의해야 할 몇 가지 점이 있습니다.

객체 디스트럭처링은 변수에 값을 할당하는 것이므로, 할당할 대상인 객체는 null 또는 undefined가 아니어야 합니다.
객체 디스트럭처링을 사용할 때 추출하려는 속성의 이름과 할당할 변수명은 일치해야 합니다. 그렇지 않으면 변수에는 undefined가 할당됩니다.
기본값을 설정한 경우, 해당 속성이 undefined인 경우에만 기본값이 적용됩니다. 속성 자체가 없는 경우에는 기본값이 적용되지 않습니다.

따라서 객체 디스트럭처링을 사용할 때는 유효한 객체를 대상으로 하고, 변수명과 속성명을 정확히 일치시켜야 하며, 기본값 설정을 적절히 사용해야 합니다.

이로써 객체 디스트럭처링에 대한 소개를 마치겠습니다. 객체 디스트럭처링은 자바스크립트 코드를 더 간결하고 가독성있게 작성하는 데 도움을 주는 강력한 기능입니다. 이해하기 쉬운 예시와 함께 사용법과 유연한 활용 방법을 알아보았습니다. 객체 디스트럭처링을 적절히 활용하여 자바스크립트 코드를 더욱 효율적으로 작성해보세요!