10 ES6 Feature everyone should use

Jahid Apu
6 min readMay 6, 2021

1. Expression

Our code occasionally produces some line value. For example, 20 + 20 is equal to 40. Again some codes only take action. Such as conditional statements. These do not produce any value; take certain actions. Based on these, we differentiate between statements and expressions. Straight produces expression value in Bengali, and the statement only takes action. In the following example, 10 plus 10 has been added. Since the value has been produced here, it is an expression

10 + 10;

Expressions are usually one-line codes. A lot more can be added, but at the end of the day, he will produce value. The following examples are also expressions

'Jahid' + ' ' + 'Apu';

But whenever you go to assign these values ​​somewhere again, it will be considered as a statement. Such is the whole statement below

| — — | | var assign value = 10 + 10; |

2. Statement

On the other hand, the statement will take some action. Such as loop, conditional statement, and many more

if(10 < 20) {
console.log('It is true');
} else {
console.log('It is not True');
}

Above it is just taking action. According to the expression inside, the particular part is printing based on true or false. The same goes for everything else.

for(expressions) {
//Some Code here
}

do {
//Some code here
} while(expression);

while(expression) {
//Some code here
}

The statement is a few lines. Where the expression is one line most of the time, the statement can be several lines. So it can also be useful in recognizing expressions and statements.

3. Hoisting

This is the default behavior of JavaScript. In the previous episode where I discussed JavaScript’s Behind the Scenes, you will see that JavaScript always puts all the declarations first. This is basically hosting. Since this is the default behavior, you may not be able to write about it in many places. But to make JavaScript’s base strong, you need to know everything. And Hoisting’s example I’ve mentioned in several previous episodes. But in this episode, I will only discuss specific hosting. Since hosting is the default behavior, all the functions in JavaScript are hosted in the creation phase. That’s why we can actually call a function before declaring it if we want.

aFunc();

function aFunc() {
var a = 10;
var b = 20;
var sum = a + b;
console.log('Sum: ' + sum);
}

OUTPUT:

The reason for working is for the default behavior of JavaScript in the creation phase...

4. Event

An event is simply an event. I clicked somewhere in one of my HTML documents, it’s an event. Either I put a mouse pointer over an element, or I pressed a key on a keyboard, these are all part of the event Thus loading a page, resizing the page also falls into the event. There are many more such events that can happen in our HTML document, in different elements of the document. Now at such an event, we may want to take some action. For example, we may ask someone to click on a button to show a message. Or we will show a loader until our page is fully loaded. Or we will see if the input fields are valid when we submit the form. All this is done with the help of events. With the help of JavaScript events, a page can be made much like a dynamic page. We can often see instant results, actions without reloading the page by using JavaScript’s event. As a result, the overall user experience of one of our websites can be taken to a good level.

We didn’t see a special function before we started. The function of this function is to show alerts in our browser. For example, if I write such code directly on the console

alert('Hello World!');

As soon as it runs, you will see an alert box like this in your browser

5. Try statement

Where there is a possibility of error, the whole thing has to be kept inside this try block. If the code runs properly, then do it. But if an error occurs, it will automatically throw an error:

try {
console.aula('This is an error');
}

Now not only will this try block code run alone, but you will also need to have another statement with it

6. Catch statement

The job of the catch statement is to catch that thrown error. If there is no error then the code inside this block will not work. Basically, any error has to be handled here. In the example of the previous try, the try statement cannot work alone, but this catch statement will also be required:

try {
console.aula('This is an error');
} catch(err) {
console.log('Do anything here');
console.log(err);
}

Now you will see how beautiful the output is without showing any error directly

Not to print such an error in the catch block, but here you can give the user a nice text or message that this is not really happening, you have to do something else. All in all, the user can be given a good experience by handling the error here.

7. Throw statement

With this statement, we can throw a custom error. We can show custom error based on any condition in our code

const age = 17;
try {
if(age < 18) {
throw 'You are too young';
} else {
console.log('You are adult');
}
} catch(err) {
console.log(err);
}

8. Error object

JavaScript also has a built-in error object. An object means it also has property. If we want, we can create such an error object from the Error () constructor method. We threw a custom text using throw a while ago to show the error. But to make the error more real, more beautiful error objects can be created using this error () constructor. So it can be used to create more realistic errors in custom

const anError = new Error('This is a error object');

9. Arrow

Another new addition to JavaScript’s ES7 is the arrow function. Also known to many as the Fat Arrow function. It’s not really new, just syntactically nice to look at and a lot cleaner. There is a saying in the world of a programming language called Syntactic Sugar. This means it’s about to be the most delusional time of the year, as well.

In ES5, we write the function expression as follows:

var aFunc = function() {
console.log('A Demo ES5 Function Expression');
}

Now write that function in the arrow function

const aFunc6 = () => console.log('A Demo ES6 Arrow Function');

10. Scope

Scoping is another important issue in JavaScript. You need to know where you can access or use your declared variables/functions. If you want to privatize a variable or function or if you want to access a variable from all places, how, or where to declare it, I will discuss all this within scoping. There are two main types of scoping in JavaScript:
•Local scope
•Global scope

The main issues in scope are:
•Where you can access your variables or functions
•Each new function creates a scope
•Variables declared in one function cannot go to another function, meaning they cannot be accessed.

--

--

Jahid Apu

MERN Stack Developer | Programmer | Tech enthusiast