터디 - 구조분해(5장)
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 : "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 } = 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 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
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
})
Author And Source
이 문제에 관하여(터디 - 구조분해(5장)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@ash3767/자바스크립트-스터디-구조분해
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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
})
Author And Source
이 문제에 관하여(터디 - 구조분해(5장)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ash3767/자바스크립트-스터디-구조분해저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)