Home >> Interviews Q & A >> ES6 Interview Questions

ES6 Interview Questions

ES6 Interview Questions: ES6 is also known as ECMAScript 2015.
ES6 Interview Questions
Q:- What is ES6?
  • ES6 is also known as ECMAScript 2015.
  • ES6 or ECMAScript 2015 is a 6th major release of ECMAScript.
  • If your browser doesn't support ES6, then you can write ES6 commpatible code using Babel and Webpack.
  • ES9 (ECMAScript 2018) is the latest verison of ECMAScript.
Q:- What is ECMAScript?

ECMAScript is the specification defined in ECMA-262 standard for creating a general purpose scripting language.

Q:- What is JavaScript?

A general purpose scripting language that conforms to the ECMAScript specification.

Q:- What is JavaScript Engine?

A program or interpreter that understands and executes JavaScript code.

Most Popular JavaScript Engine:
  1. Google Chrome - V8 // Fastest JavaScript Engine
  2. Mozilla FireFox - SpiderMonkey
  3. Microsoft Edge - Chakra
Q:- What is Babel?
  • Babel is the one of the most popular javascript transpiler
  • Babel is mainly used to convert ES6+ (ECMAScript 2015+) code into a backwards compatible version of JavaScript that can be run by older JavaScript engines.
Q:- What is Webpack?
  • Webpack allow you to run an environment that hosts Babel.
  • Webpack is an open-source javascript module bundler which takes modules with dependencies and generates static assets representing those modules.
Benefits of using Webpack:
  1. It bundles your multiple modules and packs it into a single .js file.
  2. It comes with integrated dev server. A small express app for local development.You simply include one Javascript tag pointed to the server, like localhost:8080/assets/bundle.js, and get live code updating and asset management for free.
You may also like - Node.js Interview Questions Answers
Q:- List some new features in ES6?
New Features in ES6:

Top 10 ES6 Features that every JavaScript Developer must know.

  1. Let and Const Keywords
  2. Arrow functions
  3. Template Literals
  4. Object Literals
  5. Default Parameters
  6. Destructuring Assignment
  7. Rest and Spread Operators
  8. Modules, Classes, Iterators, Generators in ES6
  9. Promises in ES6
  10. Support for Map/Set & WeakMap/WeakSet
1. Let and Const Keywords:
Const Keyword:
  • const keyword used to define constants in ES6.
  • it is also known as immutable variables.
  • The value of a constant cannot change through reassignment, and it can't be redeclared.
const MY_CONST = "Javascript ES6 Interview Questions";
console.log(MY_CONST); //Javascript ES6 Interview Questions
MY_CONST = "ES6 Interview Questions";
console.log(MY_CONST); // Uncaught TypeError: Assignment to constant variable, because we cannot re-assign a new value to a constant

In case of Object and Array we can push new items to it

const myObject = {'name': 'Full Stack Tutorials'};
// If you will attempt to overwrite/reassign/redeclare the object throws an error.

myObject = {'name': 'Full Stack Tutorials'}; //Uncaught TypeError: Assignment to constant variable.
myObject = {'fullname': 'Full Stack Tutorials'}; //Uncaught TypeError: Assignment to constant variable.

// Since, object keys are not protected, below code will run successfully.
myObject.name = 'Anonymous User'; // You can use Object.freeze() to make object immutable

const myArray = ["Javascript", "Node.js", "React.js"];
// It's possible to push items into the array
myArray.push("jQuery");
// But assigning a new Array to the same variable will throws an error.
myArray = ["jQuery"]; //Uncaught TypeError: Assignment to constant variable.
Object.freeze()
Object.freeze works on values and it makes an object immutable.

Object.freeze() takes an object as an argument and returns the same object as an immutable object

Once you have frozen the object you cannot change, add or delete object's properties, but you can assign another instance.

const myObject = {'name': 'Full Stack Tutorials'};
Object.freeze(myObject);
myObject.name = 'Anonymous User'; // will throws an error in strict mode
console.log(myObject.name); // Output: Full Stack Tutorials
Let Keyword:

ES6 introduces the new let keyword that allows us to declare local variables in the scope of a block.

let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used.

let a = 10;
funtion testMe(){
	let a = 20;
	console.log(a); // 20
}
console.log(a); // 10
2. Arrow Functions:
  • An arrow function has a shorter syntax than a regular function.
  • In Arrow function there is no existence of this keyword.
(param1, param2, …, paramN) => { 
//statements or code
}
//in ES5
var sum = function(a, b) {
return a + b; 
};
console.log(sum(10,40)); // 50

----------------------------
//in ES6
var total = (x, y) => {
	return (x + y);
}
console.log(total(20,30)); // 50
You may also like - JavaScript Interview Questions
3. Template literals:

ES6 introduce a new and easy to use string templates with placeholders for variables.

  • Template literals are enclosed by the back-tick (` `).
  • You can use multi-line strings.
  • You can use a new syntax ${variable_name} inside of the back-ticked string.
  • Before ES6 it was called Template Strings.
//Example-1

var num1 = 10;
var num2 = 20;
console.log(`The sum of ${num1} and ${num2} is ${num1 + num2}.`); 

//Output: The sum of 10 and 20 is 30

//Example-2

var TempBody = `Hello Users! Your are reading about ES6 Features,
    In ES6, you are implementing Template Literals.
    Let me show you the sum of ${num1} and ${num2} is ${num1 + num2}. 
	Hope you have understood the concept of Template Literals.`;
	
console.log(TempBody);
4. Object literals:

A JavaScript object literal is a comma-separated list of name-value pairs wrapped in curly braces.

var myObject = {
    title: 'ES6 Interview Questions and Answers',
    topic: 'Object Literals',
    status: true,
	myFunction: () => {
		// Block of Code
	}
};
5. Default Parameters:

Default function parameters allow named parameters to be initialized with some default values if no value or undefined is passed.

//3rd parameter has default value zero.

let addNumbers = (a, b, c = 0) => {
  return a + b + c;
}

console.log(addNumbers(1, 2, 2)); //5
console.log(addNumbers(5, 20)); //25
6. Destructuring Assignment

Destructuring assignment is a special syntax that allows you to "unpack" arrays or objects into a bunch of variables, as sometimes they are more convenient.

// we have an array with the first_name middle_name and last_name
let arr = ["Full", "Stack", "Tutorials"]

// destructuring assignment
let [first_name, middle_name, last_name] = arr;

console.log(first_name); // Full
console.log(middle_name); // Stack
console.log(last_name); // Tutorials
You may also like - React.js Interview Questions
7. REST and Spread operator:

The spread operator, or the three dots, (…) is a new operator introduced in ES6. It allows the expansion of an iterable (e.g., Array) into its constituent elements.

const t = [1, 2, 3];

const s = [...t, 4, 5, 6];

console.log(s); // [1, 2, 3, 4, 5, 6];
Example:- Remove duplicates items from an array using ES6 Set?
The Set object lets you store unique values of any type, whether primitive values or object

Here’s a one-liner to remove duplicates from an array. (ES6, of course!)

const numbers = [1, 2, 3, 4, 5, 5, 5, 5, 5, 5];

function removeDuplicates(array) {
  return [...new Set(array)];
}
console.log(removeDuplicates(numbers)); // [1, 2, 3, 4, 5]

Set was introduced in ES6 and is similar to the Sets we encounter in Mathematics: They can’t have duplicates. After we have done that, we simply convert the Set back to an array by using the spread operator.

8. Class In ES6:
class User{
    constructor(name, age) {
        this.name  = name;
        this. age = age;
    }
   getUserDetails() {
        console.log(this.name + " is " + this. age + " years old!");
    }
}

var userObj = new User("Full Stack Tutorials", 5);
console.log(userObj.getUserDetails());

//Output: Full Stack Tutorials is 5 years old!
Generators

