This document introduces ES2015 (ECMAScript 2015), which updated the JavaScript language with new syntaxes and libraries. It summarizes some of the key additions, including classes, template literals, object literal extensions, Maps, destructuring, and more. These features are now supported by modern browsers. The document provides examples of code using the old syntax versus the new syntax for classes, template literals, Maps, and destructuring to illustrate the changes. It also lists some references for further exploring ES2015.

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

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

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

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

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

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

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

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

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

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

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

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

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

14. 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

15. 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'

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

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

18. 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

19. Thank you!