10 + Interview Questions in ES6 Interview Questions for Experienced in ES6 Interview Questions Page 1 InterviewSolution

1.	What is Webpack?
Answer» Webpack is a tool for bundling javascript files for usage in browsers. Webpack analyses the APPLICATION and generates the bundles by creating a dependency graph that maps each module of the PROJECT required. It enables you to execute the environment that was hosted by Babel. A web pack has the ADVANTAGE of combining numerous modules and packs into a single JavaScript file. It includes a dev server, which aids with code updates and asset management. Write your code: folder_name/index.js import bar from './func.js';func(); folder_name/func.js export DEFAULT function func() { // body of the function} Bundle it: Either provide with custom webpack.config.js or without config: const path = require('path');module.exports = { entry: './folder_name/index.js', output: { path: path.resolve(__dirname, 'dict'), filename: 'bundle.js', },}; page.HTML <!DOCTYPE html><html> <head> <meta charset="utf-8" /> ... </head> <body> ... <script src="dict/bundle.js"></script> </body></html> You, then, need to run the webpack on the command-line in order to create bundle.js.

1.

What is Webpack?

Answer»

Webpack is a tool for bundling javascript files for usage in browsers. Webpack analyses the APPLICATION and generates the bundles by creating a dependency graph that maps each module of the PROJECT required. It enables you to execute the environment that was hosted by Babel. A web pack has the ADVANTAGE of combining numerous modules and packs into a single JavaScript file. It includes a dev server, which aids with code updates and asset management.

Write your code:

folder_name/index.js

import bar from './func.js';func();

folder_name/func.js

export DEFAULT function func() { // body of the function}

Bundle it:

Either provide with custom webpack.config.js or without config:

const path = require('path');module.exports = { entry: './folder_name/index.js', output: { path: path.resolve(__dirname, 'dict'), filename: 'bundle.js', },};

page.HTML

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> ... </head> <body> ... <script src="dict/bundle.js"></script> </body></html>

You, then, need to run the webpack on the command-line in order to create bundle.js.

Discussion

2.	Explain Internationalization and Localization.
Answer» These are JavaScript standard APIs that assist with OPERATIONS such as collation, number formatting, currency formatting, and date and time formatting. Collation: It is a method for searching and sorting STRINGS within a collection. It has a locale argument and is Unicode-aware. Number Formatting: Localized separators and digit GROUPING can be used to format numbers. Style formatting, numeral system, percent, and precision are among the other items. Currency formatting: Currency symbols, localized separators, and digit grouping are the most common ways to format numbers. Date and time formatting: Localized separators and ordering are used for formatting. The format can be short or long, and other characteristics such as location and time zone can be included.

2.

Explain Internationalization and Localization.

Answer»

These are JavaScript standard APIs that assist with OPERATIONS such as collation, number formatting, currency formatting, and date and time formatting.

Collation: It is a method for searching and sorting STRINGS within a collection. It has a locale argument and is Unicode-aware.
Number Formatting: Localized separators and digit GROUPING can be used to format numbers. Style formatting, numeral system, percent, and precision are among the other items.
Currency formatting: Currency symbols, localized separators, and digit grouping are the most common ways to format numbers.
Date and time formatting: Localized separators and ordering are used for formatting. The format can be short or long, and other characteristics such as location and time zone can be included.

Discussion

3.	Why does the following not work as an IIFE (Immediately Invoked Function Expressions) ? What needs to be modified in order for it to be classified as an IIFE?
Answer» function f(){ }(); The JavaScript parser interprets the function f(){ }(); as function f(){ } and (); where the former is a function declaration while the latter (a pair of brackets) is an attempt to execute a function without specifying a name, resulting in Uncaught SyntaxError: Unexpected token ). (function f(){ })() and (function f(){ }()) are TWO ways to fix it that involve adding more brackets. These functions are not available in the global scope, and you can EVEN omit their names if you don't need to refer to them within the body. You can also use the void OPERATOR: void function f(){ }(); .However, there is a drawback in this strategy. Because the evaluation of a given expression is always undefined, you can't use your IIFE function if it returns anything. Consider the following SCENARIO: // Don't add JS syntax to this code block to prevent Prettier from formatting it.const f = voidfunction b() { return 'f';}();console.log(f); // undefined

3.

Why does the following not work as an IIFE (Immediately Invoked Function Expressions) ? What needs to be modified in order for it to be classified as an IIFE?

Answer»

function f(){ }();

The JavaScript parser interprets the function f(){ }(); as function f(){ } and (); where the former is a function declaration while the latter (a pair of brackets) is an attempt to execute a function without specifying a name, resulting in Uncaught SyntaxError: Unexpected token ).

