This document provides an overview of new features introduced in ES6 (ECMAScript 2015), including constants and variables, string interpolation, arrow functions, object property enhancements, parameter handling, destructuring, classes, modules, generators, and resources for learning more. It was presented by Stefano Ceschi Berrini on November 21st, 2016 to Programmers In Padua.

1. LEVEL UP YOUR SKILLS
ES6
by Stefano Ceschi BerriniProgrammers In Padua - Nov, 21st 2016

2. WHO AM I?
Stefano Ceschi Berrini
Software Engineer @ TimeRepublik
~9 yrs relationship w/ JS
In <3 with React
@stecb https://stecb.github.io

3. Yes. Software Engineer.

4. I was joking. This is what I actually do

5. 1995/‘96 2006 2009 2015

6. Nov 21th, 2016

7. A high-level, dynamic, untyped, and interpreted programming language
dʒævəˌskrɪpt

8. ES6 is JavaScript
adds to JS a tons of cool features you will love

9. CONSTANTS &
VARIABLES

10. // scopes the variable to the nearest **block** {}
// No hoisting
let foo = 'bar';
for (let i = 0; i < 10; i++) {
let y = 'something';
}
// while foo is available, both i and y are not available
console.log(y)
// ReferenceError: y is not defined

11. // constant reference to the value, we shouldn't redefine it!
// And MUST be initialised. Same scoping rules of let
const pi = 3.14;
const arr = [];
const obj = {};
// we can change referenced value in this case
arr.push('hey');
// but we can't redefine constants i.e.
// arr = []
// or
// pi = 5
obj.str = 'foo';
// also ok!
obj = {};
// ! ok!

12. STRING
INTERPOLATION

13. const god = {
name: 'John Petrucci',
instrument: 'guitar',
influences: ['Pink Floyd', 'Metallica', 'Iron Maiden', 'Meshuggah']
};
const domNode =`
<div>
<em>
<b>${god.name}</b> can play ${god.instrument} faster than you!!
</em>
<p>Influences:</p>
<ul>
${god.influences.map(i => `<li>${i}</li>`).join('')}
</ul>
</div>
`;
document.body.innerHTML = domNode;

14. ARROW
FUNCTIONS

15. let arr = [1,2,3];
let something = arr.map(n => n * 2).reduce((a, b) => a + b);
let foo = () => () => console.log('heya!');
console.log(something); // ?
console.log(foo()); // ?

16. let guitars = ['music man', 'ibanez', 'taylor'];
let guitarsShop = {
location: 'Montebelluna',
name: 'EsseMusic',
// shorthand assignment => guitars: guitars
guitars,
// method
listGuitars() {
this.guitars.forEach(guitar => {
console.log(`${this.name} in ${this.location} has ${guitar} guitars`);
});
}
}
guitarsShop.listGuitars(); // ?

17. OBJECT PROPERTIES
ENHANCEMENTS

18. let guitars = ['music man', 'ibanez', 'taylor'];
let guitarsShop = {
location: 'Montebelluna',
name: 'EsseMusic',
// shorthand assignment => guitars: guitars
guitars,
// computed properties
[`property_${guitars[1]}`]: guitars[1],
// method
listGuitars() {
this.guitars.forEach(guitar => {
console.log(`${this.name} in ${this.location}
has ${guitar} guitars`);
});
}
}
console.log( guitarsShop[`property_${guitars[1]}`] === guitars[1] );

19. PARAMETERS
HANDLING

20. // default params values
const foo = (x, y = 1, z = 2) => x * y * z;
foo(3); // ?
// rest params
const bar = (x, y, ...z) => x * y * z.length;
bar(1, 2, 'some', 'more', 'args'); // ?
// spread syntax
const baz = (x, y, z) => x * y * z;
const arr = [2, 4, 6];
baz(...arr); // ?

21. DESTRUCTURING

