ES6 Walkthrough

Andrei Antal

JSHacks Sessions

Contents

JavaScript History
Block scope variables
Template strings
Enhanced objects
Symbols
Arrow functions
Classes
Set and Map
Destructuring
Spread and rest
Modules
Iterators and Generators
Other ES6 features

BUT FIRST...

Who are we

JSHacks community

JAVASCRIPT HISTORY

JavaScript History

1991
- CERN - Tim Berners-Lee - WWW
1993
- Mosaic - the first modern browser
1994
- Mosaic Netscape (codename Mozilla - Mosaic killer)
- Renamed to Netscape Navigator
1995
- Brendan Eich - Mocha - first prototype version of JavaScript (done in only 10 days!)
- It first shipped as LiveScript than renamed to JavaScript

1996
- JScript - Microsoft's reversed engineered version of JavaScript shipped with Internet Explorer 3
- beginning of the browser wars
- Netscape takes JavaScript to ECMA for standardization
1997
- ECMA-262 (ECMAScript)
1998
- ECMAScript 2
1999
- ECMAScript 3

JavaScript History

2004
- Firefox was released by Mozilla
2005
- Mozilla (Brendan Eich) and Macromedia began to work on ECMAScript 4 => ActionScript 3
- ES4 was never completed
- Ajax is invented
2007
- ECMAScript 3.1
2009
- ES5 emerges from previous discussions

JavaScript History

2011
- ES5.1
2015
- June - ES6 (ES2015)
2016
- June - ES2016

To be continued...

JavaScript History

BLOCK SCOPE VARIABLES

code

Block scope variables

function getColor(condition) {

    if (condition) {
        var value = "blue";

        // other code
        return value;
    } else {

        return null;
    }
}

ES5 variable hoisting

function getColor(condition) {
    var value; // undefined

    if (condition) {
        value = "blue";
        // other code
        return value;
    } else {
        return null;
    }
}

Block scope variables

function getColor(condition) {

    if (condition) {
        var value = "blue";

        // ...

        return value;
    } else {

        // value = undefined

        return null;
    }

    // value = undefined
}

ES5 variable hoisting

variables are hoisted to the top of the enclosing function

Block scope variables


  for (var i = 0; i < 10; i++) {
      process(items[i]);
  }

ES5 variables in loops

var funcs = [];

for (var i = 0; i < 10; i++) {
    funcs.push(function() { console.log(i); });
}

ES5 functions in loops

console.log(i); // 10

funcs.forEach(function(func) {
    func();     // 10, 10, 10.... 
});

Block scope variables

Block scope declarations - variables that are inaccessible outside of a given block scope

Block scopes (lexical scopes)
- Inside of a function
- Inside of a block (between { and } )

ES6 introduces 2 new type of variable declarations:
- let
- const

Block scope variables

The LET declarations

function getColor(condition) {

    if (condition) {
        let value = "blue";

        // other code

        return value;
    } else {

        // value doesn't exist here - ReferenceError
        return null;
    }
    // value doesn't exist here - ReferenceError
}

The variable is only accessible inside its enclosing block
A ReferenceError is thrown if we try to access the variable outside of its scope

Block scope variables

Redeclarations

var count = 30;

// Syntax error
let count = 40;

let identifier cannot be redefined inside a scope

It's ok to make a let declaration if it creates a new variable in the scope

var count = 30;

// Does not throw an error
if (condition) {

    let count = 40; // shadows the outer variable inside this scope

    // more code
}

a new count variable is created that shadows the former

Block scope variables

The CONST declarations

// Valid constant
const maxItems = 30;

// Syntax error: missing initialization
const name;

Variables of which the content (or reference) does not change (not necessarily immutable)
For this reason they need to be initialized at declaration

cannot redeclare variables in the same scope

var message = "Hello!";
let age = 25;

// Each of these would throw an error.
const message = "Goodbye!";
const age = 30;

const maxItems = 5;

maxItems = 6;      // throws error

Block scope variables

The CONST declarations

const person = {
    name: "Andrei"
};

// works
person.name = "George";

// throws an error - reinitialization
person = {
    name: "George"
};

A const declaration prevents modification of the binding and not of the value itself.

Block scope variables

Temporal Dead Zone (TDZ)

if (condition) {
    console.log(typeof value);  // ReferenceError!
    let value = "blue";
}

A variable declared with either let or const cannot be accessed until after the declaration.

console.log(typeof value);     // "undefined"

if (condition) {
    let value = "blue";
}

Block scope variables