(function f(){ })() and (function f(){ }()) are TWO ways to fix it that involve adding more brackets. These functions are not available in the global scope, and you can EVEN omit their names if you don't need to refer to them within the body.

You can also use the void OPERATOR: void function f(){ }(); .However, there is a drawback in this strategy. Because the evaluation of a given expression is always undefined, you can't use your IIFE function if it returns anything. Consider the following SCENARIO:

// Don't add JS syntax to this code block to prevent Prettier from formatting it.const f = voidfunction b() { return 'f';}();console.log(f); // undefined

Discussion

4.	What is the difference between const and Object.freeze().
Answer» Const is a property that applies to bindings ("variables"). It creates an immutable binding, which means you can't change its value. const a = { b: "apple"};let c = { d: "mango"};a = c; // ERROR "a" is READ-only Object.freeze() is a function that works with values, primarily object values. It makes an object immutable, meaning that its properties cannot be changed. freeze() returns the same object that was supplied to it as a PARAMETER. It does not make a frozen COPY. If the parameter to this method is not an object (a primitive) in ES5, a TypeError will occur. A non-object argument in ES6 will be treated as if it were a frozen regular object and will be returned. let a = { b: "apple"};let c = { d: "mango"};Object.freeze(a);a.b = "KIWI"; //TypeError: Cannot ASSIGN to read only property 'name' of objectconsole.log(a);

4.

What is the difference between const and Object.freeze().

Answer»

Const is a property that applies to bindings ("variables"). It creates an immutable binding, which means you can't change its value.

const a = { b: "apple"};let c = { d: "mango"};a = c; // ERROR "a" is READ-only

Object.freeze() is a function that works with values, primarily object values. It makes an object immutable, meaning that its properties cannot be changed.

freeze() returns the same object that was supplied to it as a PARAMETER. It does not make a frozen COPY. If the parameter to this method is not an object (a primitive) in ES5, a TypeError will occur. A non-object argument in ES6 will be treated as if it were a frozen regular object and will be returned.

let a = { b: "apple"};let c = { d: "mango"};Object.freeze(a);a.b = "KIWI"; //TypeError: Cannot ASSIGN to read only property 'name' of objectconsole.log(a);

Discussion

5.	What are Proxy in ES6?
Answer» The proxy objects are used to customize behaviour for BASIC operations like property lookup, ASSIGNMENT, enumeration, function invocation, etc. For basic ACTIONS, the Proxy object is used to create custom behaviour (e.g. property lookup, assignment, enumeration, function invocation, etc). We need to define three crucial terms: handler — a placeholder object that holds the trap(s) traps — the method(s) that let you access a property. target — the virtualized object by the proxy Example: const handle = { get: function(ob, prp) { return prp in ob ? ob[prp] : 37; }};const x = new Proxy({}, handle);x.a = 2;x.b = undefined;console.log(x.a, x.b); // 2, undefinedconsole.log('c' in x, x.c); // false, 37 Proxies have a WIDE RANGE of real-world applications. validation correction in value extensions for property lookup property accesses are being tracked references that can be revoked implementation of the DOM in javascript

5.

What are Proxy in ES6?

Answer»

The proxy objects are used to customize behaviour for BASIC operations like property lookup, ASSIGNMENT, enumeration, function invocation, etc.

For basic ACTIONS, the Proxy object is used to create custom behaviour (e.g. property lookup, assignment, enumeration, function invocation, etc).

We need to define three crucial terms:

handler — a placeholder object that holds the trap(s)
traps — the method(s) that let you access a property.
target — the virtualized object by the proxy

Example:

Proxies have a WIDE RANGE of real-world applications.

validation
correction in value
extensions for property lookup
property accesses are being tracked
references that can be revoked
implementation of the DOM in javascript

Discussion

6.

What is the difference between Set and WeakSet in ES6?

Answer»

