ES6 Interview Questions
I have listed some of the top rated interview questions for ES6 asked during the interview.
I have listed some of the top rated interview questions for ES6 asked during the interview.
What are the new features introduced in ES6
Let and const keywords.
Default Parameters.
Arrow functions.
Template Literals.
Object Literals.
Rest and spread operators.
Destructuring assignment.
Modules, Classes, Generators, and iterators.
Promises, and many more.
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.
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.
An Arrow function is also called as ‘fat arrow’ function. We cannot use them as constructors.
const functionName = (arg1, arg2, …) => {
//body of the function
}
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.
It is also used to combine or to perform the concatenation between arrays.
let num1 = [40,50,60];
let num2 = [10,20,30,…num1,70,80,90,100];
console.log(num2);
result
[
10, 20, 30, 40, 50,
60, 70, 80, 90, 100
]Rest parameter in ES6 with an example
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 show(…args) {
let sum = 0;
for (let i of args) {
sum += i;
}
console.log(“Sum = “+sum);
}
show(10, 20, 30);
result
Sum = 60What are the template literals?
Provides an easy way of creating multiline strings and perform string interpolation. Template literals allow embedded expressions and also called as string literals.
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);
Result
Hello WorldDestructuring Assignment in 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);
Alan RickmanHow to create a class in ES6
class class_name{
}
Generator 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.
function* gen()
{
yield 100;
yield;
yield 200;
}
// Calling the Generator Function
var mygen = gen();
console.log(mygen.next().value);
console.log(mygen.next().value);
console.log(mygen.next().value);
result
100
undefined
200What are the default parameters?
default parameters, we can initialize named parameters with default values if there is no value or undefined is passed.
var show = (a, b=200) => {
console.log(a + “ “ + b);
}
show(100);
result
100 200What 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”);
})();
Hello WorldDiscuss 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 Mobile(model_no){
this.Model = model_no;
this.Color = ‘White’;
this.RAM = ‘4GB’;
}
var Samsung = new Mobile(“Galaxy”);
for(var props in Samsung)
{
console.log(props+ “ : “ +Samsung[props]);
}
result
Model: Galaxy
Color: White
RAM: 4GBDiscuss the for…of loop.
This loop is used for iterating the iterables (arrays, string, etc.).
var fruits = [‘Apple’, ‘Banana’, ‘Mango’, ‘Orange’];
for(let value of fruits)
{
console.log(value);
}
Apple
Banana
Mango
OrangeDefine 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 colors = new Set([‘Green’, ‘Red’, ‘Orange’, ‘Yellow’, ‘Red’]);
console.log(colors);
result
Set { 'Green', 'Red', 'Orange', 'Yellow' }Define Map
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.
What do you understand by Weakset
Using weakset, it is possible to store weakly held objects in a collection. As similar to set, weakset cannot store duplicate values. Weakset cannot be iterated.
Weakset only includes add(value), delete(value) and has(value) methods of the set object.
What do you understand by Weakmap?
Weak maps are almost similar to maps, but the keys in weak maps must be objects. It stores each element as a key-value pair where keys are weakly referenced. Here, the keys are objects, and the values are arbitrary.
A weak map object iterates the element in their insertion order. It only includes delete(key), get(key), has(key) and set(key, value) method.
Explain Promises in 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.
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.
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.
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.
What is 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.
Define 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.
Define Webpack.
It is an open-source JavaScript module bundler that takes modules with dependencies. It allows us to run an environment that hosts Babel.