티스토리 뷰

Front-end/Java Script

구조분해할당

ekki88 2022. 8. 16. 11:23

구조분해할당

Destructuring assignment 

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

 

배열 구조 분해

let users = ['mike', 'tom', 'jane'];
let [user1, user2, user3] = users;


//같은것
let user1 = user[0];
let user2 = user[1];
let user3 = user[2];

console.log(user1); //'mike'
console.log(user2); //'tom'
console.log(user3); //'jane'

배열 구조 분해 : 기본값

let [a,b,c,] = [1,2];
//기본값 없을시 undefined

let [a=3, b=4, c=5] = [1,2];
//기본값 부여

console.log(a); //1
console.log(b); //1
console.log(c); //1

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

let [user1, , user2] = ['mike','tom','jane','tony']

//중간 쉼표는 할당값 x

console.log(user1); //'mike'
console.log(user2); //'jane'

배열 구조 분해 : 바꿔치기

let a =1;
let b =2;

[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:'jane',
age:18,
gender:'female'
};

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

console.log(gender);// 'female'
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2024/09   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함