[JS] 구조 분해 할당

Juno·2020년 12월 19일

구조 분해 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있는 Javascript 표현식 입니다.

let name = ["Juno", "Lee"]

이름을 firstname 과 lastname 으로 분해하고 싶다면, 어떻게 하면 좋을까요 ❓

let firstname = name[0]
let lastname = name[1]

이 방법을 생각하셨나요? (아니라면 당신은 고수,,,)

하지만, 구조 분해 할당 문법을 사용하면 다음과 같은 코드로 줄일 수 있습니다.

배열에서 구조 분해 할당을 사용한 경우, 짧은 코드로 같은 효과를 기대할 수 있습니다!

[firstname, lastname] = name;

console.log(firstname) // lee
console.log(lastname)  // juno

꼭 할당연산자 = 기준 왼쪽과 오른쪽 요소의 갯수가 같을 필요는 없습니다

할당될 요소가 적은 경우, 할당될 요소의 갯수만큼만 할당되고
할당할 요소가 더 적은 경우, 할당받지 못한 요소는 undefined 처리 되기 때문입니다 😆

# 오른쪽이 더 많은 경우
[a, b] = [10, 20, 30, 40, 50];
console.log(a) // 10
console.log(b) // 20

# 왼쪽이 더 많은 경우
[a,b] = [];
console.log(a) // undefined
console.log(b)

위의 경우 처럼 왼쪽이 더 적은 경우, rest 로 나머지 요소들을 가져올 수 있습니다.

# 오른쪽이 더 많은 경우
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest) // [30, 40, 50]

rest 파라미터 간단 설명

객체 분해하기

let tmis = {
	name: "Juno",
	age: 25,
	height: "180이 되고싶은 174.7"
*}*;

let {name, age, height} = tmis;
console.log(name);   // Juno
console.log(age);    // 25
console.log(height); // 180이 되고싶은 174.7

객체에서의 구조 분해 할당은 프로퍼티에 저장된 값이 상응하는 변수에 할당됩니다.

다음과 같이 순서가 바뀌어도 해당 프로퍼티에 상응하는 변수에 할당되게 됩니다!

let{height, name, age} = tmis;
console.log(name);   // Juno
console.log(age);    // 25
console.log(height); // 180이 되고싶은 174.7

프로퍼티와 다른 이름을 가진 변수에 할당하기 위해선 : 를 이용하면 가능합니다

let{name: n, age, height: h} = tims;
console.log(n);   // Juno
console.log(age);    // 25
console.log(h); // 180이 되고싶은 174.7

콜론을 분해하려는 객체의 프로퍼티 : 목표 변수 와 같은 형태로 사용하여

n = tims.name 와 같은 효과를 낼 수 있습니다.

객체 구조분해 에서의 rest

객체 구조분해에서도 rest 패턴를 사용할 수 있습니다.

let tmis = {
	name: "Juno",
	age: 25,
	height: "180이 되고싶은 174.7"
};

let {name, ...rest} = tmis;
console.log(name) // Juno
console.log(rest) // {age: 25, height: "180이 되고싶은 174.7"}