Today Yurim Learned

# ES2015

# ES2015

  • 전엔 ES6라고도 불렸지만, ES2015라고 불린다.

# Let

  • 가장 가까운 블록(if, else, for, while...)에 스코프되고, 호이스팅 되지 않는다.
userNameArr = ['a', 'b', 'c', 'd']
for(let i in userNameArr) {
    _fetchProfile(userNameArr[i], function() {
        console.log(userNames[i]); // let말고 var를 쓰면 'd'만 4번 출력된다. 호이스팅되어서.
    })
}

let foo = 'haha';
foo = 'kaka'; // Reassigning은 가능
let foo = 'popo'; // Redeclaring은 불가능!

function koo() {
    let foo = 'koko'; // 다른 스코프에서 redeclaring은 가능
}

# class

'use strict';

class User {
    constructor(name) {
        this._name = name;
    }

    say() {
        return '나는 ' + this._name;
    }
}
class Admin extends User {
    say() {
      return '관리자: ' + super.say();  
  }
}

var user = new User('유르무르');
var admin = new Admin('엄마미');

# Function Arguments

'use strict';

function loop(func, count=3) {
    for(var i=0; i<count; i++) {
        func();
    }
}

function sum(...numbers) {
    return numbers.reduce(function(a, b) {return a+b});
}

loop(function(){console.log('뿅')}); // 뿅 뿅 뿅
console.log(sum(1,2,3,4)); // 10

# Arrow Function

이벤트 구동 처리(DOM클릭시 처리, XHR 리퀘스트 완료되면 처리)가 잦아서, 기존엔 callback, event listener등을 넘기곤 했다. ES2015에선 Arrow Function으로 this에 대한 번거로움 해소

//ES5
var ClickCounter = {
  _count: 0,

  start: function(selector) {
    var node = document.querySelector(selector);
    node.addEventListener('click', function(evt){
      this._count++;
  }.bind(this));
}
};

//ES6

var ClickCounter = {
  _count: 0,

  start: function(selector) {
    var node = document.querySelector(selector);
    node.addEventListener('click', (evt)=>{
      this._count++;
  });
}
};

# Promise

비동기 처리를 행하는 함수는 Promise를 반환, 부른 쪽에는 Promise에 콜백 함수를 등록.

// ES5
function sleep(callback, msec) {
    setTimeout(callback, msec);
}
sleep(function() {
    console.log('wake!');
}, 1000);

// ES6
function sleep(msec) {
    return new Promise(function(resolve, reject) {
        setTimeout(resolve, msec);
    });
}

sleep(1000).then(function() {
    console.log('wake!');
    // 반환된 promise에서 1초가 흐르면(then), 'wake!'
});

# Generator

함수 처리 안의 임의의 장소에서 처리를 중단/재개할 수 있는 구조 제공(코루틴, co-rutine) 무한 리스너나 이터레이터 등 구현 가능. Generator랑 Promise를 조합해서 비동기 처리를 동기처리처럼 직렬로 적을 수 있게 됨.

// co: generator랑 promise사용해 비동기를 직렬로 적을 수 있는 라이브러리
co(function*() {
    console.log('sleep...');
    yield sleep(1000);
    console.log('wake');
    });

# toto님 스터디

  • const, let, var. 쨌든 바벨과 함께 써야한다.
  • for of하면 인덱스 아니고 바로 나온다.
  • Symbol
  • generator
  • 코루틴?
  • class

# babel

babel test.js
babel test.js | node

# Refer

← ES6 제너레이터(Generators) →