12. javascript 구조 분해 할당

구조 분해 할당이란

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

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

console.log(x) // 1
console.log(y) // 2

위와 같이 배열 값에 각각 할당을 해줄 수 있게 된다.

// 할당 할 값이 없을 떄

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

console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

할당할 값이 없는 c는 undefined 가 들어간다.

 

undefined를 방지하기 위해 기본값을 사용하게 된다

// 할당 할 값이 없을 떄

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

console.log(a) // 1
console.log(b) // 2
console.log(c) // 5

기본 값을 사용하면 undefined를 방지할 수 있게 된다.

 

또 일부 반환 값이 필요 없을 땐 무시할 수 있다.

let [user1, ,user2] = [ seonguen, seonghun, park, kim];

console.log(user1) //seonguen
console.log(user2) //park

// seonghun 과 kim은 할당되지 않음

바꿔치기

let a = 1;
let b = 2;

이때 a, b의 값을 바꾸고 싶다면 어떻게 해야 할까?

a = b;

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

위와 같은 방법으로는 되지 않는다.

let c = a; // a의 값을 c에 임시 저장

a = b;
b = c;

위와 같이 c라는 값을 만들어 a를 임시저장 후 사용해야 한다.

하나 배열 구조 분해를 이용하면 간편하게 바꿀 수 있다.

[a,b] = [b,a]

이거 하나면 손쉽게 바꿀 수 있다.

 

let user = { name: 'seonghun' , age : 30}

let {name , age} = user;

let user.name = 'seonghun';
let user.age = '30'; // 3번 라인과 같다.

let {age, name} = user; // 3번 라인과 같다.

let {age : myAge, name : myName} = user;

console.log(myAge)   //30; age를 myAge로 변경 
console.log(myName)  //seonghun;  name 을 myName 으로 변경


let {name, age, gender} = user;

console.log(gender)  // undefined가 할당된다.

//이럴때 배열 구조분해 할당과 같이 기본값을 부여한다.

let {name, age, gender='M'} = user;

console.log(gender)  // 기본값 M 가 할당된다.

let user = { name: 'seonghun' , age : 30, gender : 'F' }

// 값이 있다면 있는 값을 사용하게 된다.

 

오늘은  구조 분해 할당을 알아보았다.

 

객체나 배열의 값에 조금 더 쉽게 접근하고 다룰 수 있게 되었다.