Top 26 ES6 Interview Questions & Answers 2021

es6 interview questions

In this article, we will mention ES6 interview questions & answers for fresher and experienced candidates. These interview questions will help you understand the basics of ES6 standardized language for Javascript and clear the job interview.

Top ES6 Interview Questions & Answers


Q1. What do you know about ES6?

ES6 (ECMAScript 6) is a consistent language for JavaScript, was released in June 2015.

Q2. What are the new features added in ES6?

The new features that are added in ES6 are:

  • 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 much more.

Q3. What do you know about Destructuring assignment in ES6?

It is a JavaScript expression that enables us to unpack values from arrays, or properties from objects, into distinct variables.

Example:

let full_name =[‘Paula’,’Fier’];

let [first_name,last_name]=full_name;

console.log(first_name,last_name);

// output: Paula Fier

Q4. What do you know about Constants in ES6?

It is the type of variables whose value cannot be changed. The value remains the same as that has been assigned at the time of the declaration. For example, const Z= 7.0, here the value of Z remains 7 every time and it cannot be changed.

Constants are also known as Immutable variables.

Q5. Tell me about block-scoped variables and functions?

The variables and functions declared in any function block and their scope limit to that function only, are known as block-scoped variables and functions. We cannot access them outside the block/function. ‘Const’ keyword cannot change the value of a variable. ‘let’ keyword allows variable value to be re-assigned, it can be in for loop or arrays.

Q6. What are the arrow functions?

The functions which support expressions bodies and statement bodies which return the value of an expression and makes the syntax more expressive are knowns as array functions. We cannot use them as constructors. These also have lexical ‘this’ feature. Arrow (=>) is used as part of the syntax.

Example:

hello = () => "Hello World!";

Q7. What are template literals in Es6?

Template literals are the string literals which allows embedded code and variables inside. We can use multi-line strings and string interpolation features with them. These were known as “template strings” in the prior edition of ES6.

Here is an example of concatenating a string in JavaScript.

var x="Hello";
var y="Parveen";
var z = x+ " " + y;
Console.log(c); //outputs Hello Parveen;

In ES6 concatenation and interpolation is performed by backtick “ in a single line. To interpolate a variable simply put into {} braces forwarded by $ sign.

let x="Hello";
let y="Parveen";
let z=`${a} ${b}`;
console.log(c); //outputs Hello Parveen;

Q8. What do you know about Spread Operator in ES6?

The operator which allows an iterable to expand in places where 0+ arguments are expected is known as Spread operator. The spread operator is commonly used in the variable array where there is more than 1 values are supposed to exist. It enables us to obtain a list of parameters from an array.

Syntax:

var variablename1 = [...value];

In the above syntax, “…” is spread operator which will target all values in a specific variable.

Q9. What do you know about Set in ES6?

The Set object enables us to store unique values of any type, whether primitive values or object references. In other words, the set is a collection of values. We can iterate through the elements of a set in insertion order. All values in a Set are unique.

Q10. What do you know about WeakMap in ES6?

It is a collection of key or value pairs in which the keys are weakly referenced. The keys must be objects and the values can be arbitrary values. The WeakMap object doesn’t allow primitive data types as keys.

Example:

const wm1 = new WeakMap(),
wm2 = new WeakMap(),
wm3 = new WeakMap();
const o1 = {},
o2 = function() {},
o3 = window;
wm1.set(o1, 37);
wm1.set(o2, 'azerty');
wm2.set(o1, o2); // a value can be anything, including an object or a function
wm2.set(o3, undefined);
wm2.set(wm1, wm2); // keys and values can be any objects. Even WeakMaps!
wm1.get(o2); // "azerty"
wm2.get(o2); // undefined, because there is no key for o2 on wm2
wm2.get(o3); // undefined, because that is the set value
wm1.has(o2); // true
wm2.has(o2); // false
wm2.has(o3); // true (even if the value itself is 'undefined')
wm3.set(o1, 37);
wm3.get(o1); // 37
wm1.has(o1); // true
wm1.delete(o1);
wm1.has(o1); // false

Q11. Explain Destructuring assignment in ES6?

Destructuring assignment is a unique syntax in JavaScript which enables us to “unpack” arrays or objects into a collection of variables, as sometimes that’s more comfortable.

Example: Expressions – Destructuring assignment

let a, b, rest;
[a, b] = [70, 80];
console.log(a);
// expected output: 70
console.log(b);
// expected output: 80
[a, b, ...rest] = [70, 80, 90, 100, 110];
console.log(rest);
// expected output: Array [90, 100, 110]

Syntax:

Array restructuring:

var a, b;
[a, b] = [30, 40];
console.log(a); // 30
console.log(b); // 40

Object destructuring:

({ a, b} = { a: 30, b: 40 });
console.log(a); // 30
console.log(b); // 40

Other questions asked:

Q12. Explain Generator function in ES6?

A generator function (or generator) is a function that has the ability to stop midway and then continue the operation from where it stopped. It seems like a function but it behaves like an iterator and denoted by function*. It is based on the run-to-completion model.

