Javascript-7 (Destructuring assignment)

인강을 듣는 등 공부를 하다보면 '구조분해할당' 이라는 말을 참 많이 듣게 된다.
그래서 오늘은 Destructuring 즉, 구조분해할당에 대해서 알아보려고 한다!

우선 구조분해할당이 무엇일까?
바로 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

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

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

[예시]

let users = ['Mike', 'Tom', 'Aden'];
let [user1, user2, user3] = users;

console.log(user1); // Mike
console.log(user2); // Tom
console.log(user3); // Aden

그런데 만약 그대로 채워지지 않고, 할당되는 값이 없으면 어떻게 될까?
이 때는 undefined로 뜨게 된다!
그렇기 때문에 default 값을 미리 지정해두면 error를 미연에 방지 할 수 있을것이다!

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

let [a=3, b=4, c=5] = [1, 2];
console.log(a)= 1
console.log(b)= 2
console.log(c)= 5

혹은 아래와 같이 공백을 이용해서 일부 반환 값을 무시할 수 있다.

let [user1, , user2] = ['Mike', 'Tom','Jane','Tony',]

console.log(user1); // 'Mike'
console.log(user2); // 'Jane'

이 때, Tom은 무시 되어진다.

바꿔치기 하고 싶다면 어떻게 해야할까?
Q. a에 2를, b에 1을 넣고 싶다면??

let a = 1;
let b = 2;

a = b ???
=> 이는 a도 2, b도 2가 된다

그렇다면 어떻게???

let c = a // C에 임시로 지정 한 후 바꿔치기한다
a = b;
b = c;

물론 이런 방법도 알아야하지만, 이는 복잡하다.
그렇기 때문에 구조분해할당을 사용하게 되면...

let a = 1;
let b = 2;

※ a에 2를, b에 1을 넣고 싶다면??

[a, b] = [b, a] 

아주 심플하게 구현이 가능하다!

객체를 구조분해 하는 것에 대해 알아보겠다!

let user = { name : 'Mike', age : 30};

// let name = users.name;
// let age = users.age;
let {name, age} = user; 
// 혹은 이렇게 해도 된다 let {age, name} = user 

console.log(name); // 'Mike'
console.log(age); // 30

⇒ 반드시 하나의 이름만 사용 할 수 있는 것은 아니다!

let user = { name : 'Mike', age : 30};

let {name: userName, age: userAge} = user;

console.log(userName); // 'Mike'
console.log(userage); // 30

객체구조분해 또한 default 값을 줄 수 있다!

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

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

let user = {
	name : 'Jane',
  age : 20,
	gender: 'female'
}

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

console.log(gender); // 'female'