1. Modern JavaScript (since ES6 Harmony)
Martin Kruliš
by Martin Kruliš (v1.1)

2. ECMA Script Evolution Recent Rapid Development Browser Compatibility
Finalized in June 2015
Many significant changes
But backwards compatible with ES 5
ECMAScript 7 (2016)
ECMAScript 8 (2017)
ECMAScript 9 (2018)
Browser Compatibility
Nearly 100% support of ES 6 in newest browsers
Careful with older browsers (LTS systems, IE 11, …)
by Martin Kruliš (v1.1)

3. ECMA Script 6 Block Scope
Block scope variables declared by let (instead of var)
for (let i = 0; i < 10; ++i) …
Function declarations are block-scoped as well
function foo () { return 1; }
foo(); // returns 1 {
function foo () { return 2; }
foo(); // returns 2 }
by Martin Kruliš (v1.1)

4. ECMA Script 6 Constants Constant (immutable) block-scoped variables
const PI = 3.14;
Only the variable is immutable
Referenced object or array inside is mutable
const obj = { foo: 42 };
const accumulator = [];
obj.foo = 54; // OK
accumulator.push(obj); // OK
obj = { foo: 4254; } // not OK !!!
A good hint for JS engine (garbage collector)
by Martin Kruliš (v1.1)

5. ECMA Script 6 Template Literals Extended Literals
Similar to PHP interpreted (double-quoted) strings
let amount = 42;
let cost = 54; // per capita
let str = `Total ${amount} items for ${amount * cost}`;
Extended Literals
Binary literals 0b
Octal literals
0o52
Back apostrophes
by Martin Kruliš (v1.1)

