ES6 Topic For Interview Question

Hoisting

what is hoisting?

Basically, when JavaScript compiles all of your code, all variable declarations using var are lifted to the top of their functional/local scope (if declared inside a function) or to the top of their global scope (if declared outside of a function) regardless of where the actual declaration has been made. This is what we mean by “hoisting”. Now bear in mind, this notion of ‘hoisting’ doesn’t literally happen in your code, but is rather something that happens figuratively, and relates to how the JavaScript compiler reads through your code. Hopefully that makes sense to you. Either way, continue reading and just bear in mind that when we think of “hoisting” we can visually imagine that whatever is being hoisted is being moved to the top, but in theory, no code is literally moving around.

Block-Level Declarations

Block-level declarations are the ones that declare variables that are far outside of a given block scope. Block scopes, also known as lexical scopes, are created either inside of a function or inside of a block (indicated by the { and } characters). Block scoping is how many C-based languages work, and the introduction of block-level declarations in ECMAScript 6 is intended to bring that same flexibility (and uniformity) to JavaScript.

Loops and block-level declarations

Many developers never realized that for-loop declarations were one of the areas that required block-level variable declarations the most. Take the following for example:

for (var i = 0; i < 10; i++)
{
    // code goes here
}
console.log(i);   // still works!

In this case, the ‘i’ variable is still accessible outside of the for loop! Which pollutes our variable namespace in the long term. This could also have issues if you had multiple for loops in a given function, in which case you would end up re-declaring the ‘i’ variable, which might not be the intended effect.

for (let i = 0; i < 10; i++)
{
}
console.log(i) // error!

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

Arrow function

Arrow functions (also called “fat arrow functions”) are undoubtedly one of the more popular features of ES6.

using Arrow function

var timesTwo = params => params * 2

timesTwo(4);//8

It’s much shorter! We are able to omit the curly braces and the return statement due to implicit returns.

Spread syntax (…)

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Spread syntax (…)

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

function sum(x, y, z) {
return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(…numbers));
// expected output: 6

Anonymous Functions

Anonymous functions are functions without a name. There are a couple of ways to create anonymous functions however they are all created on application runtime. The example below shows that the FoodName function is only created when we hit this line in the program.

var FoodName= function (name) {
  console.log(name + ' Rice!');
}