ES6 Interview Questions | Freshers & Experienced

ES6 also known as ECMAScript 2015/ ECMAScript 6 is a version of ECMA Script programming language.ECMAScript standard name of Javascript and 6 major releases.It was released on in June 2015 and supports all major browsers like (Chrome 58 or above, Edge 14 or above, Firefox 54 or above, Safari 10 or above and Opera 55 or above).

ES6 comes with dozens of new features. Some of the major features of ECMAScript 2015 are as follows:

• New integer literals and Math functions
• Better syntax using Classes & Modules
• Support for Template Literals
• Multi-line Strings
• Destructuring Assignment
• Arrow Functions
• Promises
• Block-Scoped Constructs (Let and Constant)

Constants are immutable and block-scoped variables in ES6. const is used to declare a constant(non-changeable variable) in ES6. Variable declares with const keyword are read-only variable and their value cannot be changed/re-assigned.

Syntax for creating Constant

const VARIABLE_NAME = value;

Arrow functions are one of the new feature that was introduced in Es6. It provides a more concise and shorter way to write functions in JavaScript. Arrow functions don't have it's own bindings to the this, arguments, super, or new.target keywords.

Syntax

sayhello = (val) => "Hello " + val;
sayhello("World!");

Further Reading: Arrow functions in Depth

Note: Arrow are also known as "fat arrow" functions

In Es6 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.

Example

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

const numbers = [1, 2, 3];

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

console.log(sum.apply(null, numbers));
// expected output: 6

Further Reading: Understanding Spread syntax

Template literals in Es6 are simple and the easiest way to improve the readability of code while working with strings. It is used when we are working with multi-line strings, concatenation of variables and expressions in Javascript.

In ECMAScript 6 two new literals Template literals and Tagged template literals are introduced.

Template literals allow embedded expressions with backticks instead of single or double-quotes.

Example

    let name = "Ankush";
    let job = "Javascript Developer";
    let tools = "Node, JavaScript and HTML";
    console.log(`My name is ${name} and I am a ${job} . I write code on ${tools}.`);

Output:

My name is Ankush and I am a Javascript Developer. I write code on Node, JavaScript and HTML.

An iterator is an object which returns a value when it is terminated and identifies a sequence. An iterator implements a protocol for iterator that returns an object with a value and is done via the next() method. The array is the most common one among the iterators in Javascript. It returns every value in an array sequence.

Generators define a powerful iterative algorithm by writing a single function that has non-continuous execution. Generators are indicated by the syntax function*. When the next method of the Generator consumes a value, the function continues its execution until the yield keyword is encountered. The generator function can be called multiple times, but the generator is iterated only once.

WeakMap in ES6 offers a way for the extension of the objects from outside without disturbing the garbage collection. Enabling a WeakMap means the keys are very weak. There is no way to get all the values of a WeakMap or enumerate it. In WeakMap, the data is stored inside a key until the key gets deleted along with the values.

WeakMaps stores the metadata of the DOM elements. It can be used to numerically index all the elements within a webpage. WeakMaps help in the cache of memorization of the functions that insert immutable object parameters. It is great for the creation of memos.

Webpack gives you control over how to treat different assets it encounters. It is basically a tool that lets you bundle your JavaScript applications. Some of its benefits are as follows:

• You can decide to inline assets to your JavaScript bundles to avoid requests.
• It allows you to use techniques like CSS Modules to couple styling with components, and to avoid issues of standard CSS styling.
•  It can be extended to support many different assets such as images, fonts, and stylesheets.

In Es6, a set can be defined as a collection of items that are unique i.e no element can be repeated. They are ordered which means elements of the set can be iterated in the insertion order and can store any type of values whether primitive or objects.

In Es6, a module is like a chunk written in a file such that the variables and functions of a module are not available for use. Instead, the variables and functions within a module should be exported so that they can be accessed from within other files. Modules in ES6 work only in strict mode.

Temporal dead zone is situation where you don't have access a variable before it is defined. Es6 is strictly supporting the Temporal dead zone.

Here is an example

console.log(name);
var pizza = 'Uttkarsh';

In Es6 the above code generates an error that name is undefined and breaks the execution of program.

The major differences between let, const, and var are:

• The declarations by var are a function or globally scoped. Let and const declarations are block-scoped.
• The variables of var are updated and redeclared within its scope. Let variables cannot be re-declared but can be updated. Const variables can neither be redeclared or updated.
• Var and let can be declared without any initialization. Const should be initialized while during declaration.
• Var, let and const are three are hoisted to the top scope. The variables of var are initialized by undefined. The variables of let and const are not initialized.

Inheritance alludes to a target's ability to retrieve methods and more different properties from an additional object. Targets can inherit attributes from a second object. Inheritance is present in JavaScript projects through an entity known as prototypes and hence this structure of inheritance is generally known as prototypal inheritance. Prototypal Inheritance aids in creating unique and admirable programming languages in JavaScript.

Thus, the key aim of Prototypal Inheritance makes an object point towards some other object and assume entirely its properties. This allows various specifications of a targeted object to allocate familiar properties.

ES6 classes helps developer to write code that easier to read or express.It formalize the common JavaScript pattern of simulating class-like inheritance hierarchies using functions and prototypes. Es6 Classes are defined using class keyword. They provide ability to create an new entities from an existing entity using concept of Inheritance. Class Example in Es6 with Inheritance

use 'strict' 
class Shape { 
   constructor(a) { 
      this.Area = a
   } 
} 
class Rectangle extends Shape { 
   disp() { 
      console.log("Area of the rectangle:  "+this.Area) 
   } 
} 
var obj = new Rectangle(300); 
obj.disp()