A generator is a function that can stop midway and then continue from where it stopped. In short, a generator appears to be a function but it behaves like an iterator.

function* process() {
    console.log('Start process 1');
    console.log('Pause process2 until call next()');

    yield;

    console.log('Resumed process2');
    console.log('Pause process3 until call next()');

    yield;

    console.log('Resumed process3');
    console.log('End of the process function');
}

let _process = process();
yield:
  • yield keyword simply helps to pause and resume a function in any time asynchronously.
  • Additionally it helps to return value from a generator function.
Usages:
  • Lazy evaluation
  • Infinite sequences
  • Asynchronous control flows
9. Promise:
Promises are used to handle asynchronous operations in JavaScript.

A promise is an object which can be returned synchronously from an asynchronous function.

Promise overcome the problem of callback hell.

Promise States:
  • Fulfilled: onFulfilled() will be called (e.g. resolve() was called).
  • Rejected: onRejected() will be called (e.g. reject() was called).
  • Pending: initial state, neither fulfilled nor rejected.
Promise Consumers: then, catch, finally
var promise = new Promise(function(resolve, reject) { 
const A = "fullstacktutorials"; 
const B = "fullstacktutorials"
if(A === B) { 
	resolve(); 
} else { 
	reject(); 
} 
}); 

promise. 
	then(function () { 
		console.log('Success, Your promise has been resolved successfully'); 
	}). 
	catch(function () { 
		console.log('Something went wrong!'); 
	}); 
10. Map:

The Map object is a simple key/value map.

Any value (both objects and primitive values) may be used as either a key or a value. Syntax [key, value].

hash = new Map()
hash.set("FullStackTutorials", "Learn Full Stack Tutorials free Online, Javascript ES6 Interview Questions")
hash.set(1, 200);

console.log(hash); 
//Output: Map(2) {"FullStackTutorials" => "Learn Full Stack Tutorials free Online, Javascript ES6 Interview Questions", 1 => 200}
Q:- Difference between Arrow Function and Normal Function in JavaScript?

There are following differences between Arrow Function and Normal (Regular) Function:

1. Syntax:

Both Arrow Function and Normal (Regular) Function has different syntax.

//Normal Function:

let func = function myFunc(params){ 
  // body of the function 
}; 

OR

function myFunc(params){ 
  // body of the function 
}; 
//Arrow Function:

let func = (params) => { 
  // body of the function 
}; 
2. Use of this keyword:
In Arrow functions there are no binding of this

Unlike regular functions, arrow functions do not have their own this.

let myFunc = { 
	name: "Full Stack Tutorials", 
	arrowFunc:() => { 
		console.log(`Welcome to, ${this.name}`); // no 'this' binding 
	}, 
	regFunc(){	 
		console.log(`Welcome to, ${this.name}`); // 'this' binding works 
	} 
}; 
myFunc.arrowFunc(); 
myFunc.regFunc(); 
3. Using new keyword:

Arrow functions cannot be used as constructor with new, it will throw error.

let myFunc = () => {};
let func = new myFunc(); // Uncaught TypeError: myFunc is not a constructor
4. Availability of arguments objects:

Arrow functions don't have their own arguments object. Therefore, arguments is simply a reference to the arguments of the enclosing scope.

5. Use of prototype property:

Arrow functions do not have a prototype property.

let myFunc = () => {};
console.log(myFunc.prototype); // undefined
Q:- How would you filter an Array of Objects in ES6?
var testArray = [{"name":"Jai",  "age": 26},
              {"name":"Shiv",  "age": 22},
              {"name":"Anuj", "age": 5 },
              {"name":"Jenny", "age": 20 }];
var data = testArray.filter(person => person.age > 18); //Filters the Array of Objects to condition set
console.log(data);
/*
0:{name: "Jai", age: 26}
1:{name: "Shiv", age: 22}
2:{name: "Jenny", age: 20}
length:3
*/
Full Stack Tutorials

Author @FullStackTutorials | View all Articles