Modern JavaScript Features That Every Programmer Must Know..!

JavaScript ES6 is the latest version available( as of 2021/June/1) since 2015. It's also known as ES6 and ECMAScript 2015. So many awesome features were introduced with ES6, to make programmers work easy.

Here a list of some features that came with ES6. If you are looking for the full specification of ECMAScript 6 please visit from here.

• The let keyword
• The const keyword
• Array.find()
• Array.findIndex()
• New Number Methods
• New Global Methods
• JavaScript Modules
• JavaScript Arrow Functions
• JavaScript For/of
• New Math Methods
• New Number Properties
• JavaScript Classes
• JavaScript Promises
• JavaScript Symbol
• Default Parameters
• Function Rest Parameter

That sure is a long list. So, today let's talk about some of the top features from this list.

• The let keyword
• The const keyword
• JavaScript Arrow Functions
• JavaScript Classes
• Template literals
• Freeze Objects
• Destructuring
• Promises

You can also read: Top JavaScript Frameworks For Developers.

const and let Keywords

Before ES6 there was only one way to declare variables in JS and that was with the var keyword. ES6 introduced let and const .

const and let works almost the same way. But with const you can declare constants(Read-only), so the variables declared as constants will be read-only. But this does not affect object properties or array elements.

When you declare a variable outside any function it's global scoped. It can be accessed from anywhere in the program. When a variable is declared inside a function it's said to be function scoped (ex: let and const).

Block Scope was introduced with ES6. variables declared with let and const can have Block scope (var cannot). Block scope is the area within curly braces. This could be a loop, if-else condition etc. Variables declared inside a block can only be accessed within that block.

There is also something called Lexical scope. This means if there are nested function, the inner function can access variables in the parent function. However, the variables declared inside the inner function are not accessible by the parent function. Probably this example will give you a better idea.

Arrow Functions

This is a really cool way to work with function. When defining an arrow function,function keyword is not used. Instead, we use =>. With arrow functions you can have more readable and clean and. See for yourself in the below examples.

A common misunderstanding among developers

If you write a regular function this keyword refers to the caller of the function. But in arrow functions this keyword refers to the caller. If you are still confused try executing below code.

Objects

In JS object is a collection of properties and property is made of key, value pairs. This is similar to Hash Maps in Java. For an example try out the code below. I also have explained about using dynamic keys in a class in the example.

Object.freeze( ) in JavaScript (Freeze Objects)

This works exactly as it sounds. When you freeze an object, you can no longer change the elements in the object. But Object.freeze( ) only freezes immediate properties( first level value). It will not freeze inner level objects( if the value of a property is an object).

Class

Unlike previous versions, ES6 comes with Object-Oriented Concepts. But they don’t work the exact same way. As in Java or C#, you can use theclass keyword to create a class. But when you are implementing a constructor make sure to use the constructor keyword, not the class name. The below code will show you the use of class as well as inheritance.

A JavaScript class is not an object, even though they look similar

Template literals (Template strings)

Template literals nothing but having your variables in a string. In the below example I have shown how it was don't is ES5 and how its done in ES6 ( in a back-ticked string)

Destructuring

With destructuring, you can easily pull out values from arrays or objects and assign the values to variables. However there more than that to destructuring. Anyway, now let's see how we can do destructuring with the below code snippets.

Destructing with arrays and objects

With destructors extracting values from an array or an object looks like a piece of cake, right? 😃

Destructing with function

When you are calling the function, you should pass the object. But in the function declaration, you can extract only the values you need.

Promises

Instead of Callbacks, you can use promises to handle asynchronous operations easily. If you are totally new to promises, first of all, you might want to read about synchronous and asynchronous and callbacks in JS as well. However, if you are already familiar with them it will be easy for you to understand promises.

Promises work exactly as they sound. Let's go back to your childhood. Imagine you are a kid at home and you ask your parents 👨‍👩‍👦for a bar of chocolate 🍫. So your parents promise you, next time they go to the nearest shop, they will buy you chocolate. Well, this could end up in two ways. Either you will have your chocolate or you will not.

As you can see this scenario has 3 states. you asked for chocolate, but still, your parent didn't go shopping. So, your request is “pending”. Next, your parents bought you chocolate when they went shopping. We call this “fulfilled”. But what if they forgot and you didn't get any chocolate. That state is called “rejected”. This is the same way how JS promises work.

A promise is an object with the above 3 states. So, the state of a promise object is “pending”, “fulfilled” or “rejected”. Now let's get to a real scenario. Assume you are sending a request to a REST API to fetch some data using a promise. So, either your HTTP request will receive data(fulfilled) or it will get an error (rejected). However, we have a lot more to talk about promises and let's do it in the upcoming article.

References

JavaScript | MDN

JavaScript Tutorial

JavaScript: Introduction to Scope (function scope, block scope)