JavaScript

Key concepts : this value

function foo(){
  console.log(this); // What is `this` ?
} // Looking at this, we can't say.

Key concepts : this value

• As a function

  foo(); //this === window

• As a method

  bar.foo(); //this === bar

• As a constructor

  new foo(); //this === [new built and returned object]

• With call & apply

  
  	foo.call(baz); //this === baz
  	foo.apply(baz); //this === baz

Exceptions : Function.protoype.bind and Arrow function expressions

ES6 : Generators

Special functions that generate iterators

yield provoke partial returns

Can be resume with next method

function* greatGenerator(){
  yield "Clermont'ech";
  yield "is great";
  for (var i = 0; i < 3; i++){
    yield i*2;
  }
}

var iterator = greatGenerator();
iterator.next(); // "Clermont'ech"
iterator.next(); // "is great"
iterator.next(); // 0
iterator.next(); // 2

ES6 : Generators

Generators introduce a new expression syntax

//Generator of positive integers iterator
function* posIntGenerator(){
    var value = 0;
    while (true){
        yield value++;
    }
}

var posIntIterator = posIntGenerator();

// New expression syntax below
var posIntBy2Iterator = (anInt * 2 for (anInt in posIntIterator));

posIntBy2Iterator.next(); // 0
posIntBy2Iterator.next(); // 2
posIntBy2Iterator.next(); // 4
posIntBy2Iterator.next(); // 6

Other ES6 features

• Class
• Spread operators
• const & let
• Default parameters
• Rest parameters
• Proxy
• Set & Map
• Quasi Literals
• Typed Object
• more Math methods
• Promises

ES6 : Class

Class keyword but still Prototype inheritance

Sugar syntax to replace framework machinery

class Gentleman extends Dude {
    constructor(name) {
      super(name);
      this.sayHello();
    }

    sayHello() {
      console.log('Hello Sir');
    };
  }
}

ES6 : Spread operators

Expression expands in places
where multiple elements are expected

function sum(a, b, c, d) {
  return a + b + c + d;
}

var expandable = [4, 12, 7, 19];
sum(...expandable); // 42

var expandable2 = [-5, 8];
sum(1, ...expandable2, 20); // 24

var expandable3 = [...expandable, ...expandable2];
//[4, 12, 7, 19, -5, 8]

ES6 : const & let

Brings block scope variables and constantes

if (x) {
  let foo;
  const bar = 10;
  // `foo` and `bar` are defined inside the if block

  bar = 11; // Error
  //the value of `bar` cannot change
}

ES6 : default parameters

You (may) used to write

function f(name, age) {
  age = age || 18;
}

You will write

function f(name, age = 18) {
}

ES6 : Rest parameters

Representation of an indefinite number
of tailing arguments as an array

function sum(a, b, ...args) {
  //args is an Array
  var restSum = args.reduce(function(prev, current){
    return prev + current;
  }, 0);

  return a + b + restSum;
}

sum(1, 2);        // 3
sum(1, 2, 8);     // 11
sum(1, 2, 8, 12); // 23
					

ES6 : Promises

Until now promises were provided by libraries
( jQuery, Q, Bluebird)

Promises are built-in ES6, they :

• Resolve asynchronous calls concurrency
• Simplify complex asynchronous code
• Help to adhere the 1st rule of object calisthenics

ES6 : Proxy

Proxies can change the default behavior
of an object

var proxyTraps = {
  get: function(obj, prop) {
    return 42;
  }
};

var person = new Proxy({ age : 100 }, proxyTraps);
console.log(person.age); // 42
person.age = 18;
console.log(person.age); // 42

ES6 : Map & WeakMap

Maps and WeakMaps are key/value maps

Where keys are objects

≠ JS native object : keys are string

var wm = new WeakMap(),
    trivialeObject = {
      'Clermont' : 'Ferrand'
    };

wm.set(trivialeObject, 42);
wm.get(trivialeObject);    // 42
wm.has(trivialeObject);    // true
wm.delete(trivialeObject);
wm.has(trivialeObject);    // false

ES6 : Promises

An example from jQuery with AJAX calls

$.getJSON('customers.json', function(customers){
  $.getJSON('products.json', function(products){
    console.log('We have ' + products.length + ' products');
    console.log('and' + customers.length + ' customers');
  });
});
//Synchronous sequence of async calls : bad pattern
					

var customersPromise = $.getJSON('customers.json'); //Returns a promise
var productsPromise = $.getJSON('products.json'); //Returns another promise

$.when(customersPromise, productsPromise)
 .then(function(customers, products){
    // Called only if both promises are resolved
    console.log('We have ' + products.length + ' products');
    console.log('and' + customers.length + ' customers');
});