22. const arr = [1, 2, 3, 4, 5];
const [a, b, ...other] = arr;
console.log(other) // ?
const obj = { x: 1, y: 2 };
const { x, y } = obj;
console.log(x, y); // 1 2
const obj2 = { options: { top: 10, left: 20, bg: '#fff' } };
// destructuring + aliasing
const { options: { bg: background } } = obj2;
console.log(background); // '#fff'
const foo = () => [1, 2, 3];
const [c, ,d] = foo();
console.log(c, d); // 1 3
function draw({ size = 'big', coords = { x: 0, y: 0 } } = {}) {
console.log(size, coords);
}
draw({
coords: { x: 18, y: 30 }
});

23. CLASSES

24. // class
class Person {
// default params
constructor(name = 'unknown', age = 0, sex = 'whatever') {
this.age = age;
this.name = name;
this.sex = sex;
}
displayInfo() {
console.log(this.name, this.age, this.sex);
}
}
// subclass
class Female extends Person {
constructor(name, age) {
// super call
super(name, age, 'f');
}
yell(what) {
super.displayInfo();
setInterval(() => console.log(what), 1000);
}
}
const myWife = new Female('Deborah', 29);
myWife.yell('wash your own cup and dishes please!');

25. MODULES

26. js
helpers.js
constants.js
app.js
moviesManager.js

27. // /js/helpers.js
export function isOdd(n) {
return n % 2 !== 0;
}
export const capitalizeFirst = str => str[0].toUpperCase() + str.slice(1);
// /js/constants.js
export const API_ENDPOINT = 'http://my.api.com/';
export const PER_PAGE = 30;
export const MAGIC = 42;

28. // /js/moviesManager.js
import { API_ENDPOINT, PER_PAGE, MAGIC } from 'constants';
export default class MoviesManager {
constructor(per_page = PER_PAGE) {
this.page = 0;
this.per_page = per_page;
}
fetch(title, cb) {
fetch(`${API_ENDPOINT}?title=${title}&page=${this.page++}
&per_page=${this.per_page}&API_KEY=${MAGIC}`)
.then(response => response.json())
.then(json => cb(json));
}
}

29. // /js/app.js
import * as lib from 'helpers';
import MoviesManager from 'moviesManager';
const arr = [1, 2, 3, 4, 5];
const oddArr = arr.filter(lib.isOdd);
(new MoviesManager).fetch('spider man', json => {
// I will receive the json
// of all the people who bought spider man.
console.log(lib.capitalizeFirst(json.people[0].firstName));
});

30. GENERATORS

31. Generators are new kind of functions that can be
paused/resumed, allowing meanwhile other code to run.

32. const fetchJson = co.wrap(function* (url) {
try {
let request = yield fetch(url);
let text = yield request.text();
return JSON.parse(text);
}
catch (error) {
console.log(`ERROR: ${error.stack}`);
}
});

33. function* generatorFunction() {
// paused initally!
console.log('Hey');
yield; // operator to pause the generator!
console.log('there!');
}
const generatorObj = generatorFunction();
generatorObj.next(); // Hey
generatorObj.next(); // there!
// at the end: { value: undefined, done: true }

34. function *foo(x) {
let y = 2 * (yield (x + 1));
let z = yield (y / 3);
return (x + y + z);
}
const iterator = foo(1);
iterator.next(); // => value === ?, done === ?
iterator.next(3); // => value === ?, done === ?
iterator.next(12); // => value === ?, done === ?

35. // function declaration
function* generatorFunction() { /* code */ }
// function expression
const generatorFunction = function* () { /* code */ }
// generator method
const obj = {
* myMethod() {
/* code */
}
}
// generator method def in class
class MyClass {
* myMethod() {
/* code */
}
}

36. RESOURCES
https://github.com/lukehoban/es6features
https://babeljs.io/docs/learn-es2015/
http://exploringjs.com/es6/

37. Thanks.
Images taken from https://unsplash.com/