구조 분해 할당 (비구조화 할당)

객체 구조분해할당

기본

기존에는 객체의 특정 값을 사용하려면 아래와 같이 작성했다.

const person = {
	name: 'erun',
  	age: 98,
  	email: 'erun@erun.com'
}

console.log(person.name);		// 'erun'
console.log(person.age);		// 98
console.log(person.email);		// 'erun@erun.com'
console.log(person.address);	// undefined

ES6의 구조 분해 할당을 사용하면 아래와 같이 작성 가능하다.

const person = {
	name: 'erun',
  	age: 98,
  	email: 'erun@erun.com'
}

const { name, age, email, address } = person;

console.log(name);		// 'erun'
console.log(age);		// 98
console.log(email);		// 'erun@erun.com'
console.log(address);	// undefined

기본값 설정

객체의 데이터가 비어있으면 할당 연산자를 통해 기본값을 지정할 수 있다.

const person = {
	name: 'erun',
  	age: 98,
  	email: 'erun@erun.com'
}

const { name = 'Karen' , age, email, address = 'Seoul' } = person;

console.log(name);		// 'erun'
console.log(age);		// 98
console.log(email);		// 'erun@erun.com'
console.log(address);	// 'Seoul'

변수명을 객체의 key와 다르게 사용하고 싶을 때

새로운 변수에 할당해줄 필요 없이,
꺼내올 때는 해당 속성 이름으로, 활용할 때는 원하는 이름으로 사용 가능하다.

const person = {
	name: 'erun',
  	age: 98,
  	email: 'erun@erun.com'
}

const { name, age, email, address = 'Seoul' } = person;
const userName = name;
// 이렇게 할 필요 없이

const { name: userName, age, email, address = 'Seoul' } = person;
// 위와 같이 콜론으로 명시해주면 된다.

console.log(userName);		// 'erun'
console.log(age);		// 98
console.log(email);		// 'erun@erun.com'
console.log(address);	// 'Seoul'

배열 구조분해 할당

기본

순서대로 할당해주면 된다.

const fruits = ['Apple', 'Banana', 'Orange'];
const [a, b, c, d] = fruits;

console.log(a, b, c, d);	// 'Apple', 'Banana', 'Orange', undefined

n번째 요소만 추출하고 싶을 때

앞에 생략되는 요소의 개수만큼 쉼표를 작성하고 가져온다.

// 바나나만 가져올 때
const fruits = ['Apple', 'Banana', 'Orange'];
const [, b] = fruits;

console.log(b);		// 'Banana'

// 오렌지만 가져올 때
const fruits = ['Apple', 'Banana', 'Orange'];
const [, , b] = fruits;

console.log(b);		// 'Orange'