이 글의 예제 코드는 THREE.JS 공식 사이트의 EXAMPLES에서 제공되는 코드를 이해하고 제 나름대로의 코드로 재구성한 것입니다.
[THREE.JS-EX] Shader
Javascript의 디스트럭처링(Destructuring)
자바스크립트의 디스트럭처링은 객체와 배열에 적용이 가능한데요. 디스트럭처링은 객체와 배열을 구성하는 개별 요소를 독립적인 상수나 변수에 저장하는 방법입니다.
먼저 객체에 대한 디스트럭처링 예제는 다음과 같습니다.
const Dip2K = {
name: "김형준",
company: {
name: "GEOSERVICE",
contacts: {
address: "에이펙센터 208",
telephone: "02-525-0421"
}
}
}
const { name } = Dip2K
console.log(name) // 김형준
const { address, telephone } = Dip2K.company.contacts
console.log(address, telephone) // 에이펙센터 208 02-525-0421
const { name: companyName} = Dip2K.company
console.log(companyName) // GEOSERVICE
const { alias = "닌자" } = Dip2K.company
console.log(alias) // 닌자
다음은 배열에 대한 디스트럭처링 예제입니다.
const Dip2K = [ "김형준", "지오서비스", "hjkim@geoservice.co.kr" ] const [name, company, email] = Dip2K //console.log(name, company, email) // 김형준 지오서비스 hjkim@geoservice.co.kr const [name2, company2 ] = Dip2K //console.log(name2, company2) // 김형준 지오서비스 const [name3, ...others] = Dip2K console.log(name3, others) // 김형준 (2) ['지오서비스', 'hjkim@geoservice.co.kr']
Javascript, Object 이 놈을 알아야 그 놈을 잡는다.
Javascipt에서 Object는 모든 객체의 슈퍼 타입(최상위 타입)입니다. Object를 더 많이 알수록 이 놈을 통해 파생된 그 놈들을 더 잘.. 알 수 있습니다. 이 글은 Object의 내용중 유용한 정적 매서드 몇가지를 살펴봅니다.
먼저 객체의 키(key)만을 배열로 가져오는 keys입니다.
const obj = {
"key0": "value0",
"key1": "value1",
"key2": "value2"
}
const keys = Object.keys(obj)
console.log(keys) // ["key0", "key1", "key2"]
다음은 값(Value)만을 배열로 가져오는 values입니다.
const obj = {
"key0": "value0",
"key1": "value1",
"key2": "value2"
}
const values = Object.values(obj)
console.log(values) // ["value0", "value1", "value2"]
그럼 키와 값 모두를 배열로 가져오기 위해서는? 바로 entries 정적 매서드를 사용하면 됩니다.
const obj = {
"key0": "value0",
"key1": "value1",
"key2": "value2"
}
const entries = Object.entries(obj)
console.log(entries)
/*
[
["key0", "value0"],
["key1", "value1"],
["key2", "value2"]
]
*/
이제 반대로 위의 entries 정적 매서드로 가져온 결과를 통해 다시 원래의 객체를 만들고자 한다면? 바로 fromEntries 정적 매서드를 사용하면 됩니다.
const arr = [
["K1", "V1"],
["K2", "V2"]
];
const obj = Object.fromEntries(arr);
console.log(obj); // {K1: "V1", K2: "V2"}
다음 예제는 지금까지와는 다른 흐름인데요. 객체를 복사하기 위한 Javascript 적인 방법은 여러가지가 있는데요. 그 중 Object의 assign 정적 매서드를 사용하는 방법이있습니다.
const a = {}
b = Object.assign(a, obj)
console.log(b, a === b, a === obj)
// {key0: "value0", key1: "value1", key2: "value2"} true false