ECMASCRIPT

Swarna Ramesh
5 min readMar 5, 2019

--

Before going to see about ECMASCRIPT first we see the origin and evolution of ECMASCRIPT.

EVOLUTION OF ECMASCRIPT

WHAT IS ECMASCRIPT?

  1. JavaScript was originally named JavaScript in hopes of capitalizing on the success of Java.
  2. After that Netscape submitted JavaScript to ECMA International for Standardization.
  3. Then it results in a new language standard, known as ECMAScript.
  4. ECMA script is a language based on JavaScript.
  5. International ECMA organization ensures that JavaScript written for one company browser would work in all companies’ browsers and also maintain the standard for the language.
  6. ECMAScript is the standard name for JavaScript. Many developers are fear for using new features of ECMA that are why the new features of ECMAScript can be added to JavaScript engines so developers can hold of them with extra features.

ECMAscript is often abbreviated as ES. ES is followed by number that it refers to the edition of ECMAscript.

Since there are eight editions of ECMAScript published.

ES3, ES5, ES6, ES7, ES8, ES2015, ES2016, ES2017.

Beside JavaScript, other languages implemented ECMAScript, including:

  • Action Script (the Flash scripting language), which is losing popularity since Flash will be officially discontinued in 2020
  • J Script (the Microsoft scripting dialect), since at the time JavaScript was supported only by Netscape and the browser wars were at their peak, Microsoft had to build its own version for Internet Explorer

but of course JavaScript is the most popular and widely used implementation of ES.

ECMAScript version

The current ECMAScript version is ES2018.

It was released in June 2018.

ECMASCRIPT VERSIONS

Let’s dive into the specific features added to JavaScript since ES5. Let’s start with the ES2015 features.

let and const

Until ES2015, var was the only construct available for defining variables.

var a = 0

If forget to add var it leads to be assigning a value to an undeclared variable, and the results might vary.

If don’t initialize the variable when declare it, it will have the undefined value until assign a value to it.

var a // type of a === ‘undefined’

Also declare multiple variables at once in the same statement:

var a = 1, b = 2;

Using let

let is a new feature introduced in ES2015 and it's essentially a block scoped version of var. Its scope is limited to the block, statement or expression where it's defined.

Modern JavaScript developers might choose to only use let and completely discard the use of var.

Using const

Variables declared with var or let can be changed later on in the program, and reassigned. Once a const is initialized, its value can never be changed again, and it can't be reassigned to a different value.

const a = ‘test’

Arrow Functions

Visually, function is a simple, which allows you to write functions with a shorter syntax, from:

const myFunction = function()

{
//…
}

This can be rewritten as:

const myFunction = () =>

{
//…
}

Implicit return

Arrow functions allow you to have an implicit return: values are returned without having to use the return keyword.

This function works when there is one line statement in the function body,

const myFunction = () => ‘test’
myFunction() //’test’

Enhanced Object Literals

In ES2015 Object Literals gained superpowers.

Simpler syntax to include variables

const something = ‘y’
const x = {
something
}

New Object methods
ES2015 introduced several static methods under the Object namespace:

  1. Object.is() determines if two values are the same value
  2. Object.assign() used to shallow copy an object
  3. Object.setPrototypeOf sets an object prototype.

Map
A Map data structure allows us to associate data to a key.

Before ES6
Before its introduction, people generally used objects as maps, by associating some object or value to a specific key value:

const car = {}
car[‘color’] = ‘red’
car.owner = ‘Flavio’
console.log(car[‘color’]) //red
console.log(car.color) //red
console.log(car.owner) //Flavio
console.log(car[‘owner’]) //Flavio

Enter Map
ES6 introduced the Map data structure, providing us a proper tool to handle this kind of data organization.

A Map is initialized by calling:

const m = new Map()

Add items to a Map
add items to the map by using the set method:

m.set(‘color’, ‘red’)
m.set(‘age’, 2)

Get an item from a map by key
And you can get items out of a map by using get:

const color = m.get(‘color’)
const age = m.get(‘age’)

Delete an item from a map by key
Use the delete() method:

m.delete(‘color’)

Delete all items from a map
Use the clear() method:

m.clear()

Check if a map contains an item by key
Use the has() method:

const hasColor = m.has(‘color’)

Find the number of items in a map
Use the size property:

const size = m.size

Initialize a map with values
initialize a map with a set of values:

const m = new Map([[‘color’, ‘red’], [‘owner’, ‘Flavio’], [‘age’, 2]])

Map keys
Just like any value (object, array, string, number) can be used as the value of the key-value entry of a map item, any value can be used as the key, even objects.

String padding

The purpose of string padding is to add characters to a string, so it reaches a specific length.

ES2017 introduces two string methods: padStarts() and padEnd().

padStart(targetLength [, padString])
padEnd(targetLength [, padString])

Sample usage:

Regular Expression improvements

ES2018 introduced a number of improvements regarding Regular Expressions.

ESNext

What’s next? ESNext.

ESNext is a name that always indicates the next version of JavaScript.

The current ECMAScript version is ES2018. It was released in June 2018.

Historically JavaScript editions have been standardized during the summer, so we can expect ECMAScript 2019 to be released in summer 2019.

So at the time of writing, ES2018 has been released, and ESNext is ES2019

Proposals to the ECMAScript standard are organized in stages. Stages 1–3 are an incubator of new features, and features reaching Stage 4 are finalized as part of the new standard.

--

--