[JavaScript] 구조 분해 할당

리액트 useState를 공부하다가 나온 자바스크립트 기능이 있어 알아보려한다.

구조 분해 할당

• 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식
• ES6 부터 도입

배열 구조분해 할당

let [x, y] = [1, 2]

console.log(x);	// 결과: 1
console.log(y);	// 결과: 2

let users = ["Mike", "Tom", "Jane"];
let [user1, user2, user3] = users;
// 위 코드와 동일
// let user1 = users[0];
// let user1 = users[1];
// let user1 = users[2];

console.log(user1);	// 결과: "Mike"
console.log(user2);	// 결과: "Tom"
console.log(user3);	// 결과: "Jane"

• 배열 기본값 설정
• undefined 방지

// c는 undefined
let [a,b,c] = [1,2];
let [a=3, b=4, c=5] = [1, 2];

console.log(a);	// 결과: 1
console.log(b);	// 결과: 2
console.log(c);	// 결과: 5

• 값 바꾸기

let a = 1;
let b = 2;
[a, b] = [b, a];

console.log(a);	// 결과: 2
console.log(b);	// 결과: 1

객체 구조분해 할당

const person = { name: "Mike", age: 20, job: "developer" };

const { name, age } = person;

console.log(name); // Mike
console.log(age);  // 20

📌 Reference

• 참고자료