Have You Heard about ECMAScript 6? Find Out What’s New in JavaScript ES6 (Part 1)

Published in

Quadion Technologies

8 min readNov 6, 2018

If you’ve never read about ECMAScript, it is a trademarked scripting-language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It was created to standardize JavaScript, so as to foster multiple independent implementations.

JavaScript has always been the best-known implementation of ECMAScript since the standard was first published.

ECMAScript is commonly used for client-side scripting on the World Wide Web, and it is increasingly being used for writing server applications and services using Node.js.

Here is a timeline with the versions until ES6 and the main features included in each one.

In 2015 ECMAScript 6 was released. This version is also known as ES6 and ECMAScript 2015.

If you are new to JavaScript, you may not know that each browser uses a different JavaScript engine:

Mozilla uses SpiderMonkey
Chrome uses V8
Safari uses JavaScriptCore
IE and Edge use Chakra

Each JavaScript engine implements a subset of features of ES6. Although according to the ES compatibility table, the latest version of all major browsers has a very good support for ES6 features you may be wondering what happens if you want to use some features in a browser that doesn’t support it. In that case, you can still use it but the only thing you need is a transpiler such as Babel.

Also you can check if a feature is available in your browser using this tool.

A transpiler is a source-to-source compiler, a tool that reads source code written in a unique programming language producing the equivalent code in another language. It implies that you can compile your code into an older version of ECMAScript to be supported in all browsers.

ES6 has introduced some new useful features which I will explain as it follows:

The features included in this version are :

Block Scoped variables.
Destructuring assignments
Enhanced Object Properties
Template strings
Arrow functions
Classes
Extended Parameters handling
New built-in methods
Symbol
Iterators and for…of statement
Generators
Promises

As you can see there are a lot of things to explain and understand so, I think it will be better to split these topics into 3 different posts. In this first part, the first 4 items will be covered.

Block-scoped variables and functions

Hoisting

Before explaining blocked-scoped variables and functions, we need to understand what is hoisting.

Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function)(*).

The line# 7 of this code, will be moved to the top. So, no error will be shown and both names will be logged in the console.

In this case, nothing will be logged in the console, since only the declaration will be moved at the top, but not the initialization.

As we can see in the previous examples, all var declared inside an if / loop block will be moved at the top of the script. But if the declaration of the var is made inside a function the declaration of that var will be moved at the top of the function. So, if we try to access to a var defined inside a function from outside of that function we will get an “uncaught reference” error.

Because of hoisting var a , will be moved from line 4 to line 2, but It will be still inaccessible from outside the function.

(*) JavaScript in strict mode does not allow variables to be used if they are not declared.

Block-Scoped Variables

Before ES6 there were no way to create a variable accessible only to a block, let’s say an if statement or loop. But now, this is possible using let and cons.

let and const are block-scoped which means any time you’ve got a set of curly brackets you have block scope.

Let declaration

The variable name defined in line 4 is only accessible inside the if statement. It works the same as it used to work var inside a function.

Loop blocks work as if blocks.

If you declare the variable outside the block, it will be accessible from inside

No Re-declaration

If a variable name has already been defined within the scope(line #2), then creating a new variable name inside that scope using let throws an error (line #4).

Const declaration

Variables that are declared using the const keyword are considered constants, which means that their values can’t be changed once set. Thus, each const variable must be initialized on the declaration.

Also, it will show an error if you try to assign a new value to a const.

Modifying an object is allowed, but assign a new value to the object is not.

Destructuring assignments

Destructuring is a special syntax that allows us to “split” arrays or objects into variables.

It’s called “destructuring assignment” because it “destructurizes” by copying items into variables. But the object/array itself is not modified.

Destructuring objects

Basically, we have an existing object at the right side named foo that we want to split into variables.

The left side contains the name of the properties we want to destructure inside {}.

After that 2 variables will be created bar = 1 and baz =2.

The order in which the names of the properties are written doesn’t matter. Also, you can destructure some of the properties at a particular moment and the rest later on as well as not destructure at all any of the properties.

It is also possible to specify a variable name different of the property name, for instance, here there is a person object that has an Id but after the destructuring a variable named identifier will be created.

As it can be seen in the example above the variable name is specified using a colon “:” after the property name.

It is also possible to destructure some properties from a nested object.

In this case, there is a person object that has nested object called contactInfo whose the phoneNumber property is destructured and assigned to the phone variable.

Another thing that can be done is assign default values to some properties when destructuring.

Here we defined a person object that contains Id, FullName, and Address. The property city was not defined in the object so, the default value was assigned to the variable c. The opposite happens with Address, as it was defined in person the default value was ignored, and the original value was set to variable a.

Destructuring arrays

The destructuring assignment also works with arrays. The difference is that you have to use [ ] instead of { } in the declaration.

Elements can be ignored by adding a “,” instead of a variable name.

You can also use the rest operator (…) to assign to a variable what is left in the array. Let’s imagine you need to set only the first and second element in the array to variables, and you want the rest of the results in another variable.

Such as in object, it is also possible to assign default values when destructuring an array.

The default value doesn’t need to be a literal or object , it can be a function too.

Remember that default values are only going to be evaluated if the value is undefined. So in this example, an alert will be triggered because the 3rd element is not defined.

Parameter Context Matching

Arrays and Objects can be destructured into individual parameters during function calls. This is extremely useful when you need to add/remove a parameter to a function. This topic will be covered in a future post in the section extended parameters handling

Enhanced Object Properties

Shorthand for Initializing Properties

Before ES6 to create an object we need to declare a key, value pair delimited by a comma, inside curly braces. Let’s see an example.

So the function getFullName() is taking 2 properties as parameters and then creating an object with this properties. Have you noticed how many times the words name and surname are repeated? Luckily ES6 removes all that repetition. Let’s see how it looks like using ES6

As you can see in the example above there is no need to declare the property name and the value again, instead, it will take the variable name as the property name and the variable value as the property value.

Shorthand for writing Methods

Before ES6, if a property was a function, then you needed to specifically write the word function after the colon. Here is an example of a function getPerson() that returns an object with 2 properties: person (an object) and sayHello (an other function).

Using ES6 it is not necessary to write the word function before the sayHello(). You just need to add () after the property name to indicate that that property is a function

Computed Property Names

Actually, there are two ways of accessing to a property in an object. You can use dot-notation or square bracket notation.

In JS, an object property name can be any valid JavaScript string or anything that can be converted to a string, including the empty string. However, any property name that is not a valid JavaScript identifier (for example, a property name that has space or a hyphen, or that starts with a number) can only be accessed using the square bracket notation.

This notation is also very useful when property names are to be determined dynamically.

Before ES6, creating an object using the square bracket notation was not allowed. So, if you wanted to create an object and need to use square bracket notation, this is how it was done.

As you can see this was not too practical because you have to add the computed properties after the object was created.

Now, you can use square notation in the creation of an object.

Template strings

String interpolation

This feature makes building a string so much easy. Before ES6 we need to include “\n” to create a new line and also we need to cut the string add a space an then add the variable name each time we need to include data at runtime. This was error prone and a very tedious work.

Using ES6 “\n” is not needed anymore, you just need to press enter and continue writing in the next line. Also, the string doesn’t need to be cut to include data in runtime, instead you need to add the variable name inside ${…} which makes the string more readable and easy to build.

This is all for this post, thanks for reading and remember to check parts 2 and 3 to find out more ES6 features!

Sources

Additional Posts in the Same Series

Would you like to know more? Do you need our help? Contact Us!
www.quadiontech.com