[JavaScript] 구조분해할당

구조분해할당

구조분해할당이란?

배열이나 객체의 값(value)이나 프로퍼티(property)를 분해해서 그 값을 별도의 변수에 담을 수 있게 하는 표현식이다.

let [x, y] = [1, 2]
console.log(x)   // 1
console.log(y)   // 2

할당 받을 객체는 왼쪽에 분해 하는 객체는 오른쪽에 대입한다.
여기서 [1, 2]는 각각 x와 y에 할당된다.

이미 저장된 값도 할당할 수 있다

const arr = [1, 2, 3]
const [a, b, c] = arr;
console.log(a, b, c)   // 1 2 3

할당되는 값이 없으면?

let [a, b, c] = [1, 2]
console.log(c)   // undefined

a에는 1이 b에는 2가 할당되는데 c에는 아무것도 할당되지 않는다. 그러므로 undefined가 나온다.
이때 변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용한다.

let [a=3, b=4, c=5] = [1, 2]
console.log(a)   // 1
console.log(b)   // 2
console.log(c)   // 5

또 다른 예시를 보자

let user = {name: "jihyun", age: 30}
let {name, age, gender = "male"} = user

여기서 gender의 값은 할당되지 않아서 undefined가 나올 것 이다. 그럴때 기본값 'male'을 넣어주면 된다.

일부 배열의 반환값을 무시하기

필요하지 않는 반환값은 공백으로 무시할 수도 있다.

let [a, ,c] = [1, 2, 3, 4]

여기서 1은 a에 2는 할당할 곳이 없으니 무시되고 3은 c에 4도 무시된다.

만약 배열의 첫번째 요소만 받아서 변수에 저장하고 싶을땐 어떻게 할까?

const arr = [1, 2, 3]
const first = arr[0]

이 방법이 먼저 떠오를 것이다. 하지만 이걸 구조분해할당으로도 표현할 수 있다.

const arr = [1, 2, 3]
const [first] = arr

배열의 0번째 값을 first가 받고 나머지 2, 3은 무시된다.

두 변수의 값을 교환하기

let a = 1;
let b = 2;
let [a, b] = [b, a]
console.log(a)   // 2
console.log(b)   // 1

변수에 배열의 나머지를 할당하기

변수에 배열을 할당하고 남은 값을 나머지 매개변수(...)를 이용해서 하나의 변수에 전부 할당 할 수 있다.

let [a, ...b] = [1, 2, 3];
console.log(a)   // 1
console.log(b)   // [2, 3]

a는 1이 대입되고 나머지 2,3은 '...b'로 받아서 배열로 저장된다.

객체에서의 구조분해할당

배열에서는 요소를 할당한다면 객체에서는 프로퍼티값을 할당한다.

const object = {
	name : "jihyun",
    age : 30
}
const { name, age } = object
console.log(name); // "jihyun"
console.log(age); // 30

이처럼 object내부의 name, age의 프로퍼티를 새로운 객체 name, age에 할당한다.
또한 객체의 프로퍼티명과 다른 변수명을 새롭게 지정할 수도 있다.

const object = {
	name : "jihyun",
    age : 30
}
const { name: jhName, age } = object
console.log(jhName); // "jihyun"

객체에서 구조분해할당은 프로퍼티를 기준으로 할당되기때문에 배열에서의 구조분해할당과는 달리 순서가 바뀌어도 프로퍼티값을 가져올 수 있다.

const object = {
	name : "jihyun",
    age : 30
}
// name, age순서가 뒤바뀜
const { age, name } = object
console.log(age); // 30
console.log(name); // "jihyun"

객체 구조분해할당에서도 나머지 매개변수를 활용할 수 있다.

const object = {
	name : "jihyun",
    age : 30,
    gender : "female"
}
const { name, ...rest } = object
console.log(name)   //"jihyun"
console.log(rest)   // { age: 30, gender: 'female' }

name의 프로퍼티값은 name에 저장되고 age와 gender는 ...rest로 받아서 하나의 객체로 저장된다.