6. ECMA Script 6 Classes A concept of “real” classes introduced
class Square {
constructor(side) {
this.side = side; }
function Suqare(side) {
var square = new Square(42);
New ES6 syntax for creating classes
In fact, it creates constructing function (as in ES5)
In both cases, objects are created by new operator
by Martin Kruliš (v1.1)

7. ECMA Script 6 Classes A sugar code for prototyping
class Circle extends GeometricShape {
constructor(x, y, r) {
super(x, y);
this.r = r; }
getArea() {
return Math.PI * this.r * this.r;
Inheritance implemented by prototyping
Calling base class constructor
Method (in fact a member of prototype)
typeof Circle === 'function'
typeof Circle.prototype === 'object'
typeof Circle.prototype.getArea === 'function'
by Martin Kruliš (v1.1)

8. Getter and setter for a property
ECMA Script 6
Classes
Static methods, property getters/setters
class Circle extends GeometricShape {
static intersect(c1, c2) { ... }
get diameter() {
return 2 * this.r; }
set diameter(d) {
this.r = d / 2;
Circle.intersect(...);
c1.diameter = c2.diameter;
Static method
Getter and setter for a property
by Martin Kruliš (v1.1)

9. ECMA Script 6
Modules
Way to export/import modular values without polluting the global context (avoiding name collisions)
// mylib.js
export function explain() { return "because 6 x 9"; };
export const universalConst = 42;
// an application using mylib.js
import * as mylib from "mylib";
console.log(mylib.universalConst + " " + mylib.explain());
// another application using mylib
import { explain, universalConst } from "mylib";
console.log(universalConst + " " + explain());
by Martin Kruliš (v1.1)

10. ECMA Script 6 Arrow Functions Simpler syntax for callback functions
arr.map(function(x) { return x+1; }); // ES 5
arr.map(x => x+1) // ES 6
Lexical this
Some differences, e.g., arrow function cannot be used as constructor
var self = this;
this.values.forEach(
function(x){
if (x % 2 != 0)
self.odds.push(x); } );
this.values.forEach(
(x) => {
if (x % 2 != 0)
this.odds.push(x); } );
Arrow functions do not have their own this or arguments binding. Instead, those identifiers are resolved in the lexical scope like any other variable. That means that inside an arrow function, this and arguments refer to the values of this and arguments in the environment the arrow function is defined in (i.e., "outside" the arrow function).
Arrow function “inherits” this from outer scope
by Martin Kruliš (v1.1)

11. ECMA Script 6 Extended Function Parameter Handling
Default parameter values
function inc(val, by = 1) { return val + by; }
Aggregation of remaining arguments
function merge(al, a2, ...restArrays) {}
Spread collection elements as arguments
var coords = [ 1, 2 ,3 ];
point.moveBy(...coords); // moveBy(1, 2, 3);
var str = "bar";
var chars = [ "f", "o", "o", ...str ]; // b, a, r
by Martin Kruliš (v1.1)

12. ECMA Script 6 Destructing Assignments Array matching Object matching
var list = [ 1, 2, 3 ];
var [ x, y, z ] = list; // var x=1, y=2, z=3
[ z, x, y ] = [ x, y, z ]; // rotate values x,y,z
Object matching
var { x, y, z } = get3Dpoint();
var { x: y, y: x, attrs: { depth: z } } = get2Dpoint();
Context argument matching
function avgFirst2([a, b]) { return (a + b) / 2; }
function distanceTo({x, y, z = 1}) { … }
by Martin Kruliš (v1.1)

13. ECMA Script 6 Promises Objects representing asynchronous action
Also holds the result of the operation (data or error)
Promises are replacing callback functions in APIs
Two possible states
Resolve – successfully completed, have data
Reject – error occurred (thrown), have error message
Highly combinable
.then(), .catch(), .finally()
Promise.all(), Promise.race()
by Martin Kruliš (v1.1)

14. ECMA Script 6 Promises Example
First a book record is fetched (containing author ID)
Then author record is fetched
fetch(`
.then(response => response.json())
.then(({ authorId }) =>
fetch(`
.then(author => ...do something with autor...);
by Martin Kruliš (v1.1)

15. Traditional callbacks
ECMA Script 6
Traditional callbacks
Promises Example
function ajaxGet(url, timeout, onData, onError) { … }
function ajaxPromised(url, timeout) => {
return new Promise((resolve, reject) => {
ajaxGet(url, timeout, resolve, reject);
}); }
Promise.all([
ajaxPromised(" 500),
ajaxPromised(" 500),
ajaxPromised(" 500),
]).then((data) => {
let [ foo, bar, spam ] = data;
showData(foo, bar, spam);
}, (err) => { alert(err) } );
Wrapped in a promise
Btw. It is not necessary to wrap AJAX queries like this since new fetch() API for HTTP requests was designed. The fetch() function automatically returns a promise object.
by Martin Kruliš (v1.1)

16. ECMA Script 6 Iterators let fibonacci = { [Symbol.iterator]() {
let pre = 0, cur = 1;
return {
next () {
[ pre, cur ] = [ cur, pre + cur ];
return { done:(cur > 1000), value:cur }; } };
for (let x of fibonacci)
console.log(x);
by Martin Kruliš (v1.1)

17. Makes sure that complete property has value between 0 and 100
ECMA Script 6
Proxies
let course = {
name: "Advanced Technologies for Web Applications",
complete: 53, // percent }
let proxy = new Proxy(course, {
set(target, property, value) {
if (property != "complete") return true;
return (value >= 0 && value <= 100);
});
Makes sure that complete property has value between 0 and 100
by Martin Kruliš (v1.1)

18. ECMA Script 6 New Data Structures Set – a collection of unique items
const s = new Set(); s.add("kitten").add("hippo").add("kitten"); s.size; // === 3 s.has("hippo"); // === true
Map – a dictionary (key-value) structure
const m = new Map(); m.set("answer", 42); m.set("correct", 54); m.get("correct"); // === 54 m.size; // === 2
by Martin Kruliš (v1.1)

19. Functional Approach Shift in Paradigm
JavaScript is leaning steadily towards functional programming paradigm
const data = [ 1, 2, 3, 4, 5, 6 ];
for (let i = 0; i < data.length; ++i) {
if (data[i] % 2 !== 0) continue;
let x = data[i] * data[i];
console.log(x); }
Prints out 4, 16, and 36
by Martin Kruliš (v1.1)

20. Functional Approach Shift in Paradigm
JavaScript is leaning steadily towards functional programming paradigm
const data = [ 1, 2, 3, 4, 5, 6 ];
data.filter(x => x % 2 === 0)
.map(x => x * x)
.forEach(x => console.log(x));
Yields [2, 4, 6]
Yields [4, 16, 36]
Prints out 4, 16, and 36
by Martin Kruliš (v1.1)

21. Functional Approach JavaScript Support
Methods for functional array processing
Already there since ES5
Streamline function declarations
Arrow functions introduced
Many semantic constructions may be expressions
With a little help from && and || operators
They do not return bool value, but the value of the first operand that renders the expression false or the value of last operand
var x = struct && struct.nest && struct.nest.foo;
by Martin Kruliš (v1.1)

22. Immutability Immutability Concept Data cannot be changed
New copy of (modified) data can be created
Pure functions
Only read inputs, no side effects
Reasons
Efficiency, parallelization
Auto-caching functions (compute-memory tradeoff)
Versioning (keeping history, replaying events)
by Martin Kruliš (v1.1)

23. Immutability Immutability Issues Solution
Hard to enforce, hard to detect
const obj = { foo: 42 };
const saveObj = obj;
obj.foo = 54;
obj === saveObj
Solution
Use specialized objects which create new instance on modification
Immutable.js library
by Martin Kruliš (v1.1)

24. Compatibility Issues Compatibility Issues
ES6 is compatible with new browsers
But not with the older ones
The solution is to transpill ES6 to ES5
Same goes for JSX or TypeScript
Missing functions can be polyfilled
Babel.js
A library for transpilling
Can be used statically or dynamically
Statically for production, dynamically for development
by Martin Kruliš (v1.1)

25. Modules Modules Compatibility and Bundling
Modules cannot be easily transpilled
They need to be bundled
Compiled into one script file
And possibly minimized
Bundling also improves downloading
Existing libraries
Webpack
Browserify
by Martin Kruliš (v1.1)

26. Code Linter Linter ESLint A tool that analyses source code
Marks errors, suspicious constructs, stylistic errors, …
Essential for interpreted languages
Since there is no compilation
ESLint
Popular linter for JavaScript/ECMAScript
Pluggable
Plugin for VS Code exists
by Martin Kruliš (v1.1)

27. Strict Mode Strict Mode Invoked by 'use strict' literal
At the beginning of file or function
Automatically invoked in modules and classes
Mistakes are treated as error
Accidental creation of global variables
Using reserved words as identifiers …
Disable some rare constructs in favor of improving variable handling efficiency
Makes it easier to write more secure code
by Martin Kruliš (v1.1)

28. ECMAScript 7 (2016) ECMAScript 7 (2016) ECMAScript 8 (2017)
Array includes() method
Exponential operator
ECMAScript 8 (2017)
Async functions, await operator
Shared buffers and atomic operations
ECMAScript 9 (2018)
Asynchronous iteration
Rest/spread operators (…) for variables
finally() for promises
Regex improvements
by Martin Kruliš (v1.1)

29. Discussion
by Martin Kruliš (v1.1)