Set: By using the Set() class, users can define an array-like heterogeneous iterable object, which will consist of distinct values. The elements should not just be distinct by values but also by types. i.e. "2" and 2 will be considered as different.

VAR set1= new Set([0, 1, 2]);set1.add(3); // 0, 1, 2, 3set1.add(2); // 0, 1, 2, 3set1.add({x:1, y:2}); // 0, 1, 2, {x:1, y:2}set1.add("GOOD"); // 0, 1, 2, {x:1, y:2}, 'Good' set1.has("Hello"); // falseset1.has("Good"); // trueset1.delete("Good"); // 'Good' deletedset1.has("Good"); // false set1.size; // 4set1.clear(); // Set Cleared

WeakSet(): A WeakSet() is a COLLECTION that is similar to a Set because it retains unique values; but it can only hold Objects. If an object in your WeakSet has no other reference variables left, it will be removed automatically.

var weakSet1 = new WeakSet([{x:1}]);var ob1 = {o:1};var ob2 = {o:2};weakSet1.has(ob1); //falseweakSet1.add(ob1); weakSet1.add(ob2); weakSet1.has(ob2); // truedelete ob1; // you can't delete objects in this way. Use scope to execute this.myWeakSet.has(ob1); // false, because you deleted ob1, so WeakSet releases it automaticallymyWeakSet.delete(ob2); // ob2 deleted from the setmyWeakSet.add(1); // ERROR, no PRIMITIVE value

Set	WeakSet
A set can contain all types of values.	A weakSet can only contain objects.
Use .size to find the number of elements.	Use .length to find the number of elements.
.forEach() is AVAILABLE for iteration.	.forEach() is not available for iteration.
Nothing is auto-destroyed.	An element object will be auto released to the garbage collector if it has no other reference left.

Discussion

7.	What is a Temporal Dead Zone?
Answer» Variable Hoisting does not apply to LET bindings in ES6, so let declarations do not RISE to the top of the current execution CONTEXT. A ReferenceError is thrown if the variable in the block is referenced before it is INITIALIZED (unlike a variable declared with var, which will just possess the undefined value). From the beginning of the block until the initialization is performed, the variable is in a "temporal dead zone." console.log(a); // undefinedconsole.log(b); // causes ReferenceError: aLet is not definedvar a = 1;let b = 2;

Discussion

8.	What is the advantage of using the arrow syntax for a constructor method?
Answer» The main benefit of utilising an arrow function as a method within a CONSTRUCTOR is that the value of this is set at the moment of function generation and cannot be changed later. As a result, WHENEVER the constructor is used to create a new OBJECT, this refers to that object. const Shape = function(shapeName) { this.shapeName = shapeName; this.showName1 = function() { console.log(this.shapeName); }; this.showName2 = () => { console.log(this.shapeName); };};const circle = new Shape('Circle');const square = new Shape('Square');circle.showName1(); // Circlecircle.showName2(); // Square// The regular function can have its 'this' value changed, but the arrow function cannotcircle.showName1.call(square); // Square (because "this" is now the square object)circle.showName2.call(square); // Circlecircle.showName1.apply(square); // Square (because 'this' is now the square object)circle.showName2.apply(square); // Circlecircle.showName1.bind(square)(); // Square (because 'this' is now the square object)circle.showName2.bind(square)(); // Circlevar showNameFromPic1 = circle.showName1;sayNameFromPic1(); // undefined (because 'this' is now the PIC object)var showNameFromPic2 = circle.showName2;showNameFromPic2(); // Circle The major point here is that for a NORMAL function, this can be modified, but for an arrow function, the context is always the same. You won't have to worry about the context changing if you pass your arrow function around to other areas of your application.

8.

What is the advantage of using the arrow syntax for a constructor method?

Answer»

The main benefit of utilising an arrow function as a method within a CONSTRUCTOR is that the value of this is set at the moment of function generation and cannot be changed later. As a result, WHENEVER the constructor is used to create a new OBJECT, this refers to that object.

