ES6 - Destructuring, Set, Map

모던 자바스크립트(javascript) 개발을 위한 ES6 강좌를 수강하면서 새롭게 알게 된 점이나 궁금했던 내용들을 적어보려고 합니다!

1. Destructuring

배열

let data = ["january", "march", "july", "december"];
let [winter,,summer] = data;

console.log(winter, summer); // january, july

객체

let obj = {
  name : "jacob",
  sport : "soccer",
  age : "24"
}

1.
let {name, age} = obj;
console.log(name, age); // jacob 24

2. 다른 이름으로 저장을 하여 사용이 가능하다.
let {name : myName, age : myAge} = obj;
console.log(myName, myAge); // jacob 24

2. Set & WeakSet

Set

• 중복없이 유일한 값을 저장하려고 할 때, 또는 값이 이미 존재하는지 확인할 때 유용하다.
• 배열과 유사하게 사용된다.
• 모든 타입이 저장이 가능하다.

let mySet = new Set();
mySet.add("january");
mySet.add("july");
mySet.add("january");
mySet.add("december");

mySet.forEach(function (v) {
  console.log(v);
}); // january july december

mySet.has("january"); // true
mySet.has("april"); // false
mySet.size; // 3
mySet.entries(); // {['january', 'january'], ['july', 'july'], ['december', 'december']}
mySet.keys(); // {'january', 'july', 'december'}
mySet.values(); // {'january', 'july', 'december'}
mySet.delete("january");
mySet.clear();

console.log(mySet); // Set {}

※ 여기서 잠깐!! .entries()란?
Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환한다.

WeakSet

• Set과 동일하게 중복을 허용하지 않는다.
• 참조를 가지고 있는 객체만 저장이 가능하다.
  => 그게 무슨 의미가 있어?
  -> 만약에 객체가 null로 되거나 필요가 없어지면 이 객체는 garbage collection 대상이 된다.
  -> WeakSet에서도 그 정보가 자동으로 없어지게 된다.
  -> 참조를 모니터링 해준다! 라고 생각하자

let arr = [1, 2, 3, 4];
let myWeakSet = new WeakSet();

1.
myWeakSet.add(arr);
myWeakSet.add(1); // TypeError: Invalid value used in weak set
myWeakSet.add("1"); // TypeError: Invalid value used in weak set
myWeakSet.add(function () {});
console.log(myWeakSet); // WeakSet {f, Array(4)}

2.
let arr = [1, 2, 3, 4];
let season = ["봄", "여름", "가을", "겨울"];
let mixArr = [arr, season];

let myWeakSet = new WeakSet();

myWeakSet.add(arr);
myWeakSet.add(season);
myWeakSet.add(mixArr);

console.log(myWeakSet); // WeakSet {{…}, Array(4), Array(4)}

season = null;

console.log(myWeakSet); // WeakSet {{…}, Array(4), Array(4)}

console.log(myWeakSet.has(arr), myWeakSet.has(season)); // true false

WeakSet() 상에서는 저장을 하고 있는 것 처럼 보이지만 has를 통해 결과를 보면 똑같지 않다는 것을 알 수 있다.

※ 여기서 잠깐!! garbage collection이란?
자바스크립트는 도달 가능성이라는 개념을 사용해 메모리 관리를 수행한다.
도달 가능성 : 어떻게든 접근하거나 사용할 수 있는 값. (더 자세한 정보!)
도달 가능한 값은 메모리에서 삭제되지 않는다.

• 자바스크립트 엔진 내에서 garbage collection가 끊임없이 동작하며 모든 객체를 모니터링 하는데, 도달할 수 없는 객체는 삭제한다.

3. Map & WeakMap

Map

• key, value 구조를 가지고 있다.
• 객체와 비슷하게 사용된다.
• 키가 문자열 뿐만 아니라 어떤 값이어도 상관 X(객체도 가능)
• Map의 키는 정렬된다 -> Map의 순회는 삽입순으로 이루어짐.

let myMap = new Map(); // key, value
myMap.set("jacob", "Lee");
myMap.get("jacob"); // Lee
myMap.has("jacob"); // true
myMap.has("Lee"); // false
myMap.size; // 1

myMap.set(function () {}, 1);
myMap.entries(); // [Map Entries] { [ 'jacob', 'Lee' ], [ [Function], 1 ] }
myMap.keys(); // [Map Iterator] { 'jacob', [Function] }
myMap.values(); // [Map Iterator] { 'Lee', 1 }
myMap.delete("jacob");

console.log(myMap); // Map { [Function] => 1 }
myMap.clear();

WeakMap

• WeakMap은 키가 객체인 Map이다.
• WeakSet과 비슷하다.
  -> 참조를 모니터링 해준다!
• key, value 구조

let myWeakMap = new WeakMap();
let myfunc = function(){};

myWeakMap.set(myfunc, 0);

console.log(myWeakMap); // WeakMap {ƒ => 0}
console.log(myWeakMap.get(myfunc)); // 0

myfunc = null;

console.log(myWeakMap); // WeakMap {ƒ => 0}
console.log(myWeakMap.get(myfunc)); // undefined

WeakMap 클래스 인스턴스 변수 보호하기

class gugudan {
  constructor(number1, number2) {
    this.number1 = number1;
    this.number2 = number2;
  }
  mutiple() {
    return this.number1 * this.number2;
  }
}

let n = new gugudan(1, 9);
console.log(n.mutiple()); // 9
console.log(n.number1); // 1

number1의 값을 바로 접근할 수 있다. 만약 숨기고 싶다면 어떻게 해야 할까?
밑에 코드처럼 WeakMap을 사용하면 된다!
클래스에서 생성한 g라는 객체를 통해서는 number1, 2 값에 접근할 수 없다.

const myWeakMap = new WeakMap();

class gugudan {
  constructor(number1, number2) {
    myWeakMap.set(this, { number1, number2 });
  }
  mutiple() {
    const { number1, number2 } = myWeakMap.get(this);
    return number1 * number2;
  }
}

let g = new gugudan(1, 9);
console.log(g.mutiple()); // 9
console.log(g.number1); // undefined

+) 추가 정보
console.log(myWeakMap.get(g)); // { number1: 1, number2: 9 }
console.log(myWeakMap.has(g)); // true
g = null;
console.log(myWeakMap.get(g)); // undefined
console.log(myWeakMap.has(g)); // false

참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Keyed_collections
https://www.zerocho.com/category/ECMAScript/post/576cad515eb04d4c1aa35077
http://chanlee.github.io/2016/08/15/hello-es6-part-3/
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries