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

ES6 Interview Questions

ES6 Interview Questions: ES6 is also known as ECMAScript 2015.
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
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:- 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 | Blogger @FullStackTutorials | View all articles