자바스크립트 - 구조 분해 할당

https://youtu.be/lV7ulA7R5Nk

코딩앙마님의 자바스크립트 중급 강의를 듣고 정리한 내용입니다.

🍟구조 분해 할당 구문이란?

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

배열 구조 분해

let [x,y] = [1,2]
console.log(x); //1
console.log(y); //2

예제

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

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

//배열 메서드를 사용해도 OK
let str = 'Mike-Tom-Jane';
let [user1, user2, user3] = str.split('-'); // ['Mike','Tom','Jane'];

Q. 만일 해당하는 값이 없다면?

A. 기존에 할당된 값이 나옵니다. 만일 할당된 값이 없다면 기본값인 Undefined가 들어갑니다

배열 구조 분해 : 일부 반환값 무시

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

배열 구조 분해 : 바꿔치기

let [a,b] = [b,a]

객체 구조 분해

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

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

객체 구조 분해: 기본값

let user = {name: 'Mike', age: 30};
let {name, age, gender} = user;
console.log(gender); //undefined

//기본값 지정
let {name, age, gender='male'} = user;
console.log(gender); //'male'
//gender의 값이 undefined일 때만 기본값 'male'이 출력됩니다.

let user = {
			name: 'Jane'
			age: 18,
			gender: 'female'
};
let {name, age, gender='male'} = user;
console.log(gender); //'female'
//'female'
//객체에 gender 값이 할당되어있으면 할당된 값으로 출력됩니다.