isha

6 Interesting Concepts in ES6+ !

Isha's photo
Isha
·

3 min read

When it comes to ES6 we tend to "I know it" form. Here is a list of few concepts to check if you really know them and get to perfection in your interviews. We will be discussing-

  • Polyfill & Shim
  • Hoisting
  • Temporal Dead Zone
  • Nullish coalescing operator
  • Difference between Compiler and Transpiler
  • Difference between arrow function & normal functions.

Polyfill

polyfill.jpg polyfill is just some code, which is used to provide modern functions to old browsers. (yes, you guessed it right!! because they don't support it, natively) Native implementations of APIs can do more and are faster than polyfills. And thats the reason why polyfills are not extensively used.

Shim

By English definition, the word shim is something that is used to fill space between two objects to make them better. Shim is the code that is used to correct already existing, usually by adding a new API that works similarly around the problem.

Hoisting

It basically means that the interpreter moves all the "var", "let", and "const" declarations up in the program to avoid errors. For Example, let's call a function before declaring it. This is a function that prints "Hoisting Tested. It Works!"

Hoisting();
function Hoisting(){
console.log("Hoisting Tested. It Works!")
}

Temporal Dead Zone(TDZ)

The DEAD Zone!!!!!

This at first sounded so scary to me. I assumed it will be that complex concept that my mind assumes to understand and forgets the same, while coding. But it's easy.

Basically in JS, we have the scope, that is defined using { }, this is also called block scope. And variables like let and const are restricted to this parenthesis only. Lets take an example, 

let yourAge = 16;
let birthdayToday = true;
   if(birthdayToday){
       let yourAge = 17;
}
//We assume the output should be 17. 
console.log(yourAge); //TDZ
//But the output is 16 due to {} surrounding and creating a block. 
//Try the same thing with var to see the difference yourself!!!!!!!!!!!!!!

Nullish coalescing operator(??)

So, it is a logical operator (??) and it returns right hand operand when it is left-hand side operand is null. It can be used as another form of writing a default parameter.

Difference between Compiler and Transpiler

The Level of abstraction is different in both of them. Compiler produces machine level codes but a transpiler produces code in any other language. For example, a compiler will change java to bytecode but a transpiler will convert java to kotlin.

Difference between arrow function & normal functions.

See, the goal is to get the function written in Javascript but but but my Friend, there is always right time for the right thing. So the usual and comfort is using the regular keyword called function. 

function showFunction(){
    console.log("This is a function.");
}
//The Second way

const showFunction = () => console.log("This is a function too. ");

Understanding the difference may seem boring as far as comfort level is concerned but they do help choose the right syntax for specific needs.

  1. this value inside a regular function is dynamic and depends on invocation But in arrow function is bound lexically.
  2. In arrow function, if its small writing return is not important.
  3. arguments object inside the regular functions contains the list of arguments.The arrow function does not define arguments but uses parameters like rest and spread.

To conclude this article, you can go through this amazing (not sponsored ) ES6 Handbook: The Complete Guide This book contains deep dive of concepts that will get your basics better and help you become a better programmer. Till my next article, keep showing off.

Shavi

jsJavaScriptWeb Development