[ES6] Destructuring, 배열, 객체의 요소를 할당하는 법

Destructuring, 한국말로 구조 분해 라는 뜻입니다. ES6 에서는 객체를 분해해서 할당 하는 문법을 제공합니다. 여러분들이 객체 내부 데이터에 접근하고자 하는 상황을 가정 해 보겠습니다.

const justkode = {
	name: "Min Jae Park",
	univ: {
		name: "Kyung Hee Univ.",
		grade: {
			programming: "A",
			math: "B",
			english: "C",
			writing: "B",
			culture: "B"
		}
	}
}

const programming = justkode.univ.grade.programming
const math = justkode.univ.grade.math
const english = justkode.univ.grade.english
const writing = justkode.univ.grade.writing
const culture = justkode.univ.grade.culture

justkode.univ.grade 안에 있는 attribute들을 나누어 원하는 변수에 적절하게 할당 하려 했지만, 코드의 길이가 꽤나 길어지는 것 같습니다. 밑에 있는 다섯 줄을 한 줄로 줄일 수 있을까요?

const justkode = {
	name: "Min Jae Park",
	univ: {
		name: "Kyung Hee Univ.",
		grade: {
			programming: "A",
			math: "B",
			english: "C",
			writing: "B",
			culture: "B"
		}
	}
}

const {programming, math, english, writing, culture} = justkode.univ.grade
console.log(programming, math, english, writing, culture)  // Out: 'A' 'B' 'C' 'B' 'B'

네! 가능합니다. 위 예시 코드는, Destructuring을 이용하여 객체를 구조 분해 할당한 모습입니다. 한 번, 여러 가지 예시를 통해서 알아 볼까요?

기본적인 변수 할당

Array나 Object 같은 경우에는, 순서에 맞게, 혹은 attribute를 적절하게 배치 하여 구조 분해 할당할 수 있습니다. Default 값 또한 설정하여 데이터가 존재 하지 않는 경우를 방지 할 수 있습니다.

// 기본적인 변수 할당
const [one, two, three] = [1, 2, 3]
const {name, age} = {name: "JustKode", age: 23}

// 먼저 선언 된 변수에 할당
let i, j, k
[i, j, k] = [1, 2, 3]

// 기본 값 설정 가능
const [first=1, second=2] = [3]
const {math="None", english="None"} = {math: "A"}
console.log(first, second, math, english)  // Out: 3 2 'A' 'None'

// Array 같은 경우, 필요 없는 값 무시 가능
const [a, ,c] = [1, 2, 3]
console.log(a, c)  // Out: 1 3

// Array 같은 경우, 나머지 값 Array로 할당 가능
const [x, y, ...z] = [1, 2, 3, 4, 5]
console.log(x, y, z)  // Out: 1 2 [ 3, 4, 5 ]

// Object 같은 경우, 나머지 값 Object로 할당 가능
const {python, javascript, ...others} = {
	python: "Good",
	javascript: "Not Bad",
	cpp: "Hard",
	html: "NOT PROGRAMMING LANGUAGE"
}
console.log(python, javascript, others)  // Out: Good Not Bad { cpp: 'Hard', html: 'NOT PROGRAMMING LANGUAGE' }

Nested Object

Object 안에 Object 가 있는 구조를 이쁘게 한 줄로 구조 분해 할당 할 방법이 있을 까요? 하는 방법은 간단합니다, 참조 하고 싶은 attribute Object를 : 을 이용하여, 참조 하여 할당하면 됩니다.

const justkode = {
	name: "Min Jae Park",
	univ: {
		name: "Kyung Hee Univ.",
		grade: {
			programming: "A",
			math: "B",
			english: "C",
			writing: "B",
			culture: "B"
		}
	},
	language: ['Python', 'JavaScript', 'C++']
}

const {univ: {grade: {programming, math, english, writing, culture}}} = justkode
console.log(programming, math, english, writing, culture)  // Out: A B C B B

const {language: [python, javascript, cpp]} = justkode
console.log(python, javascript, cpp)  // Out: Python, JavaScript, C++

변수 이름 변경

Object를 구조 분해 할당 할 경우, attribute의 이름을 그대로, 변수로 써야 하나... 라는 고민은 할 필요 없습니다. 다행히도 이름을 변경 할 수 있도록 하는 문법이 구현 되어 있습니다. attribute명 옆에 :을 붙이고, 설정 하고 싶은 변수명을 작성 하면 됩니다.

const {name: nickname, favorite: {language: lg}} = {name: 'justkode', favorite: {language: 'Python'}}
console.log(nickname, lg)  // Out: justkode Python

함수 파라미터의 구조 분해 할당

당연히 함수에서도 파라미터의 구조 분해 할당이 가능합니다. Default Parameter도 사용 가능합니다.

function test({name, age, job='jobless'}) {
	console.log(`Hi! I'm ${name}, I'm ${age} years old.`)
	console.log(`I'm ${job}`)
}
test({name: 'justkode', age: 23})
// Out: Hi! I'm justkode, I'm 23 years old.
// Out: I'm jobless

마치며

이 문법은 React, Vue 같은 최신 프레임 워크에서 특히 많이 사용됩니다. 또한 import 할 때도 많이 사용 됩니다. ex) import React, {Components} from "react" ES6의 핵심 문법 중 하나이니, 꼭 알아 두세요!