Javascript ES6 interview questions and answers?

Please explain ES6 new features with important questions and answers.

A list of important questions and answers which are frequently asked in interviews.

 

1) What is ES6 or ECMAScript 2015?

It was released in June 2015, which is also known as the sixth edition of the language. Earlier, it was named ES6 and later renamed to ECMAScript 2015. There are several new features are introduced like modules, iterators, class, arrow functions, for...of loop, promises, and many more and it was developed by Brendan Eich.

 

2) Define ECMAScript.

It is the specification that is defined in the ECMA-262 standard to create a general-purpose scripting language.

 

3) What are the new features introduced in ES6?

The new features that are introduced in ES6 are listed as follows:

Let and const keywords.

Default Parameters.

Arrow functions.

Template Literals.

Object Literals.

Rest and spread operators.

Destructuring assignment.

Modules, Classes, Generators, and iterators.

Promises etc.

 

4) Define let and const keywords.

let: The variables declared using let keyword will be mutable, i.e., the values of the variable can be changed. It is similar to var keyword except that it provides block scoping.

const: The variables declared using the const keyword are immutable and block-scoped. The value of the variables cannot be changed or re-assigned if they are declared by using the const keyword.

 

5) What is the arrow function, and how to create it?

Arrow functions are introduced in ES6. Arrow functions are the shorthand notation to write ES6 functions. The definition of the arrow function consists of parameters, followed by an arrow (=>) and the body of the function.

 

6) Give an example of an Arrow function in ES6? List down its advantages.

Arrow function provides us a more accurate way of writing the functions in JavaScript. They allow us to write smaller function syntax.

The context within the arrow functions is lexically or statically scoped. Arrow functions do not include any prototype property, and cannot be used with the new keyword.

Advantages of Arrow Function

It reduces code size.

The return statement is optional for a single line function.

Lexically bind the context.

Functional braces are optional for a single-line statement.

 

7) Discuss spread operator in ES6 with an example.

The spread operator is represented by three dots (...) to obtain the list of parameters. It allows the expansion of an iterable such as array or string in places where more than zero arguments are expected.

The spread operator syntax is similar to the rest operator, but functionality is entirely opposite to it. It is also used to combine or to perform the concatenation between arrays. For example:

let arr1 = [40,50,60];  

let arr2 = [10,20,30,...arr1,70,80,90,100];  

console.log(arr2); 

Output:

[ 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ]

 

8) Discuss the Rest parameter in ES6 with an example.

It is introduced in ES6 that improves the ability to handle the parameters. With rest parameters, it is possible to represent indefinite parameters as an array. By using the rest parameter, we can call a function with any number of arguments.

function testFunc(...args) {  

    let sum = 0;  

    for (let i of args) {  

        sum += i;  

    }  

    console.log("Sum = "+sum);  

  }  

  testFunc(10, 20, 30);  

Output: Sum = 60

 

9) What are the template literals in ES6?

Template literals are a new feature introduced in ES6. It provides an easy way of creating multiline strings and perform string interpolation.

Template literals allow embedded expressions and also called as string literals.

Prior to ES6, template literals were referred to as template strings. Template literals are enclosed by the backtick (` `) character. Placeholders in template literals are represented by the dollar sign and the curly braces (${expression}). If we require to use an expression within the backticks, then we can place that expression in the (${expression}).

let str1 = "Hello";  

let str2 = "World";  

let str = `${str1} ${str2}`;  

console.log(str);

Output:  Hello World

 

10) Discuss Destructuring Assignment in ES6.

Destructuring is introduced in ECMAScript 2015 or ES6 to extract data from objects and arrays into separate variables. It allows us to extract smaller fragments from objects and arrays.

let fullname =['Alan','Rickman'];  

let [fname,lname] = fullname;  

console.log (fname,lname); 

 

11) How to create a class in ES6?

This keyword is used for creating the class. We can include the classes in our code either by using class expression or by class declaration. A class definition can only include functions and constructors. These components are together called as data members of the class.

Constructors in classes allocate the memory to the objects of the class. Functions in a class are responsible for performing the actions to the objects.

class class_name{    

}  

 

12) What do you understand by Generator function?

A generator provides us a new way to work with iterators and functions. The generator is a special kind of function that may be paused in the middle either one or many times and can be resumed later. The declaration function* (function keyword followed by an asterisk) is used to define a generator function.

When the generator gets called, it does not run its code. Instead, it returns a special object, which is called a Generator object to manage the execution. Let us see an example of generators in ES6.

function* test()    

{    

yield 100;    

yield;    

yield 200;    

}    

