0% found this document useful (0 votes)

59 views

Web-007 Javascript: © Luxoft Training. All Rights Reserved

The document discusses new features being introduced in ECMAScript 6 (ES6), the latest version of JavaScript, including arrows, classes, enhanced object literals, template strings, destructuring, modules, proxies, promises, and tail call optimization.

Uploaded by

Alina Maria Bilec

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

59 views

Web-007 Javascript: © Luxoft Training. All Rights Reserved

Uploaded by

Alina Maria Bilec

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

You are on page 1/ 13

WEB-007 JavaScript

ver. 1.0

http://www.luxoft-training.ru/
© Luxoft Training. All rights reserved
WEB-007 JavaScript

Future of JavaScript
ver. 1.0

http://www.luxoft-training.ru/
© Luxoft Training. All rights reserved
ECMAScript 6

• Arrows

• Classes

• Enhanced object literals

• Template strings

• Destructuring

• Modules

• Proxies

• Promises

• Tail calls

http://www.luxoft-training.ru/
© Luxoft Training. All rights reserved
Arrows
A function shorthand using the => syntax

var square = function (x) { var square = x => x * x;

return x * x;
};

var bob = { var bob = {

_name: "Bob", _name: "Bob",
_friends: [], _friends: [],
printFriends: function () { printFriends() {
var that = this;

this._friends.forEach( this._friends.forEach(
function (f) { f =>
return console.log( console.log(
that._name + this._name +
" knows " + f); " knows " + f));
});
} }
}; }
http://www.luxoft-training.ru/
© Luxoft Training. All rights reserved
Classes

Classes are a simple sugar over the prototype-based OO pattern.

class Shape {
constructor(x, y) {
this._x = x;
this._y = y;
}

move(dx, dy) {
this._x += dx;
this._y += dy;
}
}
class Circle extends Shape {
constructor(x, y, r) {
super(x, y);
this._r = r;
}
}
var c = new Circle(1, 1, 0.5);

http://www.luxoft-training.ru/
© Luxoft Training. All rights reserved
Enhanced object literals
var obj = {
// __proto__
__proto__: theProtoObj,
// Shorthand for ‘handler: handler’
handler,
// Methods
toString() {
// Super calls
return "d " + super.toString();
},
// Computed (dynamic) property names
[ 'prop_' + (() => 42)() ]: 42
};

http://www.luxoft-training.ru/
© Luxoft Training. All rights reserved
Template string
// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`In JavaScript this is
not legal.`

// String interpolation
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

http://www.luxoft-training.ru/
© Luxoft Training. All rights reserved
Destructuring
// list matching
var [a, , b] = [1,2,3];

// object matching
var { op: a, lhs: { op: b }, rhs: c }
= getASTNode()

// object matching shorthand

// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position

function g({name: x}) {
console.log(x);
}
g({name: 5})

// Fail-soft destructuring
var [a] = [];
a === undefined;

// Fail-soft destructuring with defaults

var [a = 1] = [];
a === 1;

// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

http://www.luxoft-training.ru/
© Luxoft Training. All rights reserved
Proxies
// Proxying a normal object
var target = {};
var handler = {
get: function (receiver, name) {
return `Hello, ${name}!`;
}
};

var p = new Proxy(target, handler);

p.world === 'Hello, world!';

http://www.luxoft-training.ru/
© Luxoft Training. All rights reserved
Promises
function timeout(duration = 0) {
return new Promise((resolve, reject) => {
setTimeout(resolve, duration);
})
}

var p = timeout(1000).then(() => {

return timeout(2000);
}).then(() => {
throw new Error("hmm");
}).catch(err => {
return Promise.all([timeout(100), timeout(200)]);
})

http://www.luxoft-training.ru/
© Luxoft Training. All rights reserved
Tail calls
function factorial(n, acc = 1) {
'use strict';
if (n <= 1) return acc;
return factorial(n - 1, n * acc);
}

// Stack overflow in most implementations today,

// but safe on arbitrary inputs in ES6
factorial(100000)