ES6 General Introduction

A lot of new
features, a lot of
syntactic sugar ...
but they make
writing JavaScript
waaay easier

let
● Block scoped
● Errors thrown if more than one let
by the same name in the same
scope.
● Error is thrown if variable is called
before value has been declared
(TDZ).
const
● Block scoped
● Must be assigned a value when
declared and cannot be
reassigned.
● Error thrown if more than one
const or let have the same name
in the same scope.
● Errors thrown if reassigned
● Errors thrown if variable is called
before value has been declared
(TDZ).
New vars in town

You should...
// Use parens and curly brackets
// avoid implicit returns
const odds = evens.map((v) => {
return v + 1;
});
// This helps avoid nasty git diffs
const odds = evens.map(v => v + 1);
const odds = evens.map((v) => {
let x = v + 1;
return x;
});
Arrow functions
You can...
// no parens or curly brackets
// implicit return for one liner
const odds = evens.map(v => v + 1);

ES6
// No need for bind/call/apply
function iterate() {
this.array = [1, 2, 3];
this.array.forEach((i) => {
this.array;
});
}
Lexical this for arrow functions
Transpilation
// Caches the this reference
function iterate() {
var _this = this;
this.array = [1, 2, 3];
this.array.forEach(function(i) {
_this.array;
});
}

● You can create plain old
strings
● No or concatenation
for multiline strings
● Whitespace is preserved
● Interpolate variables
and expressions
● Compute in code as well
// Basic literal string creation
`My little string :]`
// Multiline strings
`In ES5 this is
not legal.`
// String interpolation
const name = ‘Slim Shady’;
`My name is what
My name is who
My name is chka-chka ${name}`
// Raw representation
const x = 1;
String.raw`x is ${x}`;
// ‘x is 1’
Template strings

Template Strings as function arguments
let a = 5;
let b = 10;
function tag(strings, ...values) {
strings[0]; // ‘Hello ‘
strings[1]; // ‘ world ‘
values[0]; // 5
values[1]; // 10
return ‘Bazinga!’;
}
tag`Hello ${a} world ${b}`; // ‘Bazinga!’

Changing function arguments
Defaults
Specify defaults in the
function signature
function f(x=1) {
Replaces x = x || 1;
Rest
Name trailing args
function f(x, ...y) {
Replaces need to use
implicit arguments
variable
Spread
Invoke functions
function f(x, y, z) {
...
f(...[1,2,3])
Replaces some needs
for apply

● Allows binding with
pattern matching
● Support for Array and
Object
● Allows defaults and
some error handling
● Items that aren’t present
are assigned undefined
getData();
// returns {a: 1, b: 2}
let {a, b} = getData();
a === 1; // true
b === 2; // true
// In function parameters
function g({key: x}) {
return x;
}
g({key: 1}); // 1
Destructuring
<aside>Allows you to change
function usage without
refactoring invocations</aside>

Destructuring an Array
Pull what you need
let [a, ,b] = [1,2,3];
a === 1; // true
b === 3; // true
Error Handling
let [a] = [];
a === undefined; // true
Defaults
let [a = 1] = [];
a === 1; // omg so true

Modules with import and export
import
// import *
import * as stuff from ‘/stuff’
// import with destructuring
import {a, b} from ‘/stuff’
export
// export functions
export function sum(x, y) {...
// export variables
export var x = 1;
// export default
export default function(x) {

● Setting __proto__ directly
○ Can still use the
name
● Shorthanding
assignments of the same
name
● Method shorthand
● Calls to super
● Dynamic property names
let keyPostfix = 1;
let handler = someHandler;
let obj = {
__proto__: theProtoObj,
handler,
// handler: handler
toString() {
return super.toString();
},
[ 'b' + keyPostfix ]: 0
};
// obj['b' + keyPostfix] = 0
Object Literals

Cool Features We Should
Use Sparingly

Using classes
Supports ctors & static
class Person {
constructor(x) {
this.name = x;
}
getName() {
return this.name;
}
static sayMyName(x) {
return `${x.name}`;
}
}
Extends
class Bob extends Person {
constructor() {
super(‘Bob’);
}
getName() {
return super.getName();
}
}
Extend OTB Objects
No more overriding base classes or
writing delegators:
class A extends Array {
...
class D extends Date {
...
class E extends Element {
...
...but we should use the Ember.Object model in most cases

Number and Math APIs
Number.EPSILON;
Number.isInteger(Infinity); // false
Number.isNaN('NaN'); // false
Math.acosh(3); // 1.762747174039086
Math.hypot(3, 4); // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2); // 2

String, Array and Object APIs
'abcde'.includes('cd'); // true
'abc'.repeat(3); // 'abcabcabc'
Array.from(document.querySelectorAll('*')); // Returns a real Array
Array.of(1, 2, 3); // Like new Array(...), but no special one-arg behavior
[0, 0, 0].fill(7, 1); // [0,7,7]
[1,2,3].findIndex(x => x == 2); // 1
['a', 'b', 'c'].entries(); // iterator [0, 'a'], [1,'b'], [2,'c']
['a', 'b', 'c'].keys(); // iterator 0, 1, 2
['a', 'b', 'c'].values(); // iterator 'a', 'b', 'c'
Object.assign(Point, { origin: new Point(0,0) });

Some other stuff...
// Unicode
‘u{20BB7}’ == ‘ ’ == ‘uD842uDFB7’;
// Binary and Octal literals
0b111110111 === 503 // true
0o767 === 503 // too true

Cool Features We Shouldn’t
Use

You should explore them more but here’s why:
Iterators, generators
Custom Module Loaders
Map, Set, WeakMap, WeakSet
Proxies
Symbol
Promises
Reflect
Tail Calls
Requires polyfill, weirdness with immutability
Better off using something already made
Requires polyfill
Cannot be transpiled or polyfilled
Limited Support
Requires loading a separate runtime
Requires polyfill
Partially supported, can be a memory hog(until browser support is there)
...they are worth keeping an eye on though

Resources
Learn ES2015/ES6
AirBNB coding standards
Try it out
Destructuring assignment on MDN

ES6 General Introduction

More Related Content

What's hot

Viewers also liked

Similar to ES6 General Introduction

ES6 General Introduction