Introduction of ES2015

Introduction of ES2015
Shigeru Nakajima a.k.a ledsun
2016/4/28 Machida Tech Night #3

Who am I
• JavaScript on browser
• C# WPF
• 37 years old

What is ES2015
• New syntaxes and libraries of
JavaScript.
• Update yearly.
ES2016, ES2017...
• Big changes from the ECMA-262 5.1
Edition @ 2011.

Supported by almost modern
browsers.
• CH50 93%, Node6 93%, FF46 90%,
Edge13 79%, SF 53%
• https://kangax.github.io/compat-
table/es6/

We can use now
• class
• object literal extensions
• template literals
• Map/Set, WeakMap/WeakSet
• destructuring

Before class
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.incrementAge = function () {
this.age += 1;
};

After class
class Person {
constructor(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
incrementAge() {
this.age += 1;
}
}

Before object literal
extensions
var obj = {
handler: handler,
toString: function() {
return "d ";
},
prop_42: 42
};

After object literal
extensions
var obj = {
handler,
toString() {
return "d ";
},
// Computed (dynamic) property names
[ 'prop_' + (() => 42)() ]: 42
};
class

Before template literal
var text = (
'catn' +
'dogn' +
'nickelodeon'
);
var text2 = 'My cat is named ' + name + '.';

After template literal
var text = `cat
dog
nickelodeon`;
var text2 = `My cat is named ${name}.`;

template literal to HTML
var div = `
<div class="hoge">
Hello world!
</div>
`
document.body.innerHTML(div)

Before Map
var map = {};
map.name = 'john';
map.name; // john

After Map
var map = new Map([
['name', 'david'],
[true, 'false'],
[1, 'one'],
[{}, 'object'],
[function () {}, 'function']
]);
map.has('name');
map.set('name', 'john');
map.get('name'); // john

Before destructuring
var arr = [1, 2, 3, 4];
var a = arr[0];
var b = arr[1];
var c = arr[2];
var d = arr[3];
var luke = { occupation: 'jedi', father: 'anakin' };
var occupation = luke.occupation; // 'jedi'
var father = luke.father; // 'anakin'

After destructuring
var [a, b, c, d] = [1, 2, 3, 4];
var luke = { occupation: 'jedi', father: 'anakin' };
var {occupation, father} = luke;

And More
• spread (...) operator
arr1.push(...arr2)
• for of loop
• Promise
• Symbol
• Object.assign

Reference
• Exploring ES6: Upgrade to the next
version of JavaScript
• DrkSephy/es6-cheatsheet: ES2015
[ES6] cheatsheet containing tips,
tricks, best practices and code
snippets
• lukehoban/es6features: Overview of
ECMAScript 6 features

Introduction of ES2015

More Related Content

What's hot (20)

Similar to Introduction of ES2015 (20)

More from Nakajima Shigeru (6)

Recently uploaded (20)

Introduction of ES2015