es6-practice

by Yohan Yang

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ES6</title>
</head>
<body>
  <div class="container">
    <div class="row mt-4">
      <div class="col">
        <div class="list-group">
          <a href="#" id="a1" class="list-group-item list-group-item-action">Java</a>
          <a href="#" id="a2" class="list-group-item list-group-item-action">Javascript</a>
          <a href="#" id="a3" class="list-group-item list-group-item-action">Python</a>
          <a href="#" class="list-group-item list-group-item-action">Swift</a>
          <a href="#" class="list-group-item list-group-item-action">Objective-C</a>
        </div>
      </div>
      <div class="col">
        <p>Contents</p>
      </div>
    </div> 
    
    <div class="row mt-4">
      <div class="col">
        <div id="holder"></div>
      </div>
    </div>
  </div>
</body>
</html>

JavaScript

// ----------------------------------------------------------
// weakset
// 참조를 가지고 있는 객체만 저장이 가능
// 객체형태를 중복없이 저장하려고 할때 유용

/* let arr = [1,2,3,4];
let arr2 = [5,6,7,8];
let obj = {arr, arr2};

let ws = new WeakSet();

ws.add(arr);
ws.add(arr2);
ws.add(obj);

arr = null;

console.log(ws);
console.log(ws.has(arr), ws.has(arr2)); */

// ----------------------------------------------------------
// Map & WeakMap
// Array -> Set, weakSet /  Object -> Map, WeakMap
// Map 은 key / value

/* let wm = new WeakMap();
let myfun = function(){};
// 이 함수가 얼마나 실행됐지 ?

wm.set(myfun, 0);
console.log(wm);

let count = 0;
for(let i = 0; i < 10; i++) {
  count = wm.get(myfun);
  count++;
  wm.set(myfun, count);
}

console.log(wm.get(myfun));

myfun = null;
console.log(wm.get(myfun));
console.log(wm.has(myfun)); */

// ----------------------------------------------------------
// WeakMap 활용

/* const wm = new WeakMap();

function Area(height, width) {
  // this.height = height;
  // this.width = 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());
console.log(myarea.height); */

// ----------------------------------------------------------
// 실습2

/* const SETTING = {
  count: 6,
  max: 45
};

const balls = new Set();

function getRandomNumber(maxNumber) {
  return Math.floor((Math.random() * maxNumber) + 1);
}

while(balls.size < SETTING.count) {
  balls.add(getRandomNumber(SETTING.max));
}

console.log(...balls); */

/* for(let i = 0; i < 100; i++) {
  console.log(getRandomNumber(SETTING.max));
}
 */
 
 
// -----------------------------------------
// template
// json 으로 응답을 받고, javascript object 로 변환후 데이터 조작 후 DOM에 추가

/* const data = [
  {
    name: 'coffee-bean',
    order: true,
    items: ['americano', 'milk', 'green-tea']
  },
  {
    name: 'starbucks',
    order: false
  }
];

const template = `
<h1>welcome...