Digking's cave

JS 기초 ) 구조분해할당 (Destructuring assignment) 본문

기초/JavaScript

JS 기초 ) 구조분해할당 (Destructuring assignment)

디깅 2022. 8. 3. 15:05
728x90

구조분해할당 (Destructuring assignment)

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

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

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

// user1 = users[0] Mike
// user2 = users[1] Tom
// user3 = users[2] Jane

배열 구조 분해

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

// "Mike" "Tom" "Jane"

해당값이 없으면 undefined 으로 들어간다.

미리 기본값을 지정해둬서 , 해당값 없을 땐 기본값으로 지정할 수도 있다

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

let [a=3, b=4, c=5] = [1,2];

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

일부 반환값을 무시할 수도 있다.

let [usrer1, ,user2] = ["Mike", "Tom", "Jane","Tony"];

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

바꿔치기도 편리하게 가능하다.

[a,b] = [b,a]

let a = 3;
let b = 5;
[a.b0 = [b,a]

let user = {name: "Mike" , age : 30};
let {name,age} = user;
let {age, name} = user;
// 순서는 상관없다

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

//이름도 변경 가능하다
let {name: userName, age: userAge} = user;
console.log(name); //"Mike"
console.log(age); //30

기본값을 줄 수 있다.

let user = {name: "Mike" , age : 30};
let {name,age,gender} = user; //gender = undefined

let {name,age,gender="male"} = user;
반응형