구조분해 할당 정리

구조분해 할당이란 (Destructuring assignment) ? 

배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현

배열 

특징 : 배열이기 때문에 순서를 신경써야함

let users= ['Mike','Tom','Jane'];
/**
let user1 = users[0];
let user2 = users[1];
let user3 = users[2];
**/

//위에 주석부분을 한번에 표현
let [user1,user2,user3]= users;
console.log(user1); //'Mike'
console.log(user2); //'Tom'

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

//undefined 해결방법1 기본값을 할당한다.
let [d = 3, e = 4, f=5] = [1, 2];
console.log(d);// 3
console.log(e);// 4
console.log(f); // 5

// undefined 해결방법2 일부 반환값 무시
let [student1, ,student2]= ['chae', 'kim', 'lee'];
console.log(student2);//lee

 

변수간 값을 서로 바꿀때 사용(바꿔치기)

기존방법(바꿔치기)

a의값을 b의 값으로 , b의 값을 a의 값으로 바꿀때
//c라는 변수 필요 
let a = 1;
let b = 2;
let c = a; //c에 a값 저장
a = b; 
console.log(a); //2
console.log(b); //2
console.log(c); //1
b = c;
console.log(a); //2
console.log(b); //1

 

구조분해 활용(바꿔치기) 

a의값을 b의 값으로 , b의 값을 a의 값으로 바꿀때

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

console.log(a); //2
console.log(b); //1

훨씬 간편하게 변수간 값을 바꿀 수 있음.

 

객체

특징 : 순서가 상관없음 , 원하는 키값만 활용가능

const obj2 = {
  id: 1,
  name: "채민석",
  age: 25,
};
obj2.habit="soccer";
console.log(obj2); // 실행값 { id: 1, name: '채민석', age: 25, habit: 'soccer' }
/**
const id =obj2.id;
const name =obj2.name ;
const age =obj2.age;
**/

위 주석 부분을 한줄로 나타낼수 있음. 순서 상관없음.
const { age, name, id } = obj2;
console.log(age); // 25