ES6 배워보기 2
2019. 1. 1. 20:39
간단히 객체 생성하기
function getObj() {
let name = "yoon"
const getName = function() {
return name;
}
const setName = function(newName){
name = newName
}
const printName = function(){
console.log(name)
}
return {getName,setName,name}
}
obj= getObj();
console.log(obj.getName)
Destructuring Array & Object
Array
let arr = ["yoon","kim","baek","lee"]
let[yoon,,baek] =arr;
console.log(yoon)
object
let obj = {
name : "yoon",
addr : "korea",
age : "35"
}
//특정 값만 호출할수 있음
//let {name, age} = obj;
//console.log(name, age)
//다른이름으로 재할당
let {name:myname , age:myage} = obj
console.log(myname,myage)
Destructuring을 활용하면 원하는 키값이나 배열 값을 원하는대로 뽑아 올수 있다.
더이상 array[0] 이런식으로 데이터를 뽑지 않아도 됨 배열에 값을 할당하고 그 값으로 데이터를 호출할 수 있다
Destructuring 을 활용하여 event 객체 전달 Destructuring을 활용하면 단순히 객체를 전달해서 호출하는 것 뿐만아니라.
원하는 객체 요소만 뽑아 호출이 매우 간편함
//
//기존 소스
document.querySelector("div").addEventListener("click",function(evt){
console.log(evt)
})
//Destructuring 활용 소스
document.querySelector("div").addEventListener("click",function({type,target}){
console.log(type ,target.tagName)
})
유일한 값을 저장해야할 때 Set을 이용해 유니크한 배열 만들기
추가 add
삭제 : delete
let myset = new Set();
console.log(toString.call(myset))
myset.add("yoon")
myset.add("kim")
myset.add("park")
myset.add("park")
myset.delete("yoon")
myset.forEach(function(v){
console.log(v) //result : kim,park
})
참조를 가지고 있는 객체만 저장하기 weakSet()
객체 형태를 중복없이 저장하려고 할 때 유용함
참조를 가지고 있는객체를 추가하는것은 정상
let arr = [1,2,3,4,5]
let ws = new WeakSet();
ws.add(arr)
console.log(ws)
참조를 가지고 있지 않는 객체를 추가할 경우 TypeError: Invalid value used in weak set 오류를 뿜어낸다.
let arr = [1,2,3,4,5]
let ws = new WeakSet();
ws.add(arr)
//참조가 없는 객체를 입력하는 것은 오류
ws.add(null)
ws.add(1111)
ws.add("1111")
console.log(ws)
key / value로 이루어진 자료구조 형태 Map & WeakMap
array를 보완한 자료 구조가 --> set 과 WeakSet이라면
Object를 보완한 자료구조가 --> map과WeakMap이다
WeakSet과 마찬가지로 WeakMap은 참조한 객체만을 추가할 수 있으며 참조가 없을 경우 오류가 나온다.
let wm = new WeakMap();
let myfunc = function(){}
//이함수가 얼마나 실행됐지를 알려고 할때?
wm.set(myfunc,0);
let count = 0;
for(let i=0; i<10; i++ ){
count = wm.get(myfunc)
count++;
wm.set(myfunc,count)
}
console.log(wm.get(myfunc)) // function => 10
console.log(wm.has(myfunc)) //true
myfunc = null
console.log("가비지 컬랙터 사용 후 : " + wm.has(myfunc)) //false
응용해보기 우선 일반 예제
//공간을 계산 예제 일반
function Area(height,width) {
this.height= height;
this.width = width;
}
Area.prototype.getArea = function(){
return this.height * this.width;
}
let myarea = new Area(10,20)
console.log(myarea.getArea()) //result == 200;
console.log(myarea.height) //result == 10
console.log(myarea.width) //result == 20
weakMap을 활용하여 프라이빗한 객체를 생성할 수 있음
//공간을 계산 예제 WeakMap활용하여 프라이빗한 객체를 만들수 있다
//다만 값을 전역 변수영역에 저장해야한다는 단점이 있음
let wm = new WeakMap();
function Area(height,width) {
wm.set(this,{height,width})
}
Area.prototype.getArea = function(){
const {height,width} = wm.get(this)
return height * width;
}
let myarea = new Area(10,20)
console.log(myarea.getArea()) //result == 200;
//접근 불가능
console.log(wm.get(this)) //result == undefined
console.log(myarea.width) //result == undefined
obj를 이용한 예제
// Object를 활용한 예제
const obj = {};
function Area(height,width) {
obj.height= height;
obj.width = width;
}
Area.prototype.getArea = function(){
return obj.height * obj.width;
}
let myarea = new Area(10,20)
console.log(myarea.getArea()) //result == 200;
console.log(obj.width)//result == 20;
console.log(obj.height)//result == 20;
화살표 함수
대표적인 콜백함수인 setTimeout함수를 통해 화살표 함수를 시작해보자
setTimeout(function(){
console.log(" 일반 타임아웃 ")
},1000)
간단하다 function 대신 => 를 넣어주면 된다.
setTimeout(()=>{
console.log("---->>")
},1000)
map을 활용한 예제
let newArr = [1,2,3,4,5].map(function(value,index,obj){
return value * 2
})
console.log(newArr)
역시 function 대신 => 를 넣어서 변환할 수 있다.
리턴을 넣어도 되지만 빼도 정상 작동하는 것을 확인 할 수 있다.
let newArr2 =[1,2,3,4,5].map((v) => v * 2 )
console.log(newArr)
지금까지 공부한 것을 토대로 봤을 때 ES6는 엄청 편리하다
그러나!
아직 인터넷 익스플로러에서 지원이 미비하기 때문에 BABEL을 이용하여 ES5로 변환하여 사용해야 한다는 것을 잊으면 안된다.
어허이