ES6 에서는 구조분해를 도입하여 데이터 구조를 더 작고 단순화 시켰다.

객체 구조분해

const node ={
    type : "integer",
    name : "javascript"
}

let {type , name } = node;

console.log(type); // interger
console.log(name); // javascript

이름이 아닌 다른 지역 변수에 할당하기

const node ={
    type : "Identifier",
    name : "foo"
}

let { type : localType , name : localName } = node;

console.log(localType); // "Identifier"
console.log(localName); // "foo"

기본값 할당

const node = {
    type: "String",
    name: "test"
}

const {type , name , value } = node;

console.log(type); // String
console.log(name); // test
console.log(value); // undefined

하지만 기본값을 명시할 수가 있다.

const node ={
    type: "String",
    name: "test"
}

const {type , name , value = true } = node;

console.log(type); // String
console.log(name); // test
console.log(value); // true

객체 안에 존재하지 않는 프로퍼티 이름으로 지역변수를 명시하면 , 그 지역 변수에는 undefined 값이 할당 된다.

let node = {
    type : "String"
};

const {type : localType , name : localName = "bar" } =node;

console.log(localType); // String
console.log(node); // { type : 'String'}
console.log(localName); // bar
console.log(name); // error

위의 코드에서 localName 에는 기본값이 할당 되었지만,

name 에는 기본값이 할당 되어있지 않기 때문에 불러올려고 하면 에러를 발생하게 된다.

중첩된 개체 분해

let node = {
    type : "String",
    name : "test",
    loc : {
        start:{
            line:1,
            column:1
        },
        end:{
            line:1,
            column:4
        }
    }
};

let { 
    loc : {start
    }
} = node;

console.log(start.line); // 1
console.log(start.column); // 1

엄청나게 정말 많이 사용한다.

배열 구조 분해

let colors = ["red" , "green" , "blue"]

let [firstColor , secondColor] = colors;

console.log(firstColor); // red
console.log(secondColor); // green

만약 내가 2번째 요소만 가져올려고 한다면 ?

let colors = ["red" , "green" , "blue"];

let [, thirdColor] = colors; // green
console.log(thirdColor);

3번째 요소만 가져올려고할때도 같다.

let colors = ["red" , "green" , "blue"];

let [, ,thirdColor] = colors; // blue
console.log(thirdColor);

배열 -구조 분해 할당

let colors = ["red" , "green" , "blue"],
firstColor = "black",
secondColor = "purple";

[firstColor , secondColor] = colors;

console.log(firstColor); // red
console.log(secondColor); // green

배열 - swap

let a= 1,
b=2;

[a,b] = [b,a];

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

배열 - 기본값

let colors = ["red"];

let [firstColor , secondColor = "green"] = colors;

console.log(firstColor); // red
console.log(secondColor); // green

배열 - 나머지 요소

let colors = ["red" , "green" , "blue"];

let [firstColor , ...restColors] = colors;

console.log(firstColor); // red
console.log(restColors); // ['green','blue']

혼합된 구조 분해

let node = {
    type : "String",
    name : "test",
    loc : {
        start : {
            line : 1,
            column : 1 
        },
        end : {
            line : 1,
            column : 4
        }
    },
    range : [0,3]
};

let {
    loc : {start},
    range: [startIndex],
    range
} = node;

console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0
console.log(range); // [0,3]

매개변수 구조분해

function setCookie(name , value , {secure , path , domain , expires}){
    console.log(name); // type
    console.log(value); // js
    console.log(secure); // true
    console.log(path); // undefined
    console.log(domain); // undefined
    console.log(expires); // 60000
}

setCookie("type" , "js" , {
    secure: true,
    expires:60000
})