js-es6

ECMAScript 6構文

Arrow

functionを=>と表現できるようになりました。

es5
var add= function(a,b){
  return a + b;
}

es6
var add = (a,b) => {
  return a + b;
}

var add = (a,b) => a + b;

var square = n = > n + n;

var john={
  name;"john",
  helloLater=function(){
    setTimeout(()=>{
      console.log(this.name);
    },1000);
  }
}

es5
function Person(name) {
  this.name=name;
}

Person.prototype.greet=function(){
  console.log(this.name);
}

Person.crate=function(name){
  return new Person(name);
}

es6
class Person {
  constructor(name) {
    this.name=name;
  }

  greet(){
    console.log(this.name);
  }

  static create(name){
      return new Person(name);
  }
}

class  Author extends Person {

  constructor(name,book) {
    super(name);
    this.book=book;
  }

  greet=(){
    super.greet();
    console.log(this.book);
  }

  static create(){
    return new Author(name,book)
  }
}

Block Scoped Binding

function blockScope() {

  let a = "hello";//変数aをブロックスコープで定義

  if (true) {
    //スコープは、ifブロック内のみ
    let a = "bye";
    console.log(a);// byeが出力
  }

  console.log(a); //helloが出力
}

Computed Property Names

var x = 0;
var obj = {
  ["prop_" + x]: 'a',
  ["prop_" + (x + 1)]: 'b',
  ["prop_" + (x + 2)]: 'c'
};

console.log(obj);

Computed Property Names

function increment(x, y = 1) {
  return x += y;
}

console.log(increment(10,5)); //15
console.log(increment(20)); //21