Javascript ES6 still confusing

by Carlos, Front-end Developer

When JavaScript underwent its second major revision, numerous features were added.

The new syntax introduced in ES6 aimed to make code more readable as well as less allow programmers to write less code and do more.

Therefore, this article will discuss a few of the basic syntax alterations that were introduced in ES6.

  1. let and const keyword
  2. arrow functions
  3. default function parameters
  4. for of loop
  5. promises

ES6 - let and const keywords

Prior to the let and const keywords, the var keyword was the only acceptable variable declaration keyword in JavaScript Syntax.

However, the var keyword often leads to unexpected results.

As a result, the let and const keywords were introduced.

The let keyword does prohibits the re-declaration of variables however, it does allow the altering of contents (reassignment) assigned to the variable.

let keyword

The const keyword not only prohibits the re-declaration of variables but also the reassignment of variables.

const keyword

Top tip

use the const keyword if you are sure the variables contents will not be altered.

ES6 - arrow functions

The introduction of arrow functions (also called fat arrow notation) allows for shorter scripting of traditional functions.

Arrow functions syntax

In the first expression, the function keyword and return keyword are required.

However, the second expression makes use of arrow functions and therefore, does not require the function keyword.

Furthermore, since the function only contains one statement, curly braces and the return keyword can be **omitted.

If the functional block contains two statements then curly braces and the return statement are mandatory.

Arrow functions syntax


using the this keyword inside arrow functions can lead to unexpected results since it only points to the global window object.

Top tip

only use arrow functions when you are certain the this keyword will not be used inside that functional code block.

ES6 - default function parameters

JavaScript ES6 now allows the assignment of parameters to have default values so that values are not passed as undefined.

Default function parameters

In the above functional code block, if the default values of 0 were omitted for either parameter, the first function call myFunction() would return undefined.

ES6 - for of loop

The for of loops introduction now allows you to iterate only over array and objects but also strings and node Lists.

for of loop syntax

Top tip

when iterating over DOM elements make use of higher-order array functions or the for of loop instead of the for loop.

ES6 - promises

JavaScript promises are useful whenever you need a value to be returned in order to be used in the future and not immediately.

Promises syntax

In the code block above, a promise constructor is assigned to the promiseObj object.

This promise is then wrapped inside a setTimeout function that runs after 1 second (1000 milliseconds).

Thereafter, the promiseObj object calls the resolve state and prints out "Hello World" to the console after 1 second.

Closing thoughts

As mentioned above, these are just a few of the many syntax changes that were introduced in JavaScript ES6.

I hope you found this article helpful.

More articles

Validating a form in PHP

Failure to perform server-side validation on your website can lead webpage form abuse by malicious users.

Read more

Meta tags your website cannot go without

The meta tag specifies metadata about a HTML document. You want to make sure this meta data is present in your website.

Read more

Tell us about your project

We’ve committed to a fully remote team. If you are in Cape Town or Somerset West we can arrange a coffee date to discuss your project.