ES6 Techniques
// IIFE
(function () {
// private scope
var name = 'John';
console.log(name);
}())
// code block
{
// private scope
var name = 'John';
console.log(name);
}
{
const firstName = 'matteo';
const lastName = 'matteo';
const user = {
firstName: firstName,
lastName: lastName,
fullName: function () {
return firstName + ' ' + lastName
}
};
}
{
const firstName = 'matteo';
const lastName = 'matteo';
const user = {
firstName,
lastName,
fullName() {
return firstName + ' ' + lastName
}
};
}
{
var x = 3;
function func(randomize) {
if (randomize) {
var x = Math.random(); // (A) scope: whole function
return x;
}
return x; // accesses the x from line A
}
func(false); // undefined
}
{
var x = 3;
function func(randomize) {
var x;
if (randomize) {
x = Math.random();
return x;
}
return x;
}
func(false); // undefined
}
{
let x = 3;
function func(randomize) {
if (randomize) {
let x = Math.random();
return x;
}
return x;
}
func(false); // 3
}
{
function UiComponent() {
const _this = this; // (A)
const button = document.getElementById('myButton');
button.addEventListener('click', function () {
console.log('CLICK');
_this.handleClick(); // (B)
});
}
UiComponent.prototype.handleClick = function () {
console.log('clicked')
};
}
{
function UiComponent() {
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
console.log('CLICK');
this.handleClick(); // (A)
});
}
UiComponent.prototype.handleClick = function () {
console.log('clicked')
};
}
{
class UiComponent {
constructor(button) {
button.addEventListener('click', () => {
console.log('CLICK');
this.handleClick();
});
}
handleClick() {
console.log('clicked')
}
}
const button = document.createElement('button');
const comp = new UiComponent(button)
}
[1,2,3].map(function (item) { return item + 10 })
[1,2,3].map((item) => item + 10)
[1,2,3].map(item => item + 10)
{
const HTML5_SKELETON_A =
'<!doctype html>\n' +
'<html>\n' +
'<head>\n' +
' <meta charset="UTF-8">\n' +
' <title></title>\n' +
'</head>\n' +
'<body>\n' +
'</body>\n' +
'</html>\n';
const HTML5_SKELETON_B = '\
<!doctype html>\n\
<html>\n\
<head>\n\
<meta charset="UTF-8">\n\
<title></title>\n\
</head>\n\
<body>\n\
</body>\n\
</html>';
const HTML5_SKELETON_ES = `
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>`;
}
{
const user = { name: 'Matteo', lastName: 'Ronchi' };
const fullNameLegacy = 'Mr.' + user.name + ', ' + user.lastName;
const fullNameEs = `Mr. ${user.name}, ${user.lastName}`;
const inlineExpressions = `A day is made of ${24 * 60} minutes`
}
{
var matchObj =
/^(\d\d\d\d)-(\d\d)-(\d\d)$/
.exec('2999-12-31');
var year = matchObj[1];
var month = matchObj[2];
var day = matchObj[3];
}
{
const [, year, month, day] =
/^(\d\d\d\d)-(\d\d)-(\d\d)$/
.exec('2999-12-31');
}
{
var obj = { foo: 123 };
var propDesc = Object.getOwnPropertyDescriptor(obj, 'foo');
var writable = propDesc.writable;
var configurable = propDesc.configurable;
console.log(writable, configurable); // true true
}
{
const obj = { foo: 123 };
const { writable, configurable } = Object.getOwnPropertyDescriptor(obj, 'foo');
console.log(writable, configurable); // true true
}
{
var arr = ['a', 'b', 'c'];
for (var i = 0; i < arr.length; i++) {
var elem = arr[i];
console.log(elem);
}
arr.forEach(
elem => console.log(elem)
);
}
{
const arr = ['a', 'b', 'c'];
for (const elem of arr) {
console.log(elem);
}
for (const [index, elem] of arr.entries()) {
console.log(index+'. '+elem);
}
}
{
function selectEntries(options) {
var start = options.start || 0;
var end = options.end || -1;
var step = options.step || 1;
// do something
}
selectEntries({ start: 0, end: -1 });
}
{
function selectEntries({ start = 0, end = -1, step = 1 }) {
// do something
}
selectEntries({ start: 0, end: -1 });
}
{
// ES5
function selectEntries(options) {
options = options || {};
var start = options.start || 0;
var end = options.end || -1;
var step = options.step || 1;
// do something
}
selectEntries();
}
{
function selectEntries({ start = 0, end = -1, step = 1 } = {}) {
// do something
}
selectEntries();
}
{
// ES5
function logAllArguments() {
for (var i=0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
}
{
// ES2015
function logAllArguments(...args) {
for (const arg of args) {
console.log(arg);
}
}
}
{
// ES5
function format(pattern) {
var args = [].slice.call(arguments, 1);
}
}
{
// ES2015
function format(pattern, ...args) {
}
}
{
function Person(name) {
this.name = name;
}
Person.prototype.describe = function () {
return 'Person called '+this.name;
};
}
{
class Person {
constructor(name) {
this.name = name;
}
describe() {
return 'Person called '+this.name;
}
}
}
{
function Person(name) {
this.name = name;
}
Person.prototype.describe = function () {
return 'Person called '+this.name;
};
function Employee(name, title) {
Person.call(this, name); // super(name)
this.title = title;
}
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.describe = function () {
return Person.prototype.describe.call(this) // super.describe()
+ ' (' + this.title + ')';
};
}
{
class Person {
constructor(name) {
this.name = name;
}
describe() {
return 'Person called '+this.name;
}
}
class Employee extends Person {
constructor(name, title) {
super(name);
this.title = title;
}
describe() {
return super.describe() + ' (' + this.title + ')';
}
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
