ES6/ES2015 Interview Questions

1) Could you explain the difference between ES5 and ES6

Answer:

• ECMAScript 5 (ES5): The 5th edition of ECMAScript, standardized in 2009. This standard has been implemented fairly completely in all modern browsers
• ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015): The 6th edition of ECMAScript, standardized in 2015. This standard has been partially implemented in most modern browsers.

Here are some key differences between ES5 and ES6:

• Arrow functions & string interpolation:
  Consider:const greetings = (name) => { return `hello ${name}`; }and even:const greetings = name => `hello ${name}`;
• Const.
  Const works like a constant in other languages in many ways but there are some caveats. Const stands for ‘constant reference’ to a value. So with const, you can actually mutate the properties of an object being referenced by the variable. You just can’t change the reference itself.const NAMES = []; NAMES.push("Jim"); console.log(NAMES.length === 1); // true NAMES = ["Steve", "John"]; // error
• Block-scoped variables.
  The new ES6 keyword let allows developers to scope variables at the block level. Let doesn’t hoist in the same way var does.
• Default parameter values Default parameters allow us to initialize functions with default values. A default is used when an argument is either omitted or undefined — meaning null is a valid value.// Basic syntax function multiply (a, b = 2) { return a * b; } multiply(5); // 10
• ** Class Definition and Inheritance**
  ES6 introduces language support for classes (class keyword), constructors (constructor keyword), and the extend keyword for inheritance.
• for-of operator
  The for…of statement creates a loop iterating over iterable objects.
• Spread Operator For objects mergingconst obj1 = { a: 1, b: 2 } const obj2 = { a: 2, c: 3, d: 4} const obj3 = {...obj1, ...obj2}
• Promises
  Promises provide a mechanism to handle the results and errors from asynchronous operations. You can accomplish the same thing with callbacks, but promises provide improved readability via method chaining and succinct error handling.const isGreater = (a, b) => { return new Promise ((resolve, reject) => { if(a > b) { resolve(true) } else { reject(false) } }) } isGreater(1, 2) .then(result => { console.log('greater') }) .catch(result => { console.log('smaller') })
• Modules exporting & importing Consider module exporting:const myModule = { x: 1, y: () => { console.log('This is ES5') }} export default myModule;and importing:import myModule from './myModule';

When should I use Arrow functions in ES6?

Answer: I’m now using the following rule of thumb for functions in ES6 and beyond:

• Use function in the global scope and for Object.prototype properties.
• Use class for object constructors.
• Use => everywhere else.

Why use arrow functions almost everywhere?

• Scope safety: When arrow functions are used consistently, everything is guaranteed to use the same thisObject as the root. If even a single standard function callback is mixed in with a bunch of arrow functions there’s a chance the scope will become messed up.
• Compactness: Arrow functions are easier to read and write. (This may seem opinionated so I will give a few examples further on).
• Clarity: When almost everything is an arrow function, any regular function immediately sticks out for defining the scope. A developer can always look up the next-higher function statement to see what the thisObject is.

What’s the difference between .call and .apply?

Answer: Both .call and .apply are used to invoke functions and the first parameter will be used as the value of this within the function. However, .call takes in comma-separated arguments as the next arguments while .apply takes in an array of arguments as the next argument. An easy way to remember this is C for call and comma-separated and A for apply and an array of arguments.

function add(a, b) {
  return a + b;
}

console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3

Explain the difference between Object.freeze() vs const

Answer: const and Object.freeze are two completely different things.

• const applies to bindings (“variables”). It creates an immutable binding, i.e. you cannot assign a new value to the binding.const person = { name: "Leonardo" }; let animal = { species: "snake" }; person = animal; // ERROR "person" is read-only
• Object.freeze works on values, and more specifically, object values. It makes an object immutable, i.e. you cannot change its properties.let person = { name: "Leonardo" }; let animal = { species: "snake" }; Object.freeze(person); person.name = "Lima"; //TypeError: Cannot assign to read only property 'name' of object console.log(person);

What is Hoisting in JavaScript?

Hoisting is JavaScript’s default behavior of moving declarations to the top.

JavaScript Declarations are Hoisted

Answer: In JavaScript, a variable can be declared after it has been used.

In other words; a variable can be used before it has been declared.

Example 1

x = 5; // Assign 5 to x

elem = document.getElementById(“demo”); // Find an element
elem.innerHTML = x;                     // Display x in the element

var x; // Declare x

Example 2

var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById(“demo”); // Find an element
elem.innerHTML = x;                     // Display x in the element