Full Stack Web Development Bootcamp

Arrow Functions

Four versions:

    (arg1, arg2, ...) => expr
    (arg1, arg2, ...) => { stmt1; stmt2; ... }
    singleArg => expr
    singleArg => { stmt1; stmt2; ... }

Arrow Functions

BEFORE (ES5)

var self = this;
this.element.addEventListener('click', function(event) {
  self.registerClick(event.target.id);
});

Arrow Functions

AFTER (ES2015)

this.element.addEventListener('click', event => {
  this.registerClick(event.target.id);
});

Arrow Functions

BEFORE (ES5)

[1,3,4,5,6,7].filter(function(n) { return n % 2 } )
  .map(function(n, i) { return n + i } ); 
// [1, 4, 7, 10]

Arrow Functions

AFTER (ES2015)

[1,2,3,4,5,6,7].filter(n => n % 2).map((n, i) => n+i);

Block Scope

BEFORE (ES5)

var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
  // i from 0 to 2
}
i; // 3
{
  var TEMPERATURE = 32;
  TEMPERATURE = 16;
  TEMPERATURE // 16
}
TEMPERATURE; // 16

Block Scope

AFTER (ES2015)

var arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  // i from 0 to 2
}
i; // ReferenceError: i is not defined!
{
  const TEMPERATURE = 32;
  TEMPERATURE = 16;
  TEMPERATURE; // 32
}
TEMPERATURE; // ReferenceError: TEMPERATURE is not defined!

Template Strings

• Enclosed by back-ticks ``
• Multi-line support
• Can contain placeholders ${ expression }

`string text`
­
`string text line 1
 string text line 2`
­
`string text ${expression} string text`

Template Strings

BEFORE (ES5)

var name = "juanma";
var getSuitableDrink = function(who) {
  return who === 'juanma' ? 'beer' : 'cocktail'
};
­
console.log( 'Hello, '+name+'!\nFancy a '+getSuitableDrink()+'?' );
­
// Hello, juanma!
// Fancy a beer?

Template Strings

AFTER (ES2015)

var name = "juanma";
var getSuitableDrink = function(who) {
  return who === 'juanma' ? 'beer' : 'cocktail'
};
­
console.log( `Hello, ${ name }!
  Fancy a ${ getSuitableDrink() }?` );

Enhanced Object Literals

• Shorthand property names
• Shorthand methods names
• Dynamic property names
• getter and setter
• Examples

Enhanced Object Literals

var a = "foo",
    b = 42,
    c = {};
­
function myMethod() {
    console.log('ooOoh!');
}
­
// Shorthand property names
var o = { a, b, c };
­
// Shorthand method name and dynamic property name
var o2 = {
  myMethod,
  ['myPropertyNum'+b]: 'bar'
}

Enhanced Object Literals

var messages = {
  get latest () {
    if (this.log.length == 0) return undefined;
    return this.log[this.log.length - 1]
  },
  set current (str) {
    this.log[this.log.length] = str;
  },
  log: []
}
­
messages.current = "hey!";
messages.latest // hey!

Default parameters

function f(x, y=12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}
­
f(3) === 15;
f(3, undefined) === 15;

Destructuring Assignment [1]

• Array destructuring
• Object destructuring
• Examples

Destructuring Assignment

var [first, second, third, , fifth = 5] = [1, 2];
first // 1
second // 2
third // undefined
fifth // 5
­
[second, first] = [first, second] // swap values
first // 2
second // 1

Destructuring Assignment

var customer = {
  name: 'John',
  surname: 'Doe',
  dateOfBirth: {
    year: 1988
  }
};
­
var {name, surname, dateOfBirth: {year}, children} = customer;
name // 'John'
surname // 'Doe'
year // 1988
children // undefined