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.
- let and const keyword
- arrow functions
- default function parameters
- for of loop
- 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.
The const keyword not only prohibits the re-declaration of variables but also the reassignment of variables.
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.
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.
Note
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.
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.
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.
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.