Modern JavaScript ES6 Features

JavaScript is a single threaded language. It can be non-blocking. The single thread means it has only one call stack. The command that comes first will be executed first. The latest version of JavaScript is the ECMAScript 6 (mostly known as ES6). The ES6 has many cool features that the previous versions did not have. We will talk about 10 ES6 features that JavaScript introduced to us as these are a must known knowledge for every JavaScript developer.

1. Event Loop:

The first thing we should know about how JavaScript works. As JavaScript is a single threaded language, it runs codes by a call stack that means whatever command comes first in the code will be executed first. But that does not mean it can’t be non-blocking. JavaScript can run asynchronously. That means it will not block the code if the execution of a certain command takes time to complete. For example, if a setTimeout() function is to be executed between two call stacks, then the V8 engine of the browser that runs JavaScript in the browser will send the setTimeout() function to the Web API and execute the command that are not to take time to execute.

All instructions are put on a call stack but when the browser sees an asynchronous function like setTimeout(), it sends the command to the Web API. The Web API then stores these asynchronous functions to a queue and when the single threaded commands are executed then these commands from the queue are executed one by one.

2. Block Binding:

When we declare a variable (known as binding as we actually bind a value to a name) in JavaScript, we have three options to choose how we want to declare them. These are let, const and var. When we use these keywords to declare a variable, that simply means we want to bind a value to a name inside a scope. Modern ES6 has a lot of efficient ways for block binding. Using these keywords we can bind a value to a name easily with ES6.

3. Hoisting:

When we normally declare a variable using the var keyword within a scope of a function or a block, the normal approach would be that the variable is not accessible outside of the function. But that thing only works with let and const keyword. When we declare a variable using the var keyword, the JavaScript engine treats it as if it is declared outside of the function such as a global variable that can be accessible from anywhere of the code. For example,

const newFunc = (condition) => {
if (condition) {
var color = “green”;
//color is accessible here
}
else {
//color is accessible here with a value of undefined
}
}

Here as you can see, the variable color is accessible inside the else block as if it was declared outside the if block. This is called Hoisting.

4. Block Level Declarations:

When we declare a variable using the let and const keyword inside a scope or a block, we cannot access the variable outside of the block/scope. This can’t be done using the var keyword. The block level declarations only work when we use let or const keyword.

5. Block Binding in Loops:

Loops uses a variable that is used to iterate over for a certain number of times. The variable that is used to iterate, is declared using the let keyword. Why we can’t use the const or var keyword? Because of the reason that const stores a fixed value that means we can’t change the value of a const variable. So it can’t be used to iterate every time and change its value every time. On the other hand var can’t also be used because when we declare var it declares the variable as a global variable. So if we try another loop with that same variable name, this can’t be done.

So using let keyword for Block binding in loops is the best practice in ES6.

6. Global Block Binding:

For Global Block bindings, its most preferable if we use const values. When we want to declare a variable globally that simply means it should be same for all of the functions and scopes or blocks. That is why const variables are used most for global bindings as the value of these can’t be changed. Also we can use var declarations but not preferable to use let keyword.

7. Spread Operator:

Spread syntax can be used when all elements from an object or array needs to be included in a list of some kind. Spread operator is a very useful thing when we want to copy all the elements or all the items that an array or a object have to a new array or object. It is commonly used when you want to add a new item to a local data store, or display all stored items plus a new addition. For example,

let number1 = [0,1,2];

let number2 = 3;

let newNumber = […number1, number2];

Now this newNumber has all the values from number1 and also number2.

8. Coding style:

ES6 supports a lot of features that comes very handy when working with JavaScript. But if the code is not neat and clean or optimized and human readable then it would not be an efficient way to share our code and work with teams. So a developer should follow these rules below to write clean and human readable codes:

1. We should use a space between parameters.
2. Curly braces on the same line after a space when using a function.
3. We should use a semicolon after each command.
4. An empty line between two logical blocks.
5. Lines should not be very long.
6. Spaces around a nested call.

These rules along with many others should be kept in practice for a developer to produce clean and optimized code.

9. Try-Catch:

Its obvious to get an error when writing code. But we must know how to handle errors. Usually a script dies when it gets an error, but the try-catch method allows the script not to die and do something else when it gets an error. The basic syntax is

try {

//do something

} catch (error) {

//do something

}

When the try block is executed, catch does nothing and when the try block could not be executed, the catch block then does some command as given so that the script does not die for the error.

10. Arrow Functions:

Arrow functions are another cool ES6 feature that is introduces to us. An arrow function expression is a compact alternative to a traditional function expression, but is limited and can’t be used in all situations. It reduces the complexity of a traditional function syntax. And it gets shorter also. If the return statement has only one line that the curly braces can be removed and if the function has only one parameter then it is not required to use the parenthesis between the parameter. An example,

const myFunction = (parameter) => return something;

Modern JavaScript introduces a lot of handy features when ES6 was launched. It has many more features that makes a developers code efficient and less slaggy. These features should be a must known thing for a JavaScript developer.