ES6 Basics

let, const, () => {}

js STYLEGUIDES

Airbnb JavaScript Style Guide()

@humanamburu

argghh...!

One STANDARD, a lot of names

  • ECMAScript Harmony
  • ECMAScript 6 (or ES6)
  • ECMAScript .next
  • ECMAScript 2015

make ie6 great again!

Official Site

ECMAScript Compatibility Table

feature list

for let and const

  1. Block scope
  2. Not properties of the global object
  3. Fresh bindings for a loops
  4. Redeclaration throws SyntaxError
  5. Using before declaration throws Error
    Temporal Dead Zone (TDZ)

block scope

hoooraaay!

if (42 === 42) {
    let value = 42;
}

console.log(value); // throws error

problem

globals

var glob = 42;

window.glob === glob
true

Fix

globals

let glob = 42;

window.glob === glob
false

pROBLEM

LOOPS OR WAT IS THAT?

var i = 'hello?';

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

i === 10
true

fix

LOOPS OR WAT IS THAT?

let i = 'hello?';

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

i === 'hello?'
true

redeclaration

let value = 1;

let value = 2; // SyntaxError: Identifier 'value' has already been declared
const value = 1; // SyntaxError: Identifier 'value' has already been declared

not on my watch

SHADOWING

nINJA VARIABLES WORKS CORRECTLY

 function func() {
 	let foo = 5;

 	if (true) {
 	    let foo = 10; // shadows outer `foo`
 	    console.log(foo); // 10
 	}

 	console.log(foo); // 5
 }

temporal hell dead zone

 

Let/const declarations hoist!

 

but may not be accessed in any way until the variable’s declaration is evaluated

problem

errors everywhere

function printOne() {
    console.log(one); // throws Error
    let one = 2; // why not?
}

printOne();

danger! not so simple block!

YOU

not so simple

let x = 'outer scope';

 (function() {
 	console.log(x); // hoist but throw error
 	let x = 'inner scope';
 }());

not so simple #2

const variable = func();
const TDZ = 2;

function func() { return TDZ; }

not so simple #3

 (function(a = b, b) {
 	console.log(a, b);
 }(undefined, 2));

okay, but what about const?

just for fun (no)

const THE_ANSWER_OF_LIFE_AND_EVERYTHING = 42;

THE_ANSWER_OF_LIFE_AND_EVERYTHING = 2; // Uncaught TypeError: 
                                       // Assignment to constant variable.

THE_ANSWER_OF_LIFE_AND_EVERYTHING++; // Nice tray, but No.

const heh; // SyntaxError: Missing initializer in const declaration

const !== immutable

const means const reference

const mutable = {
    type: 'THE_ANSWER_OF_LIFE_AND_EVERYTHING',
    value: 42
};
mutable.value = 1;

// Mutated object
mutable.value;
=> 1

const mutableArray = [];
mutableArray.push(1);

// Mutated array
mutableArray;
=> [1]

arrow functions

syntax

() => { reuturn 41 + 1; } // without parameters
() => 41 + 1 // expression without parameters, equal to previous

(a) => { return 41 + a; } // one parameter
a => 41 + a // expression, equal to previous

(a, b) => { return a + b; } // several parameters
(a, b) => a + b // expression, equal to previous

why?

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super.

why?

less verbose

const array = [1, 2, 3, 4, 5];

// callbacks looks good
array.map(item => item * 2);

//equals
array.map(function(item) {
    return item * 2;
});

PROBLEM

FUNCTION HAS own this

function Guests(array) {
    this.guests = array;
}

Guests.prototype.bePolite = function(prefixes) {
    return prefixes.map(function(prefix, index) {
        return prefix + this.guests[index];
    })
}

const guests = new Guests(['John', 'Mary', 'Denis']);
guests.bePolite(['Mr. ', 'Ms. ', 'Mr. ']); // error

ARROW FUNCTION DOESN'T BIND OWN THIS

ALSO CAN BE FIXED BY CLOSURE OR BIND

function Guests(array) {
    this.guests = array;
}


Guests.prototype.bePolite = function(prefixes) {
    // fix
    return prefixes.map((prefix, index) => {
        return prefix + this.guests[index];
    });
}

const guests = new Guests(['John', 'Mary', 'Denis']);
guests.bePolite(['Mr. ', 'Ms. ', 'Mr. ']); // ["Mr. John", "Ms. Mary", "Mr. Denis"]

Say hi to arrow function

ALSO CAN BE FIXED BY CLOSURE OR BIND

function HiMan(name) {
    this.name = name;
}


HiMan.prototype.hi = function() {
    setTimeout(function() {
        console.info(`Hi, ${this.name}`);
    });
}

//fixed version
HiMan.prototype.hi = function() {
    setTimeout(() => {
        console.info(`Hi, ${this.name}`);
    });
}

object & class properties not a place for arrow functions!

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}

obj.b(); // prints undefined, Window
obj.c(); // prints 10, Object {...}

Partial APPLICATION

function multiplication(x, y) {
    return x * y;
}

const double = multiply.bind(undefined, 2);
const double2 = y => add(2, y);

or how to bring some math to JS

In computer science, partial application (or partial function application) refers to the process of fixing a number of arguments to a function, producing another function of smaller arity.

Styleguides

PRINCIPLES, RULES, HOLYWARS

airbnb

PRINCIPLES, RULES, HOLYWARS

https://github.com/airbnb/javascript

FAVORITE parts 

besides spaces

  1. References
  2. Variables
  3. Blocks
  4. Objects
  5. Strings
  6. Functions + Arrow functions
  7. Comprasion operators
  8. Casting
  9. Naming conventions

THANK YOU

Made with Slides.com