Arrow functions

Basic Example

• odds  = evens.map(function (v) {
    return v + 1;
  });

• odds  = evens.map(v => v + 1);

Multiple parameters

• nums = numbers.map(function (v, i) {
    return v + i;
  });

• nums  = numbers.map((v, i) => v + i);

Multiple actions

• let shift = false;
  shiftPartial = numbers.map(v => {
    shift = !shift;
    return shift ? v + 1 : v;
  });

It's a Trap

• obj = values.map(v => { [v]: v });

It can be a Trap

• obj = values.map(v => { [v]: v });

• obj = values.map(v => ({ [v]: v }));

Promises

• function timeout(duration = 0) {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, duration);
    });
  }

Async & Await

• async function work() {
    await timeout(10000);
    console.log('done');
  }
  
  work();

Rest Parameter

ES 5

ES 5

• function f (x, y) {
    var a = Array.prototype.slice.call(
      arguments, 2
    );
    return (x + y) * a.length;
  };
  f(1, 2, "hello", true, 7) === 9;

ES 6

• function f (x, y, ...a) {
    return (x + y) * a.length;
  }
  f(1, 2, "hello", true, 7) === 9;

Template literals

ES 5

• console.log(
    "Hello " + firstName + ",\n" +
    "greetings from GLaDOS"
  );

ES 6

• console.log(`
    Hello ${firstName},
    greetings from GLaDOS
  `);

Its a trap

• \n
  \tHello ${firstName},\n
  \tgreetings from GLaDOS\n

It can be a trap

• console.log(dedent`
    Hello ${firstName},
    greetings from GLaDOS
  `);

Iterators

ES 5

• function fibonacci(n) {
    if (n <= 1)="" return="" 1;="" fibonacci(n="" -="" +="" 2)="" ;="" }<="" pre="">

ES 5

• function fibonacci(n) {
    if (n <= 1)="" return="" 1;="" fibonacci(n="" -="" +="" 2)="" ;="" }<="" pre="">

ES 6 Iterable

• let fibonacci = {
    [Symbol.iterator]() {
      let pre = 0, cur = 1
      return {
        next () {
          [ pre, cur ] = [ cur, pre + cur ];
          return { done: false, value: cur };
        },
      };
    },
  };

ES 6 Iterable Usage

• for (let n of fibonacci) {
    if (n > 1000) break;
    console.log(n);
  }

Generators

ES 6 Iterable

• let fibonacci = {
    [Symbol.iterator]() {
      let pre = 0, cur = 1
      return {
        next () {
          [ pre, cur ] = [ cur, pre + cur ];
          return { done: false, value: cur };
        },
      };
    },
  };

ES 6 Generator

• let fibonacci = {
    *[Symbol.iterator]() {
      let pre = 0, cur = 1
      for (;;) {
        [ pre, cur ] = [ cur, pre + cur ];
        yield cur;
      }
    },
  };

ES 6 Generator

• let *fibonacci = {
    let pre = 0, cur = 1
    for (;;) {
      [ pre, cur ] = [ cur, pre + cur ];
      yield cur;
    }
  };

Generator vs Recursion

• Recursion often looks more readable
• Generator can easily use past values

Building an range array

• function range(start, end, step) {
    const range = [];
    while (start < end) {
      range.push(start);
      start += step;
    }
    return range;
  }
  for (let i of range(0, 10, 2)) {
    console.log(i) // 0, 2, 4, 6, 8
  }

ES 6 Generator

• function *range(start, end, step) {
    while (start < end) {
      yield start
      start += step
    }
  }
  for (let i of range(0, 10, 2)) {
    console.log(i) // 0, 2, 4, 6, 8
  }

Generator vs Array

• Array can look more readable
• Generator does not create unused values

Async Generator

• async function *getShifts() {}
    while (true) {
      this.buffer = await this.getNextPage();
      if (this.buffer) {
        while(this.buffer.length) {
          yield this.buffer.shift();
        }
      } else { return false; }
    }
  }

• this.buffer = await this.getNextPage();
  if (this.buffer) {
    while(this.buffer.length) {
      yield this.buffer.shift();
      if (this.buffer.length < 10) {
        this.buffer.push(
          ...await this.getNextPage()
        );
      }
    }
  } else { return false; }

Thats it

Whats next?

• List of features added lately to v8
• List of proposals
• Babel Playground
• TypeScript Playground
• CodePen