Loop behaviour - let

for (let i = 0; i < 10; i++) {
    process(items[i]);
}

var funcs = [];

for (let i = 0; i < 10; i++) {
    funcs.push(function() {
        console.log(i);
    });
}

The let declaration creates a new variable i each time , so each function created inside the loop gets its own copy of i

// i is not accessible here - throws an error
console.log(i);

funcs.forEach(function(func) {
    func();     // 0, 1, 2, 3,...
})

Block scope variables

Loop behaviour - const

var funcs = [];

// throws an error after one iteration
for (const i = 0; i < 10; i++) {
    funcs.push(function() {
        console.log(i);
    });
}

var funcs = [],
    object = {
        a: true,
        b: true,
        c: true
    };

// doesn't cause an error
for (const key in object) {
    funcs.push(function() {
        console.log(key);
    });
}

TEMPLATE STRINGS

code

Template strings

New string methods :

includes() - check if the given text is found anywhere within the string.

startsWith() - check if the given text is found at the beginning of the string

endsWith() - check if the given text is found at the end of the string

repeat() - returns a new string containing the original string repeated the specified number of times.

Template strings

New string methods

var msg = "Hello world!";

console.log(msg.startsWith("Hello"));       // true
console.log(msg.endsWith("!"));             // true
console.log(msg.includes("o"));             // true

console.log(msg.startsWith("o"));           // false
console.log(msg.endsWith("world!"));        // true
console.log(msg.includes("x"));             // false

console.log(msg.startsWith("o", 4));        // true
console.log(msg.endsWith("o", 8));          // true
console.log(msg.includes("o", 8));          // false

console.log("x".repeat(3));         // "xxx"
console.log("hello".repeat(2));     // "hellohello"
console.log("abc".repeat(4));       // "abcabcabcabc"

Template strings

Template literals

Multiline strings A formal concept of multiline strings.

Basic string formatting The ability to substitute parts of the string for values contained in variables.

HTML escaping The ability to transform a string such that it is safe to insert into HTML.

Template strings

Template literals

strings delimited by backticks (`) instead of double or single quotes.

let message = `Hello world!`;

console.log(message);               // "Hello world!"
console.log(typeof message);        // "string"
console.log(message.length);        // 12

Template strings

Multiline strings

// old syntax bug
var message = "Multiline \   
string";

console.log(message);       // "Multiline string"

ES5 multiline strings

var message = "Multiline \n\
string";

console.log(message);       // "Multiline
                            //  string"

var message = [
    "Multiline ",
    "string"
].join("\n");

let message = "Multiline \n" +
    "string";

Template strings

Multiline strings

let message = `Multiline
               string`;

console.log(message);           // "Multiline
                                //                 string"
console.log(message.length);    // 31

Preserve newlines

Preserve tabs

let message = `Multiline
string`;

console.log(message);           // "Multiline
                                //  string"
console.log(message.length);    // 16

Template strings

Multiline strings

Better HTML strings
- ES5

let message = `
<table>
    <tr>Jane</tr>
    <tr>Bond&</tr>
    <tr>Lars</tr>
    <tr>Croft</tr>
</table>`;

var message = "<table>" +
    "<tr>Jane</tr>" +
    "<tr>Bond&</tr>" +
    "<tr>Lars</tr>" +
    "<tr>Croft</tr>" +
"</table>";

Template strings

Substitutions

Substitutions are delimited by ${ and } and can have any JavaScript expression inside.

let name = "Andrei",
    message = `Hello, ${name}.`;

console.log(message);       // "Hello, Andrei."

let count = 10,
    price = 0.25,
    message = `${count} items cost $${(count * price).toFixed(2)}.`;

console.log(message);       // "10 items cost $2.50."

Template strings

Tagged Templates

let message = tag`Hello world`;

function tag(literals, ...substitutions) {
    // return a string
}

literals - an array containing the literal strings as interpreted by JavaScript
substitutions - the interpreted value of each substitution

perform a transformation on the template literal and returns the final string value

Template strings

Tagged Templates

let count = 10,
    price = 0.25,
    message = passthru`${count} items cost $${(count * price).toFixed(2)}.`;

literals

The empty string before the first substitution ("")
The string after the first substitution and before the second (" items cost $")
The string after the second substitution (".")

substitutions

10 (count)
2.25 ( (count*price).toFixed(2) )

Template strings

Tagged Templates

let message = tag`Hello world`;

function tag(literals, ...substitutions) {
    // return a string
}

ENHANCED OBJECTS

code

Enhanced objects