ECMAScript

past, present, future

First things first

what is it?

Specification Standard

for scripting languages

first came out in 1997

It's actually a blueprint

although commonly known as synonymous with Javascript

Notable other implementations

  • Microsoft's JScript (1996-2011)
  • Adobe's ActionScript (1998-2006)

History

but let's just skip the boring parts

ES5

first widely recognized version

came out in 2009

Strict Mode

small step for man, giant leap for mankind

"use strict";
delete Object.prototype;
// This will cause an error

JSON Support

JSON.stringify()

JSON.parse()

Current Status

of JS world

ES6

a.k.a. ECMAScript 2015

is a breakthrough adding a plethora of new features

let   instead of   var

var counter = 1;
for (var i = 0; i < 100; i++) {
  counter++;
}
console.log(i)

const for read-only vars

const PI = 3.14
PI = 3 // This will cause an error

Classes, finally

// Classes in ES5

var Shape = function (id, x, y) {
    this.id = id
    this.move(x, y)
}

Shape.prototype.move = function (x, y) {
    this.x = x
    this.y = y
}
// Classes in ES6

class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }
    move (x, y) {
        this.x = x
        this.y = y
    }
}

Modules

// util.js
export function sum(a, b) {
    return a + b
}

// main.js
import { sum } from './utils.js'

const result = sum(1, 2)

arrow functions

const numbers = [ 1, 2, 3 ]
const sum = (a, b) => return a + 1
numbers.map(number => sum(number, 10))
// expected output: Array [ 11, 12, 13 ]

Promises

a more structured way of handling callbacks

// ES5 - Callback hell
handleRequest(request, function(response) {
  processResponse(response, function(result) {
    writeToDatabase(result, function(successful) {
      console.log(successful)            
    })
  })
})

// ES6 - Promises
handleRequest(request)
  .then(response => processResponse(response))
  .then(result => writeToDatabase(result)
  .then(successful => {
    console.log(successful)            
  })

ES7, ES8

a.k.a. ECMAScript 2016, 2017

exponential operator and async/awaits

exponential operator

const square = x => x ** 2;
const cube = x => x ** 3;

async / await

async function handleRequest(request) {
  try {
    const result = await processResponse(response)
    const successful = await writeToDatabase(result)
    console.log(successful)
  } catch (e) {
    console.error(e)
  }
}

ES.Next

what future holds

Thanks a lot for listening!

find me on github.com/koraytaylan

ECMAScript past, present, future

By Koray Taylan Davgana

ECMAScript past, present, future

  • 357