ES2016 (also known as es6)
ES2015 Overview
New variable
types
let
let a = 20;
a = 50;
a = {};
ES2015 Overview
New variable
function varTest() {
types var x = 1;
if (true) {
var x = 2; // same variable!
console.log(x); // 2
let }
console.log(x); // 2
}
The scope of a variable defined with var is
function scope, or declared outside any function letTest() {
function, global let x = 1;
if (true) {
let x = 2; // different variable
Variables declared using the let or console.log(x); // 2
const keywords block-scoped, which }
console.log(x); // 1
means that they are available only in }
the block in which they were declared.
ES2015 Overview
New variable
types
const const key = 'mykey';
Const creates a read-only reference to
a value. It does not mean the value it key = 'newkey';
holds is immutable, just that the // error "key" is read only
variable identifier cannot be
reassigned.
Variables declared using const
keywords is also block-scoped.
ES2015 Overview
New variable
const person = {
types name: 'Jennifer',
age: 43,
occupation: 'Dentist',
}
const
person.name = 'Jim';
console.log('person:', person);
{
"age": 43,
"name": "Jim",
"occupation": "Dentist"
}
ES2015 Overview
New variable
types const people = ['Mark', 'Tim', 'Jennifer'];
people.push('Amanda');
const console.log('people:', people);
Array [
"Mark",
"Tim",
"Jennifer",
"Amanda"
]
ES2015 Overview
arrow / lambda functions
basics es5
var sayName = function() {
console.log('I am Nader!');
};
es2015
const sayName = () => {
console.log('I am Nader!');
};
ES2015 Overview
arrow / lambda functions
arguments
es2015
const sayName = (name) => console.log('I am ' + name + ' !');
const sayName = name => console.log('I am ' + name + ' !');
const addThree = (a, b, c) => a + b + c;
ES2015 Overview
implicit
arrow / lambda functions
const getFullName = (first, last) => first + ' ' + last
implicit return vs
explicit return
explicit
const getFullName = (first, last) => {
return first + ' ' + last;
};
const name = getFullName('nader', 'dabit');
console.log('name:', name);
"name:" "naderdabit"
ES2015 Overview
arrow / lambda functions es5
implicit return vs var getFullName = function(first, last) {
explicit return return first + ' ' + last
};
es2015
const getFullName = (first, last) => {
return first + ' ' + last;
};
const getFullName = (first, last) => first + ' ' + last
ES2015 Overview
arrow / lambda functions es5
currying var logInfo = function(name) {
return function(age) {
console.log(name + ' ' + age)
}
}
logInfo('nader')(36)
// or
var nader = logInfo('nader')
nader(36)
nader(37)
nader(38)
ES2015 Overview
es2015
arrow / lambda functions
const logInfo = (name) => (age) => {
console.log(name + ' ' + age);
currying }
// or
const logInfo = name => age => {
console.log(name + ' ' + age);
}
logInfo(‘nader')(36)
// or
const nader = logInfo('nader')
nader(36)
nader(37)
nader(38)
ES2015 Overview
es5
default arguments
function multiply(a, b) {
b = (typeof b !== 'undefined') ? b : 1;
basics return a * b;
}
Default function parameters allow
formal parameters to be
initialized with default values if no es2015
value or undefined is passed.
function multiply(a, b = 1) {
return a * b;
}
ES2015 Overview
function append(value, array = []) {
array.push(value);
default arguments return array;
}
with array const arr1 = append(4);
const arr2 = append(4, [0, 1, 2, 3])
console.log('arr1:', arr1);
console.log('arr2:', arr2);
"arr1:" Array [
4
]
"arr2:" Array [
0,
1,
2,
3,
4
]
ES2015 Overview
default arguments function getName(name = myName()) {
return name;
with function }
function myName() {
return 'nader';
}
console.log(getName());
console.log(getName('amanda'));
“nader"
"amanda"
ES2015 Overview
spread and rest operators
When using spread, you are expanding a single variable into more:
var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
When using rest arguments, you are collapsing all remaining
arguments of a function into one array:
function sum( first, ...others ) {
// others is now an array
// so something with others
}
ES2015 Overview
array rest es5
basics function f() {
var args = Array.prototype.slice.call(arguments, f.length);
console.log('args:', args);
The rest parameter syntax allows us }
to represent an indefinite number of
f(1, 2, 3, 4)
arguments as an array.
"args:" Array [
1,
2,
3,
4
];
ES2015 Overview
array rest es2015
basics function f(...rest) {
console.log('rest:', rest);
}
f(1, 2, 3, 4)
“rest:" Array [
1,
2,
3,
4
];
ES2015 Overview
es5
array spread
let fruits = ['banana'];
const moreFruits = ['apple', 'orange'];
basics
Array.prototype.push.apply(fruits, moreFruits);
The spread syntax allows an expression // or
to be expanded in places where multiple
fruits = fruits.concat(moreFruits);
arguments (for function calls) or multiple
elements (for array literals) or multiple console.log(fruits);
variables (for destructuring assignment)
are expected. Array [
"banana",
"apple",
“orange"
]
ES2015 Overview
array spread
es2015
basics
var fruits = ['banana'];
var moreFruits = ['apple', 'orange'];
fruits = [...fruits, ...moreFruits];
console.log(fruits);
Array [
"banana",
"apple",
“orange"
]
ES2015 Overview
array spread es2015
basics var people = ['Jason', 'Amanda'];
var allPeople = ['Nader', ...people, 'Chris', 'Jennifer'];
console.log('allPeople: ', allPeople);
"allPeople: " Array [
"Nader",
"Jason",
"Amanda",
"Chris",
"Jennifer"
]
ES2015 Overview
array spread
items in array as function es2015
argument var args = [0, 1, 2];
function myFunction(x, y, z) {
// do stuff with x, y, and z
console.log('z:', z)
}
myFunction(...args);
"z:" 2
ES2015 Overview
object spread
const person = { name: 'Jim', age: 22 };
basics const Jim = { ...person, occupation: 'Programmer' };
Spread properties in object console.log('Jim:', Jim);
initializers copies own enumerable
properties from a provided object "Jim:" Object {
onto the newly created object. "age": 22,
"name": "Jime",
"occupation": "Programmer"
}
ES2015 Overview
object spread
const person = { name: 'Jim', age: 22 };
overwriting object properties
const Amanda = { ...person, name: 'Amanda' };
console.log('Amanda:', Amanda);
"Amanda:" Object {
"age": 22,
"name": "Amanda"
}
ES2015 Overview
object spread
const farmer = {
info: {
nested objects occupation: 'farmer'
}
}
const person = {
name: 'chris',
...farmer
}
console.log('person:', person);
ES2015 Overview
array destructuring
es5
basics
var arr = [10, 20, 30, 40, 50];
Python: unpacking
Ruby: parallel assigning var a = arr[0];
PHP: listing var b = arr[1];
Functional languages: destructuring bind
console.log(a); // 10
console.log(b); // 20
ES2015 Overview
array destructuring es2015
basics var arr = [10, 20, 30, 40, 50];
const [a,b] = arr;
console.log(a); // 10
console.log(b); // 20
ES2015 Overview
array destructuring
es2015
default values
const arr = [5];
const [c = 10, d = 20] = arr;
// c === 5; d === 20
ES2015 Overview
array destructuring
es2015
destructuring + rest
var arr = [10, 20, 30, 40, 50];
const [x, y, ...z] = arr;
console.log('z:', z);
"z:" Array [
30,
40,
50
];
ES2015 Overview
array destructuring
destructuring multidimensional
arrays
const people = ['nader', 'mike', ['jim', 'frank']]
const [first, second,[third]] = people
console.log('third:', third)
"third:" "jim"
ES2015 Overview
Object destructuring
es5
basics const person = {
name: 'Chris',
info: {
hairColor: 'brown',
height: "6'1",
},
};
const name = person.name;
"name:" "Chris"
ES2015 Overview
Object destructuring
es2015
basics const person = {
name: 'Chris',
info: {
hairColor: 'brown',
height: "6'1",
},
};
const { name, info } = person;
"name:" "Chris"
ES2015 Overview
Object destructuring
es2015
default values
const person = {
info: {
hairColor: 'brown',
height: "6'1",
},
};
const { name = 'Amanda' } = person;
"name:" "Amanda"
ES2015 Overview
Object destructuring
es2015
nested objects
const person = {
name: 'Chris',
info: {
hairColor: 'brown',
height: "6'1",
},
};
const { info: { hairColor }} = person;
"hairColor:" "brown"
ES2015 Overview
es2015
Object destructuring
const person = {
name: 'Chris',
Variable reassignment info: {
hairColor: 'brown',
height: "6’1",
},
};
const { info: personInfo } = person;
"personInfo:" Object {
"hairColor": "brown",
"height": "6’1"
}
ES2015 Overview
Promises
es5
Basics
const getInfoCallback = (cb) => {
setTimeout(() => {
cb('Hello World');
}, 3000);
};
getInfoCallback(function(data) {
console.log('data:', data);
});
ES2015 Overview
Promises
Basics promise
const getInfoPromise = () => new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello World');
}, 3000);
});
getInfoPromise()
.then(data => console.log('data:', data));
ES2015 Overview
Promises
fetch fetch
The fetch API provides a JavaScript fetch('https://www.swapi.co/api/planets/')
interface for accessing and .then(data => data.json())
manipulating parts of the HTTP .then(json => console.log('json:', json))
pipeline, such as requests and .catch(err => console.log('error:', err));
responses.
.json() gets you a promise for the
body of the http response that is
yet to be loaded.
ES2015 Overview
Template Literals
Basics
es5
string + variable concatenation
let name = 'Chris';
let age = '36';
let str = 'Hello, my name is ' + name + 'and my age is ' + age;
ES2015 Overview
Template Literals
Basics es2015
string + variable concatenation
let name = 'Chris';
let age = '36';
let str2 = `Hello, my name is ${name} and my age is ${age}`;
ES2015 Overview
Template Literals
expressions / logic
const person = {
name: 'Chris',
age: 23,
present: false
}
const getName = () => person.name
const info = `${getName()} is ${person.present ? 'present' : 'not present'}`;
"info :" "Chris is not present"
ES2015 Overview
Modules
// name.js
default export / import const name = 'Chris';
export default name;
// in some other file
import name from './name';
console.log('name:', name);
"name:" "Chris"
ES2015 Overview
Modules
// name.js
default export / import const name = 'Chris';
export default name;
Default exports can be imported as
any variable name
// in some other file
import person from './name';
console.log('person:', person);
“person:" "Chris"
ES2015 Overview
// getName.js
Modules const person = {
name: 'Chris',
age: 22,
default export / import };
functions const getName = () => person.name;
export default getName;
// in some other file
import getName from './getName';
console.log(getName());
"name:" "Chris"
ES2015 Overview
Modules // person.js
const person = {
default export / import name: 'Amanda',
age: 33,
objects };
export default person;
// in some other file
import person from './person';
console.log('age: ', person.age);
"age: " 33
ES2015 Overview
Modules // in constants.js
export const IS_LOADING = 'IS_LOADIING';
named export / import export const IS_LOADED = 'IS_LOADED';
// in some other file
import {
IS_LOADING,
IS_LOADED,
} from './constants';
console.log('IS_LOADED:', IS_LOADED);
"IS_LOADED:" "IS_LOADED"
ES2015 Overview
Modules // in person.js
const person = {
name: 'Jason',
multiple types occupation: 'Realtor',
age: 22,
};
const getAge = () => person.age;
export { getAge, person as default };
// in some other file
import person, { getAge } from './person';
ES2015 Overview
// in people.js
Modules const person1 = {
name: 'Jason',
age: 33,
};
alias
const person2 = {
name: 'Chris',
age: 34,
};
export { person1, person2 };
// in some other file
import { person1 as Jason } from './people'
console.log('age:', Jason.age);
"age: " 33
