After ES2015 (1)

ES2015 이후의 문법 변화를 살펴보자

이 글을 읽으면

  • es2015 이후에 새롭게 추가된 문법에 대해 알 수 있습니다.

ES2015

ES2015 에서는 큰 언어적 변화가 있었습니다.

이 중에서 저에게 조금 낯선것들을 살펴 보겠습니다.

WeakMap

가비지 컬렉터는 도달가능 하지 않은 값들은 메모리에서 해제합니다. 하지만 아래와 같은 경우에는 array[0]이 해당 객체를 참조하고 있기 때문에 메모리에서 떨어져 나가지 않습니다.

let john = { name: "John" };

let array = [ john ];

john = null; // 참조를 null로 덮어씀

console.log(array[0]); // { name: "John" };

Map은 내부적으로 배열을 사용하기 때문에, Map도 값을 유지합니다.

let john = { name: "John" };

let map = new Map();
map.set(john, "he"); // 객체를 key로 쓴 이유는 아래 WeakMap과 비교하기 위함입니다.

john = null; // 참조를 null로 덮어씀

for(let obj of map.keys()){
  console.log(JSON.stringify(obj)); // { name: "John" }
}

하지만! WeakMap은 값을 유지하지 않습니다. 내부적으로 어떻게 저장이 되는지는 모르겠지만, 가비지 컬렉터가 메모리를 해제합니다.

let john = { name: "John" };

let weakMap = new WeakMap();
weakMap.set(john, "...");

john = null; // 참조를 덮어씀

// 더이상 객체를 가져올 방법이 없습니다!

Map은 keys(), values() 이런 함수가 있어서 john에 null을 넣어도 값을 가져올 수는 있는데, WeakMap은 keys(), values() 이런 순회 함수가 없습니다.

어디에 쓰지?

이런식으로 부가적인 정보를 맵핑할때 사용하면 좋습니다.


let visitsCountMap = new WeakMap(); // 위크맵에 사용자의 방문 횟수를 저장함

// 사용자가 방문하면 방문 횟수를 늘려줍니다.
function countUser(user) {
  let count = visitsCountMap.get(user) || 0;
  visitsCountMap.set(user, count + 1);
}

본체가 사라지면 부가적인 정보도 같이 사라지기 때문에, 메모리 측면에서 유리합니다!

Proxy

Proxy는 객체를 감시할때 사용합니다.

var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};

var p = new Proxy(target, handler);
console.log(p.world); // Hello, world!

ES2016

ES2017

String.prototype.padStart()

padStart는 앞에서 부터 체운다.

const a = "aa".padStart(10, "b");

// bbbbbbbbaa => b가 8개 a가 2개 도합 10개
// 즉 길이가 10이 될때까지 앞에서 부터 b를 체운다

padEnd는 반대이다.

Trailing comma

// Array
let arr = [ 1, 2, ];

// Objects
let obj = { 
  a: 95, 
  b: 23,
};

// 끝에 콤마가 와도 괜찮다

ES2018

ES2019

ES2020

Leave a Reply

Your email address will not be published.