Destructuring assignment(구조 분해 할당) 란?
구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변숭 담을 수 있게 하는 표현식
배열 구조 분해
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'
예제2) split 이용하기
let users = ["Mike-Tom-Jane"];
let [user1, user2, user3] = str.split('-');
console.log(user1); // 'Mike'
console.log(user2); // 'Tom'
console.log(user3); // 'Jane'
배열 구조 분해 - 기본값
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'
배열 구조 분해 - 바꿔치기
let a = 1;
let b = 2;
// 방법 1
let c = a;
a = b;
b = c;
// 방법 2
[a, b] = [b, a];
객체 구조 분해
let user = {name: 'Mike', age: 30};
let {name, age} = user; // name과 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 : 'Jane',
age : 18,
gender : 'female'
};
let {name, age, gender= 'male'} = user;
console.log(gender); // 'female'
[출처] 코딩앙마 - 자바스크립트 중급 강좌 #9 구조 분해 할당
https://www.youtube.com/watch?v=lV7ulA7R5Nk&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=9
'공부 > JavaScript' 카테고리의 다른 글
Rest parameters, Spread syntax (0) | 2023.03.14 |
---|---|
JavaScript - Array methods (0) | 2023.03.08 |
JavaScript - String methods (0) | 2023.03.06 |
JavaScript - Number, Math (0) | 2023.03.06 |
JavaScript - Symbol (0) | 2023.02.27 |