React를 위한 ES6 핵심정리 2

React를 위한 추가적인 ES6 문법들

React를 하기위한 ES6문법 : http://voidmainvoid.tistory.com/67

14. String enhancements

startsWith() 
endsWith() 
includes()

 

 15. Array enhancements ‐ for/of

var arr = [1,2,3,undefined, null, ""]; 
Array.prototype.getIndex = function() {};
 
for ( let value of arr) {
    console.log(value); 
}
 
//function까지 노출된다.
for ( let value in arr) {
    console.log(arr[value]); 
}

 15. 사실 for/of는 string에서도 사용가능!!

var arr = "hello, world";
for ( let value of arr) {
    console.log(value); 
}

 16. Array enhancements ‐ methods

from 메서드를 통해서 가짜 배열을 진짜 배열로 취급하기 쉽게 됐다(?)

find 메서드 라는 것도 생겼음.

 17. set

중복없이 유일한 값만 저장됨. 어떤 값이 존재하는지 체크할 때 유용함.

let mySet = new Set();
undefined
mySet.add("eagles"); 
mySet.add("tigers");
 
Set(2) {"eagles", "tigers"}
mySet.has("eagles");
true 
mySet.delete("eagles"); 
true
mySet.has("eagles"); 
false

 18. weakSet

참조를 가지고 있는 객체형태만 저장 가능함. 저장된 객체가 더 이상의 참조를 가지지 않을때는 가비지컬렉션의 대상이 됨.

let arr = [1,2,3,4];
let arr2 = [...arr,5,6,7,8,9]; 
let obj = {arr, arr2};
 
let ws = new WeakSet(); 
ws.add(arr);ws.add(arr2);ws.add(obj);
 
console.log(ws);
 
arr.push(555); 
delete obj.arr2; 
console.log(ws); // 참조가 유지됨으로 변경이 반영됨.
 
arr2 = null; 
console.log(ws.has(arr2)); // 불필요한참조는 가비지컬랙션 대상으로 취급

추가활용 참고 : https://esdiscuss.org/topic/actual-weakset-use-cases 

19. map and weakmap

set과 달리 키/값 구조로 저장됨. weakMap의 경우 키값은 weakSet과 같이 객체만 가능함.

let wm = new WeakMap(); 
let fun = function() {}; 
wm.set(fun,0);
 
let count = 0;
 
for(let i=0;i<10;i++){ 
    count = wm.get(fun); 
    count++; 
    wm.set(fun,count);
}
console.log(wm.get(fun)); //10
 
fun = null; 
console.log(wm.has(fun)); //false

 20. WeakMap 을 이용한 클래스 생성.

private 변수 만들기. 객체가 필요없어질때는 역시 가비지 컬렉션 대상이 됨.

const wm = new WeakMap(); 
class Rectangle {
    constructor(height, width) {
        wm.set(this, {height,width}); 
    }
    get area() {
        return this.calcArea(); 
    }
    calcArea() {
        const {height, width, size} = wm.get(this);
        return height * width; 
        }
    }
}
const square = new Rectangle(10, 10); 
const square2 = new Rectangle(10, 20); 
console.log(square.area, square2.area);

클래스 참고 url : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes

 21.prototype ‐ setPrototypeOf

Object.create 말고도 prototype객체에 넣는 방법이 ES6에 추가됨.

var healthObj = { 
    showHealth : function() {
        console.log("오늘은 " + this.lastTime + "까지 "+ this.name + " 운동을 하셨네요");
    } 
}
var myHealth = { 
    name : "달리기 ", 
    lastTime : "23:10" 
};
Object.setPrototypeOf(myHealth, healthObj); 
console.log(myHealth);

22. prototype객체 ‐ Object.assign()

var healthObj = { 
    showHealth : function() {
        console.log("오늘은 " + this.lastTime + "까지 " + this.name + " 운동을 ");
    } 
}
var myHealth = Object.assign(Object.create(healthObj), { 
    name : "달리기",
    lastTime : "23:10" }
);

 

End of Document.