Scribd
Upload
69 views13 pages

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
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
69 views13 pages

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
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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;

http://www.luxoft-training.ru/
© Luxoft Training. All rights reserved
Modules
// lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;

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

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

You might also like