Javascript Object Destructuring

Object Destructuring

js를 쓰다보면 이런 코드를 자주 보게 된다.

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

const { name, age, city } = person;

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

const { name, age, city } = person; 처럼 person 객체의 속성들을 추출해서 새로운 변수에 할당할 수 있다. 훨씬 코드를 간결하게 작성할 수 있고, 원하는 속성에 빠르게 접근할 수 있다.

변수 이름 변경

// 객체 정의
const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

const name = 'test';

// 객체 구조 분해 할당과 동시에 변수 이름 변경
const { name: personName, age: personAge, city: personCity } = person;

// 변경된 변수 이름으로 출력
console.log(personName);  // 'John Doe'
console.log(personAge);   // 30
console.log(personCity);  // 'New York'

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

const { name: personName, age: personAge, city: personCity } = person; 처럼 속성을 새로운 변수로 할당하면서 동시에 변수의 이름을 바꿀 수 있다.

디폴트 값

object 구조분해 할당에서 디폴트 값도 설정할 수 있다.

// 객체 정의
const person = {
  name: 'John Doe',
  age: 30
};

// 객체 구조 분해 할당과 동시에 디폴트 값 설정
const { name, age, city = 'Seoul' } = person;

// 변수에 할당된 값 출력
console.log(name);  // 'John Doe'
console.log(age);   // 30
console.log(city);  // 기본값 'Seoul', person 객체에 city 속성이 없으므로

원래는 아래 처럼 길게 작성해야하지만, 구조 분해 할당을 이용하면 훨신 간결하게 쓸 수 있다.

const city = typeof person.city === 'undefined' 
	? 'Seoul'
  : person.city

함수 매개변수(parameter) 구조분해할당

함수 매개변수에서도 구조분해 할당을 사용할 수 있다. 동시에 디폴트 값을 설정할 수도 있다.

function printPersonInfo({ name, age, city = 'Unknown' }) {
  console.log(`Name: ${name}`);
  console.log(`Age: ${age}`);
  console.log(`City: ${city}`);
}

printPersonInfo({
  name: 'John Doe',
  age: 30
});

printPersonInfo({
  name: 'John Doe',
  age: 30,
	city: 'Busan'
});

함수 매개변수에서도 마찬가지로 변수이름을 설정할 수 있다.

function printPersonInfo({ name: userName, age, city = 'Unknown' }) {
  console.log(`userName: ${userName}`);
}

printPersonInfo({
  name: 'John Doe',
  age: 30
});

주의사항

함수 매개변수 모두가 디폴트 값이 설정될 수 있다.

function printPersonInfo(
	{ name = "dugi", age = "30", city = 'Unknown' }
) {
	 //...
}

그럴때 이 함수를 호출하면 위는 되지만 아래는 되지 않는다.

printPersonInfo({});   //OK
printPersonInfo();     //에러 - Uncaught TypeError: Cannot read properties of undefined (reading 'name')

그럴 때는 구조분해 할당하는 객체의 기본값을 설정하면 된다.

function printPersonInfo({
	name = "dugi", age = "30", city = 'Unknown' } = {}
) {
	 //...
}

printPersonInfo({});   //OK
printPersonInfo();     //OK