Syntax:

function* name([param[, param[, ... param]]]) {
statements
}

Example:

function* generator(i) {
yield j;
yield j + 12;
}
const gen = generator(12);
console.log(gen.next().value);
// expected output: 12
console.log(gen.next().value);
// expected output: 24

Q13. What is Babel?

It is a JavaScript compiler that is responsible for converting ES6 code into a backwards-compatible version of JavaScript in current and older web browsers or environments. Below are the key tasks of Babel:

  • Transform syntax
    Polyfill features that are missing in your target environment (through @babel/polyfill)
    Source code transformations (codemods)

Q14. How to install Babel?

You need node.js and NPM to install Babel. Ensure that you have installed Node.js on your server.

Run the following commands on your terminal to check node installation:

node -v 
npm -v

Then run the following command on the terminal to install Babel CLI locally:

npm install --save-dev babel-cli

Q15. What is Webpack?

Webpack enables us to run an environment that hosts Babel. It is an opensource JavaScript module bundler that takes modules with dependencies and generates static assets representing those modules.

Q16. What are the benefits of using Webpack?

Here are the advantages of Webpack:

  • It groups your multiple modules and packs it into a single JavaScript (.js) file.
  • It has an integrated dev server which is a small express app for local development. You just simply need to include one Javascript tag pointed to the server, like localhost:8080/assets/bundle.js, and get live code updating and asset management for free.

Q17. How to create a Javascript class in ES6?

We can create a JavaScript class using the Class keyword in ES6. Here is an example:

class Student{
constructor(name,roll) {
this.name = name;
this.roll = roll;
}
getData() {
console.log(this.name + " have " + this.roll + " as roll number ");
}
}
var student = new Student("parveen", 17);
s1.getData();

Q18. What is promise in ES6?

It represents the eventual status (completion or failure) of an asynchronous operation and its resulting value in JavaScript. It has the following states:

  • pending: starting phase, neither fulfilled nor rejected.
    fulfilled: it states that operation was completed successfully.
    rejected: it states that the operation failed.

Q19. What are the data types supported in Java Script?

The following data types are supported in JavaScript:

  • Number
  • Boolean
  • String
  • nul
  • undefined
  • Symbol
  • Object

Q20. How to get the list of all properties in an Object?

We can get it by simply using Object.Keys (). This will revisit a collection of given Object’s enumerable properties. If we need all properties, even not-enumerable properties also, we can use Object.getOwnPropertyNames().

Q21. Tell me about exception handling?

Exception handling in JavaScript is done with a try…catch statement. When the program throws an exception, the program will terminate in an unfriendly manner. To protect our code against this unanticipated error, we can enclose it in a try…catch statement.

Syntax:

try { 
// Code to run 
[break;] 
} catch ( e ) { 
// Code to run if an exception occurs
[break;] 
}[ finally { 
// Code that is always executed regardless of 
// an exception occurring 
}]

Example:

var x = 50;
var y = 0;
try {
if (y == 0 ) {
throw(“Divide by zero error.”);
} else {
var z = x / y;
}
}
catch( e ) {
console.log("Error: " + e );
}
Output
The following output is displayed on successful execution of the above code.
Error: Divide by zero error

Q22.Define call back in JS?

It is a function passed as an argument to another function. This method enables a function to call another function. A callback function can run after another function has finished.

Example:

myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Good Morning");
}
myFirst();
mySecond();
Output: Good Morning

Q23. Define negative infinity?

It is a constant in JavaScript which is used to represent a lowest available value i.e. no other number is lesser than this value. It can be generated using a self-made function or by an arithmetic operation.

Syntax:

Number.NEGATIVE_INFINITY

Example:

<!DOCTYPE html>
<html>
<body>
<style>
h1 {
color: green;
}
</style>
<h1>Crack Career</h1>
<h1>
Tell me about negative infinity in JavaScript?
</h1>
<button onclick="CCNegativeInfinity()">
Create negative infinite
</button>
<p id="cc"></p>
<script>
function CCNegativeInfinity() {
//negative value greater than the
//largest representable number in JavaScript
var n = (-Number.MAX_VALUE) * 2;
document.getElementById("cc").innerHTML = n;
}
</script>
</body>
</html>

Q24. How to empty an array?

We can empty an array by using: Array.Length = 0;

Q25. Define constructor?

It is a special method of a class for creating and initializing an object of that class.

Example:

class Polygon {
constructor() {
this.name = 'Polygon';
}
}
const poly1 = new Polygon();
console.log(poly1.name);
// expected output: "Polygon"

Q26. How to create an array in Javascript?

We can create an array in JS by using array literal.

Syntax:

var array_name = [item1, item2, ...];

Example:

var studentDetails = [0];
studentDetails [0]=” STU”;
var  studentDetails = [131,”KJOHN”, “503”];
var studentDetails = new Array("ROLL", "NAME", "ADID");

So, these are some of frequently asked ES6 questions in JavaScript job interview. I hope this article will help you prepare for your next job interview. All the best !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top