Javascript- ES6/ES2015 : Interview FAQs

ES6/ES2015 or ECMAScript is standard provided by ECMA International. JavaScript is implementation of that standard. ES6/ES2015 are same.

Babel is JavaScript compiler that is used to convert ECMAScript 2015+ into JavaScript that is understandable by the browser.
It does the following
> Transform syntax
> Source code transformations
> Convert JSX syntax

For example

// Babel Input: ES2015 arrow function 
[1, 2, 3].map((n) => n + 1); 
// Babel Output: ES5 equivalent 
[1, 2, 3].map(function(n) {   
     return n + 1; 
}); 

Babel editor link : https://babeljs.io/repl

Hoisting term in JavaScript means in which order code will be executed.
Functions definition are hoisted in JavaScript.

For example

// didn't matter where function is called or defined.
sayHello(); // will provide the output
function sayHello(){
   console.log("hello");
}
sayHello(); //  will provide the output

However declaration, class declaration are not hoisted in JavaScript.

console.log(num);
var num; 
var num = 3;
// will give error

const p = new Rectangle(); // ReferenceError 
class Rectangle {} 

The static keyword defines a static method for a class. Static methods aren’t called on instances of the class. Instead, they’re called on the class itself. These are often utility functions, such as functions to create or clone objects.

class ClassWithStaticMethod {
   static staticMethod() {
     return 'static method has been called.';
   }
   sayHello(){
    console.log("Hello");
   }
 }
 var ss = new ClassWithStaticMethod;
 ss.sayHello();
 //ss.sayHello(); // throws error ss.staticMethod is not a function
 console.log(ClassWithStaticMethod.staticMethod());
 // expected output: "static method has been called."

Instance methods can access and modify instance data. They can call instance method and static method as well. An instance has exactly the same properties of its parent class

class Person {
  Walk(){
    console.log("Person is walking");
   }
 }
 var walk = new  Person; //creating walk instance for Person call.
 walk.Walk(); // calling class methods using class instance walk
 // expected output: "Person is walking "

To create a class use “class” keyword and always add constructor to it. To access its variables create its object.

class Person{
   constructor(fname,lname){
       this.fname = fname;
       this.lname = lname;
   }
   fullName(){
        return  this.fname +  this.lname;
   }
}
let person = new Person("curious","webs");
console.log(person.fullName());

Getters and setters are used to access class variables.

class Rectangle {   
     constructor(height, width) {    
        this.height = height;     
        this.width = width;   
     }   
// Getter  
     get area() {     
        return this.calcArea();  
     }   // Method   
    calcArea() {    
        return this.height * this.width;  
    } 
} 
const square = new Rectangle(10, 10); 
console.log(square.area); // 100 

By using extend keyword.

 class Vehicle {
 
  constructor (name, type) {
    this.name = name;
    this.type = type;
  }
 
  getName () {
    return this.name;
  }
 
  getType () {
    return this.type;
  }
 
}class Car extends Vehicle {
 
  constructor (name) {
    super(name, 'car');
  }
 
  getName () {
    return 'It is a car: ' + super.getName();
  }
 
}
let car = new Car('Tesla');
console.log(car.getName()); // It is a car: Tesla
console.log(car.getType()); // car
 

super keyword is used to call the constructor of the parent class and to access the parent’s properties and methods.

class Animal { 
   constructor(name) {
     this.name = name;
   }
 speak() {
     console.log(${this.name} makes a noise.);
   }
 }
 class Dog extends Animal {
   constructor(name) {
     super(name); // call the super class constructor and pass in the name parameter
   }
 speak() {
     console.log(${this.name} barks.);
   }
 }
 let d = new Dog('Mitzie');
 d.speak(); // Mitzie barks.

When a child class method overrides the parent class method of the same name, parameters and return type, it is termed as method overriding.

//the parent class
 class Person {
   sayHello() {
     console.log("Hello. I am a person.");
   };
 }
 //the child class
 class Employee extends Person {
  sayHello() {
      super.sayHello(); //calling parent class constructor via super
      console.log("Hello. I am an employee.");
   }
 }
 let per = new Person(); //parent class object
 let emp = new Employee(); //child class object
 per.greet();
 emp.greet();
 

Module is a file having collection of script.
For example in animation folder hoverEffects and movingEffects are modules for animation
/animation
/hoverEffects.js
/movingEffectsjs

CommonJS : Implemented by node
Async Module Definition : Implemented by RequireJS
Universal Module Definition : Combination of CommonJS + AMD
ECMAScript : Used for both server/client side

A JavaScript module organize related set of code. ES6 module contains. ES6 modules are stored in separated files. These modules can be imported.

They can be imported as

 // in sum.js
export default function sum(x,y){ return x+y}
// import in index.js
import sum from 'sum';
// to import everything from a module
import * from 'sum';