Beginners Guide: Getting Started With ECMAScript — Part 1

Destiny Ajakaiye
6 min readMar 4, 2019

We keep moving forward, opening new doors, and doing new things, because we’re curious and curiosity keeps leading us down new paths.

If you are probably reading this post right now then i guess the subject ECMAScript got your attention and you would love to know more about it as I did some few weeks ago. If this describes you then read on.

Introduction

Wherever you read about JavaScript you’ll probably have seen one of these terms:

ES3, ES5, ES6, ES7, ES8, ES2015, ES2016, ES2017, ECMAScript 2017, ECMAScript 2018, ECMAScript 2015

But what do these terms actually mean?

They are referring to a standard, called ECMAScript.

ECMAScript is a standard upon which JavaScript is based, and it’s often abbreviated to ES.

But beside JavaScript, other languages implement(ed) ECMAScript, including:

  • ActionScript which is losing it popularity since Flash will be officially discontinued in 2020 (so I read).
  • JScript a Microsoft scripting dialect. This came into the picture at the time JavaScript was supported only by Netscape and the browser wars were at their peak, so these triggered Microsoft to build its own version for Internet Explorer.

But despite all these other implementations, JavaScript is still the most popularly used implementation of ES.

Brief History

But why the wield name ECMAScript?

Ecma International is a Swiss standards association who is in charge of defining international standards. When JavaScript was created, it was presented by Netscape and Sun Microsystems to Ecma and they gave it the name ECMA-262 alias ECMAScript. Netscape and Sun Microsystems (the maker of Java) might help figure out the name choice, which might include legal and branding issues by Microsoft which was in the committee.

After IE9, Microsoft stopped branding its ES support in browsers as JScript and started calling it JavaScript.

Current ECMAScript version

The current ECMAScript version is ES2018 and it was released in June 2018.. One other thing I have noticed is sometimes an ES version is referenced by edition number and sometimes by year, and I am sometimes confused by the year chance being -1 on the number, which adds to the general confusion around JS/ES.

Before ES2015, ECMAScript specifications were commonly called by their edition. So ES5 is the official name for the ECMAScript specification update published in 2009. For more about the history of ECMAScript click here.

let and const

Until ES2015, var was the only construct available for defining variables, written like the one shown below:

var a = 0

If you forgot to add var you will be assigning a value to an undeclared variable, and the results might be different.

Using var, you can redeclare a variable many times, overriding it:

var a = 10
var a = 20

You can also declare multiple variables at once in the same statement:

var a = 10, b = 20

Variable Scope

Variable scope is the portion of code where the variable is visible. A variable initialized with var outside of any function is assigned to the global object, has a global scope and is visible everywhere. While a variable initialized with var inside a function is assigned to that function, it’s local and is visible only inside it, just like function parameter.

It is also important to know that inside a function, any variable defined in it is visible throughout all the function code, even if the variable is declared at the bottom of the function, it can still be referenced in the beginning, because JavaScript moves all variable on top before executing the code and this known as hoisting.

Using let

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

It is important to know that defining let outside any function — contrary to var — does not create a global variable.

let a = 10

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 = ‘hello world’

We can’t assign a different literal to the a const. But however we can mutate (change) a if it’s an object that provides methods that mutate its contents.

Note that const does not provide immutability, just make sure that the reference can’t be changed. It also has block scope, same as let.

Arrow Functions

Arrow functions were my favorite read when studying ECMAScript. Using them makes your code more cleaner and concise.

This change makes a whole lot of sense that now you rarely see the usage of the function keyword in modern codebases. Although that still has its usage.

From

const myFucntion = function() {}

To

const myFunction = () => {}

Another nice feature of the arrow function is if the function body contains just a single statement, you can omit the brackets and write all on a single line:

const myFunction = () => 'Hello World'

And you can pass parameters in the parentheses:

const myFunction = (valueA, valueB) => runSomething(valueA, valueB)

If you have one (and just one) parameter, you could omit parentheses completely:

const myFunction = param => doSomething(param)

Having this short syntax really encourages the use of small functions.

Another nice feature of the arrow function I would love to talk about is Implicit return.

Implicit return

Arrow functions allow you to have an implicit return. This means returning values without having to use the return keyword.

A perfect use case for this is when there is a one-line statement in the function body:

const myFunction = () => ‘Hello World!’myFunction() //’Hellow World’

Another example, when return an object, remember to wrap the curly brackets in parentheses to avoid it being considered the wrapping function body brackets:

const myFunction = () => ({ value: ‘Hello World!’})myFunction() //{value: ‘Hello World’}

Classes

A class is a blueprint of an object or simply put, a class describes an object. In ECMAScript a class has an identifier which we can easily relate to when creating an object off the class using the new keyword.

This is how a class looks:

class Animal {
constructor(name) {
this.name = name
}
speak() {
return ‘Hey ‘ + this.name + ‘.’
}
}

Those of us coming from a programming background will understand what is going on inside the above code block.

When the object is initialized, the constructor is called with whatever parameter passed to it.

const eagle = new Animal(‘eagle’)
eagle.speak()

A class can also have as many method according to the need of the object.

Class Inheritance

In simple terms, class inheritance means a class can inherit(benefits) the ability of another class just be using the extends keyword.

If the inherited class has a method with the same name as one of the classes higher in the hierarchy, the closest method takes precedence:

class Eagle extends Animal {
fly() {
return super.fly() + ‘I am flying.’
}
}
const eagle = new Eagle(‘Nelson’)
eagle.fly()

It is important to know that classes do not have explicit class variable declarations, but you must initialize any variable in the constructor. You can also reference the parent class calling super() inside a class.

Static Methods

Personally I love using static methods. They are defined on the instance, not on the class. Static methods are executed on the class instead:

class Animal {
static name() {
return ‘My name is lion’
}
}
Animal.name()

Default Parameter

In ES2015 default parameter values have been introduced and they are widely used in modern browsers.

Default parameters allow us to set a default value for a function in case a parameter is not specify:

const doSomething = (param1 = ‘hello’) => {
//do something here
}

What if we have a unique object with parameters values in it?

With destructuring you can provide default values:

const animal = ({name = ‘lion’ }) => {
//
}

And if no object is passed when calling our animal function, similarly we can assign an empty object by default:

const animal = ({ name = ‘lion’ } = {} ) => {
//
}

Wrapping Up

So far so good we have been able to look at some interest ECMAScript features like let and const, arrow function, where we talked about implicit return and the likes, and Classes. So in the next part of this series we will look at other interest features ECMAScript has to offer.

--

--

Destiny Ajakaiye

Writer & Software Engineer | Writings and insights on personal development | Growth Mindset | Future of Work