ES6 JavaScript topics everyone must know it.

Mahfuz Alam
5 min readMay 6, 2021

Today, I am going to talk about ES6 JavaScript topics must know that better to learn JavaScript. I am excited. I think you are also excited. So, let’s start.

|Overall JavaScript

JavaScript is nowadays the most popular programming language all over the world. But if we look back to a couple of years, JavaScript was only used for Dom manipulation, but now the current world has been taking modern JavaScript as a weapon for developing an incredible number of higher-profile applications.

|Block Bindings

In Modern JavaScript, variable declare is an important factor. In a variable declaration, it depends on which methods you will declare a variable and where it will be. ES6 provides a new way to declare so that you can more easily control the scope of variables.

| Var Declarations and Hoisting

Variable declaration will applicable if the variable is hoisted on the top of the function or it will be treated global scope if they are declared outside a function.

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

For Example:

We see that, Variable “a” Declaration top of the function .the value “a” of the variable access function scope and outside but var “b” declared function scope is not accessed outside then show an error.

| Let Declarations

The let and var declaration syntax are same. You can use let instead of declaring var. And if you do this you have to remember that the scope of the variable will remain into the current block because var is hoisted on the top of the function but let is not hoisted

|Const Declarations

When we declared a variable with Const, we can’t change this value that means this value is never been changed as it is constant value.

|‘Try-Catch’ syntax

A Try-Catch block is basically used to handle errors in JavaScript. You use this when you don’t want an error in your script to break your code.

The try-catch construct has two main blocks: Try and then Catch

For Example:

It works like this:

  1. At first, the code Try is executed.
  2. if there is no error then the catch part is ignored, the try part goes on, and the catch part is skipped.
  3. if there is a show error, try part execution stopped and catch part detect error details about what happened.

|Block Binding in Loops

Block level is very useful when dealing with loops in javaScript. It is best practice to use “let” instead of “var” because “var” is being hoisted.

we See that , “i” is accessible here because we declare using var but “i” is not be accessible here because we declare using let

|Emerging Best Practices for Block Bindings

In modern JavaScript(ES6) development, the convention was to use “let” instead of “var” and use “const” to limit the modification. But as more developers following a convention that uses “const” as one time uses and use “let” when you know the variable value may be change another maybe uses it.

|Functions with Default Parameter Values

ES6 make it easier to pass default parameter values when parameter is not formally passed when call the function. In ES5 are not available in this features default values parameter passed.

|Global Block Bindings

Global scope behavior for var is different than let and const. For example when var is used in the global scope, a new global variable is created, which is a property on the global object (window in browsers), but if you use let or const in the global scope, a new binding is created in the global scope but no property added to the global object (window in browsers). That mean for var you can accidentally overwrite an existing global, but if you use let or const you cannot overwrite.

For example:

When var is being used:

When var is being used:

|Working with Unnamed Parameters

javaScript function parameters that are passed without defining are inspect through argument object. Though inspecting arguments works fine in most of the cases, this object can be a little hardly to work with. ES6 introduces the rest parameter to make it easier to work with unnamed parameters. The rest parameter allows any number of arguments as an array.

| The Spread Operator

Spread Operator takes in repeat (e.g an array) and expands it to list of arguments.

The … spread operator is useful for many different tasks including following:

  • opying an existing array
  • Merge or combine arrays
  • Call function without apply
  • Use in Math Functions
  • Use in destructuring
  • Use array as arguments
  • adding to state in React
  • Convert arguments or NodeList to Array

For Example:

| Arrow Function

ES6 allows an alternative way to write shorter syntax named arrow function compared to traditional function expression.

For example:

|Block-Level Functions

ES6 allows block-level functions which are hoisted on top of the function or hoisted into the global scope..

For Example:

--

--

Mahfuz Alam

I am an enthusiastic JavaScript developer with knowing some framework for the frontend and the backend.