[javaScript] 구조분해할당

구조분해할당이란,

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

 

• let[a,b,c] = [1,2] 처럼 값이 없으면 undefined가 들어간다.
• let[user1, ,user2] = [’a’,’b’,’c’] 중간에 b값은 무시된다.
• [a, b] =[b, a] 로 값을 바꿔치기 할 수 있다.

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

//배열 구조 분해 할당
let users = ['a','b','c'];
let [user1, user2, user3] = users;

console.log(user1);  // 'a'
console.log(user2);  // 'b'
console.log(user3);  // 'c'

// 특정 문자열 마다 자르기
let users = 'a-b-c';
let [user1, user2, user3] = users.split('-');

console.log(user1);  // 'a'
console.log(user2);  // 'b'
console.log(user3);  // 'c'

// let[a,b,c] = [1,2] 처럼 값이 없으면 undefined가 들어간다.
// let[user1, ,user2] = [’a’,’b’,’c’] 중간에 b값은 무시된다.
//[a, b] =[b, a] 로 값을 바꿔치기 할 수 있다.

//객체 구조 분해
let user = {name :'a', number:1}

let {name, number} = user; //순서상관 없음 {age,number} 도 결과값이 같다
//let name = user.name;
//let number = user.number;
console.log(name);  // 'a'
console.log(number);   // 1

//새로운 변수 이름으로 할당
let user = {name :'a', number:1}
let {number : one , name : aname} = user;

console.log(aname); //'a'
console.log(one); //1

//객체 기본값 설정
let user = {name :'a', number:1,};

let {number, name, color = 'blue'} = user;  // color값 없을 때 blue를 기본값으로

console.log(name); //'a'
console.log(number); //1
console.log(color); //'blue'

const obj ={
    a:1,
    b:2,
    c:3,

}
//구조 분해시 같은 변수를 사용 불가 
const{a,b,e} = obj
console.log(a); // 1
console.log(b); // 2 
console.log(e); // undefined = false  0 
const{c} = obj;
//초기화도 가능하다  - 구조분해할당시 
const{e1 = 5} = obj;
const{y = 5} = obj;
console.log(e1);  // 5
console.log(c);  // 3
console.log(y); // obj에 y가 없으니 14번에서 초기화된 값이 출력

const arr = [1,2,3,4,5]
const[i,j, ...rest] = arr
console.log(i);
console.log(j);
console.log(rest); //[ 3, 4, 5 ]

 

참고사이트

 

구조 분해 할당 - JavaScript | MDN