ES6 - Level up your JavaScript Skills

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

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

I was joking. This is what I actually do

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

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

// 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

// 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!

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()); // ?

OBJECT PROPERTIES
ENHANCEMENTS

// 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); // ?

// 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!');

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

// /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;

// /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));
}
}

// /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));
});

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

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 }

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 === ?

// 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 */
}
}

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

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

ES6 - Level up your JavaScript Skills

More Related Content

What's hot

Viewers also liked

Similar to ES6 - Level up your JavaScript Skills

Recently uploaded

ES6 - Level up your JavaScript Skills