구조 분해 할당

💡 정의

구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

💡 배열 구조 분해

ex1 )

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

위에 할당된 users배열 부분인

let [user1, user2, user3]

의미는

let user1 = users[0];
let user2 = users[1];
let user3 = users[2];

와 동일하다.

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

ex2 )

let str = "Mike-Tom-Jane";
let [user1, user2, user3] = str.split('-');

여기서

str.split('-');

split()은 문자열을 잘라서 배열을 반환

['Mike', 'Tom', 'Jane']

이 결과를 user1,2,3에 넣어줍니다.

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

ex3 ) 기본값

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

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

ex4 ) 일부 반환값 무시

let [user1, ,user2] = ['Mike', 'Tom', 'Jane', 'Tony'];
console.log(user1); // 'Mike'
console.log(user2); // 'Jane'

공백과 쉼표를 이용하여 필요하지 않은 값을 무시
두번째, 네번째 요소는 할당받는 곳이 없어 생략

ex5 ) 사용하는 이유

let a = 1;
let b = 2;

a에 b값을, b에 a값을 넣고 싶다면 어떻게 해야할까??

let a = 1;
let b = 2;

let c = a; // 임시 변수
a = b;
b = c;

이럴때, 구조 분해 할당 바꿔치기를 이용하면 편리

[a, b] = [b, a];

💡 객체 구조 분해

ex1 )

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

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

여기서

let {name, age} = user;

의미는

let name = user.name;
let age = user.age;

와 동일하다.

배열과 매우 비슷하지만 한가지 다른점이 있다면 순서를 신경쓰지 않아도 된다!

let {age, name} = user;

이런식으로 바꾸어도 동일하게 동작

ex2 ) 새로운 변수 이름으로 할당

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

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

프로퍼티의 키값을 무조건 사용하지 않아도 된다.

ex3 ) 기본값

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

console.log(gender); // undefined

user객체에 gender가 없으면 male이 기본으로 할당

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

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

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

객체로부터 받은 값이 undefined일때만 기본값이 사용

---

유투버 '코딩앙마' 님의 영상을 참고하여 공부하기 위해 포스팅하였습니다.