const Shape = function(shapeName) { this.shapeName = shapeName; this.showName1 = function() { console.log(this.shapeName); }; this.showName2 = () => { console.log(this.shapeName); };};const circle = new Shape('Circle');const square = new Shape('Square');circle.showName1(); // Circlecircle.showName2(); // Square// The regular function can have its 'this' value changed, but the arrow function cannotcircle.showName1.call(square); // Square (because "this" is now the square object)circle.showName2.call(square); // Circlecircle.showName1.apply(square); // Square (because 'this' is now the square object)circle.showName2.apply(square); // Circlecircle.showName1.bind(square)(); // Square (because 'this' is now the square object)circle.showName2.bind(square)(); // Circlevar showNameFromPic1 = circle.showName1;sayNameFromPic1(); // undefined (because 'this' is now the PIC object)var showNameFromPic2 = circle.showName2;showNameFromPic2(); // Circle

The major point here is that for a NORMAL function, this can be modified, but for an arrow function, the context is always the same. You won't have to worry about the context changing if you pass your arrow function around to other areas of your application.

Discussion

9.	What is a WeakMap in ES6? How is it different from a Map?
Answer» The WeakMap is a collection of key/value pairs, just like the Map. The keys of WeakMap, on the other hand, MUST be objects, whereas the values can be ANYTHING. The object REFERENCES in the keys are held weakly, which means that if there is no other REFERENCE to the object, it will be eligible for garbage collection. WeakMap, but not Map, permits the garbage collector to complete its duty. The array of keys would preserve references to key objects in manually constructed maps, prohibiting them from being garbage COLLECTED. References to key objects in native WeakMaps are held "weakly," which means they do not hinder garbage collection if there is no other reference to the object. The Map API and the WeakMap API are the same. WeakMap keys, on the other hand, are not enumerable, unlike Map objects. There are also no methods that return a list of keys. If they were, the list would be non-deterministic because it would be dependent on the state of garbage collection. A Map should be used if we need a list of keys.

9.

What is a WeakMap in ES6? How is it different from a Map?

Answer»

The WeakMap is a collection of key/value pairs, just like the Map. The keys of WeakMap, on the other hand, MUST be objects, whereas the values can be ANYTHING. The object REFERENCES in the keys are held weakly, which means that if there is no other REFERENCE to the object, it will be eligible for garbage collection. WeakMap, but not Map, permits the garbage collector to complete its duty. The array of keys would preserve references to key objects in manually constructed maps, prohibiting them from being garbage COLLECTED. References to key objects in native WeakMaps are held "weakly," which means they do not hinder garbage collection if there is no other reference to the object. The Map API and the WeakMap API are the same.

WeakMap keys, on the other hand, are not enumerable, unlike Map objects. There are also no methods that return a list of keys. If they were, the list would be non-deterministic because it would be dependent on the state of garbage collection. A Map should be used if we need a list of keys.

Discussion

10.	What is the Prototype Design Pattern?
Answer» The Prototype Pattern creates new objects, but instead of returning uninitialized objects, it RETURNS objects with values copied from a prototype - or sample - object. The Properties pattern is another name for the Prototype pattern. The initialization of business objects with values that match the database's default settings is an EXAMPLE of where the Prototype pattern comes in handy. The default values from the prototype object are replicated into a NEWLY generated business object. The Prototype pattern is rarely used in traditional languages, but JAVASCRIPT, as a prototypal language, employs it in the creation of new objects and prototypes.

10.

What is the Prototype Design Pattern?

Answer»

The Prototype Pattern creates new objects, but instead of returning uninitialized objects, it RETURNS objects with values copied from a prototype - or sample - object. The Properties pattern is another name for the Prototype pattern.

The initialization of business objects with values that match the database's default settings is an EXAMPLE of where the Prototype pattern comes in handy. The default values from the prototype object are replicated into a NEWLY generated business object.

The Prototype pattern is rarely used in traditional languages, but JAVASCRIPT, as a prototypal language, employs it in the creation of new objects and prototypes.

Discussion

Explore topic-wise InterviewSolutions in .

What is Webpack?

Explain Internationalization and Localization.

Why does the following not work as an IIFE (Immediately Invoked Function Expressions) ? What needs to be modified in order for it to be classified as an IIFE?

What is the difference between const and Object.freeze().

What are Proxy in ES6?

What is the difference between Set and WeakSet in ES6?

What is a Temporal Dead Zone?

What is the advantage of using the arrow syntax for a constructor method?

What is a WeakMap in ES6? How is it different from a Map?

What is the Prototype Design Pattern?