JavaScript 공부정리 - 구조 분해 할당

 

1. 구조분해 할당이란?

ES6에서 새롭게 도입한 문법이다.

객체나 배열을 변수로 분해할 수 있다.

 

객체를 분해할 때는 반드시 변수명과 객체의 프로퍼티의 이름이 일치해야 한다.

 

자, 객체를 쪼개보자

let a = {
  name: "Tarel",
  age: "adult",
  tech: "Node.js",
}
//이 a라는 객체를 쪼개면

const {name, age, hair, tech} = a
console.log(name)
console.log(hair)

//결과
//Tarel
//undefined

a라는 객체에 name, age, tech라는 키가 있다.

 

이것을 쪼개주었다. (참고로 객체의 이름과 쪼깨는데 사용한 객체 이름이 같아야 한다.)

쪼개는 내용을 보면 hair가 있는데

이런 키는 없는 키라서 출력서 undefined가 나오는 것을 알 수 있다.

 

이번엔 배열을 쪼개보자

let a = ["Node.js", "React", "Spring"];
//이 a라는 객체를 쪼개면

const [back, front, clear, Triple]=a;
console.log(back)
console.log(front)
console.log(clear)
console.log(Triple)

//결과
//Node.js
//React
//Spring
//undefined

보시다시피 순서대로 적용된다.

Triple의 경우 없기 때문에 undefined가 출력된다.

 

 

2. 이를 이용한 변수 스와핑

let a = 1;
let b = 45;
let temp;

temp = a;
a = b;
b = temp;
console.log(a);
console.log(a);

//결과
//45
//1

기존에는 a와 b의 값을 바꿀 때는 위와같이 temp라는 새로운 변수를 만들어서 수행했다.

 

하지만 배열의 구조분해할당을 사용하면 tmep 없이 쉽게 스와핑 할 수 있다.

let a = 1;
let b = 45;

[a,b] = [b,a]
console.log(a);
console.log(b);

//결과
//45
//1