// Calling the Generator Function    

var mygen = test();    

console.log(mygen.next().value);    //100

console.log(mygen.next().value);    //undefined

console.log(mygen.next().value);  //200

 

13) What do you mean by IIFE (Immediately invoked function expressions)?

IIFE is a function in JavaScript that runs as soon as it is defined. It is also called as the Self-Executing Anonymous Function. It includes two major parts that are as follows:

The first part is an anonymous function that has a lexical scope (static scope), which is enclosed within the Grouping operator ().

The second part creates the IIFE by which the JavaScript engine will interpret the function directly.

(function()    

 {    

 console.log("Hello World");     

})();  

 

14) Discuss the for...in loop.

It is similar to for loop that iterates through the properties of an object. It is useful when we require to visit the properties or keys of the object.

function MobileFunc(model_no){    

    this.Model = model_no;    

    this.Color = 'White';    

    this.RAM = '6GB';    

    }    

    var Samsung = new MobileFunc("Galaxy");    

    for(var props in Samsung)    

    {    

    console.log(props+ " : " +Samsung[props]);    

    }

 

15) Discuss the for...of loop.

This loop is used for iterating the iterables (arrays, string, etc.).

var fruitsArr = ['Apple', 'Banana', 'Mango', 'Orange'];    

for(let value of fruitsArr)    

{    

  console.log(value);     

}    

 

16) What is set.

A set is a data structure that allows us to create a collection of unique values. It is a collection of values that are similar to arrays, but it does not include any duplicates. It supports both object references and primitive values.

let colorsArr = new Set(['Green', 'Red', 'Orange', 'Yellow', 'Red']);    

console.log(colorsArr);    

17) What is Map.

Prior to ES6, when we require the mapping of keys and values, we often use an object. Map object is a new collection type, which is introduced in ES6. It holds the key-value pairs in which any type of values can be used as either keys or values.

A map object always remembers the actual insertion order of the keys. Maps are ordered, so they traverse the elements in their insertion order.

 

18) Explain Promises in ES6.

ES6 promises are the easiest way to work with asynchronous programming in JavaScript. Asynchronous programming includes running of processes individually from the main thread, and it notifies the main thread when it gets complete.

Prior to ES6, there is the use of Callbacks for performing asynchronous programming. Promises are used to overcome the problem of Callback hell.

 

19) What are the states of promises in ES6?

Promises have mainly three states that are as follows:

Pending: It is the initial state of every promise. It represents that the result has not been computed yet.

Fulfilled: It represents the completion of an operation.

Rejected: It represents the failure that occurs during computation.

Once the promise is fulfilled or rejected, then it will be immutable. The Promise() constructor takes two arguments that are rejected function and a resolve function. Based on the asynchronous operation, it returns either the first argument or the second argument.

 

20) What do you understand by Callback and Callback hell in JavaScript?

Callback: It is used to handle the execution of function after the completion of the execution of another function. A callback would be helpful in working with events. In the callback, a function can be passed as an argument to another function. It is a great way when we are dealing with basic cases such as minimal asynchronous operations.

Callback hell: When we develop a web application that includes a lot of code, then working with callback is messy. This excessive Callback nesting is often referred to as Callback hell.

 

21) Define Modules in JavaScript.

Modules are the piece of JavaScript code written in a file. By using Modules, it is easy to maintain the code, debug the code, and reuse the code. Each module is a piece of code that gets executed once it is loaded.

 

22) What do you understand by the term Hoisting in JavaScript?

It is a JavaScript's default behavior, which is used to move all the declarations at the top of the scope before the execution of code. It can be applied to functions as well as on variables. It allows the JavaScript to use the component before its declaration. It does not apply to scripts that run in strict mode.

 

23) List the new Array methods introduced in ES6?

There are many array methods available in ES6, which are listed below:

Array.of()

Array.from()

Array.prototype.copyWithin()

Array.prototype.find()

Array.prototype.findIndex()

Array.prototype.entries()

Array.prototype.keys()

Array.prototype.values()

Array.prototype.fill()

 

23) What are the new String methods introduced in ES6?

There are four string methods introduced in ES6 that are listed as follows:

string.startsWith()

string.endsWith()

string.includes()

string.repeat()

 

24) What is Babel.

Babel is one of the popular transpilers of JavaScript. It is mainly used for converting the ES6 plus code into the backward-compatible version of JavaScript that can be run by previous JavaScript engines.

 

25) What is Webpack.

It is an open-source JavaScript module bundler that takes modules with dependencies. It allows us to run an environment that hosts Babel.