Sei sulla pagina 1di 48

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

Potrebbero piacerti anche