1. What is es6?

ES6 is Ecmascript 2015,6th new version of Javascript Programming Language. ES6 is considered to be the major upgrade to javascript since ES5 was introduced in 2009. With the introduction of ES6, whole new features are added to the language like Classes, Modules, Object Manipulation etc. to name a few.

2. How many parts are there in an es6 module?

Modules were part of the JavaScript community for a very long time but they are not built into the language, they were implemented by the libraries. With the introduction of ES6, modules were implemented to the language. Modules refer to the reusable pieces of code within our application or system. They are stored in one file. To use them, there are two parts to it, Default Export and Named Export. Similarly, we can import the modules to the current file.

3. What is a class in es6?

Classes in JavaScript are introduced from ES6 in 2015. In OOPS programming, a class is a template for creating objects, providing initial values to variables by providing them constructor and implementation functions or methods. For Eg:

Class Order {
constructor(id){
this.id=id;
}
getId(){
console.log('The Order Id of Your Order ${this.id}')
}
}

Order o1 =new Order('5gf123');
o1.getId();
Output: The Order Id of Your Order 5gf123

4. What is the arrow function in es6?

An arrow function expression can be used as an alternative to the old JavaScript function expression, but is limited and cannot be used all the time. Arrow functions are lexically bind to this keyword unlike the normal functions which are dynamically bind .Arrow functions cannot be used as a method and constructors. For eg: const x= () =>{ console.log(“Hello Guys !”)};

5. What is export default es6?

The export statement is used to export functions, objects, and variables, etc. to other JavaScript modules with the help of the import statement. There are two types of ways to export 1.) Named Export and 2.) Default Export Default Export is when we want to export any single, variable, function or object, etc. For Eg: In Test.js file var x1=10; export default x1; In Com.js file we want to import the x import y1 from ‘./Test.js’ here y1 is importing x1 from Test.js

6. Which keywords can be used to implement inheritance in es6?

To Implement inheritance in ES6, extend keyword is used to implement inheritance .In the earlier versions of Javascript , there is no concept of classes but with the introduction of the ES6 , Pure Object Oriented features were added to the language .For Example to implement Inheritance in Javascript.

class Animal {
    constructor(legs) {
        this.legs = legs;
    }
    walk() {
        console.log('Mamals can  ' + this.legs + ' legs');
    }
}

class Bird extends Animal {
    constructor(legs) {
        super(legs);
    }
    fly() {
        console.log('flying');
    }
}


let bird = new Bird(2);

bird.walk();
bird.fly();

7. What is destructuring in es6?

Destructuring is a great way to “destructure” or separate the values of arrays or objects into variables. Destructuring also works with complex functions that have many parameters, default values, etc.
For Eg ;
let animal =[‘dog’,’cat’,’rabbit’];
let [d,c,r] = arr; //destructuring
console.log(d);

8. What is Event propagation, capturing, bubbling?

When an event occurs on a DOM, that event does not entirely occur
on one element. In the Bubbling Phase, the event bubbles up or it goes to its parent,
to its grandparents, to its grandparent’s parent until it reaches all the way to the window while in the Capturing
Phase the event starts from the window down to the element that triggered the event or the event target.

Event Propagation has three phases.

Capturing Phase – the event starts from the window then goes down to every element until it reaches the target element.
Target Phase – the event has reached the target element.
Bubbling Phase – the event bubbles up from the target element then goes up every element until it reaches the window.

9. What is the difference between es5 and es6?

ES6 and ES5 are both Versions of JavaScript introduced by ECMAScript in 2015 while the later in 2009. Both ES5 and ES6 have some similar points but at the same time, there are differences also Some of the features are:

1. Variables: Let and const Till ES5, there was only one to define the variables by using the var keyword but with the advent of ES6, let and const keyword are also introduced in the language. var is function scope while the later are block Scope.

function(){
 var x=5;
 }
 
 let a =10;
 const m =16;

2. Destructuring Destructuring is great way to “destructure” or separate the values of arrays or objects into variables .

For Eg:

let animal =['dog','cat','rabbit'];
let [d,c,r] = arr;  //destructuring
console.log(d);

3.Defining Objects

var boy = “Ram”;

var marks = 90;

var class = 12;

var gen = “male”;

// ES5 var object1 = { boy:boy,marks:marks,class:class,gen:gen };

// ES6 var object2 = { boy,marks,class,gen };

4.String Interpolation Earlier in ES5, we used to concatenate the two strings with the help of a concatenation operator but with String Operator it becomes a lot handier to do it. For eg:

var x=’The’+’order’+id;

let x +`The Order ${id}`;

10. How to define a function in es6?

<!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->
In ES6 , Arrow Functions are Introduced
// Arrow Function Break Down

// 1. Remove the word function and place arrow between the argument and opening body bracket
(c1) => {
  return c1 + 100;
}

2. Remove the body brackets and word "return"
(y) => y + 100;

3. Remove the argument parentheses
a => a + 100;

11. How to import css in es6?

"Css files can be imported to JavaScript Files by using import command as follows
For Eg:
index.css File
.container {
  padding: 20px;
}

Main.js

import a from './index.css'"

12. What are the new features introduced in ES6?

"Some Of the Major New Features of the ES6 is                                                                                                                                                                                
  1. Variables :Let and const :Till ES5 , there was only one to define the variables by using the var keyword but with the advent of ES6 , let and const keyword are also intrtoduced in the 
 language.var is function scope while the later are block Scope
 function(){
 var x=5;
 }
 
 let a =10;
 const m =16;
 
2.Destructuring 
Destructuring is great way to “destructure” or seperate the values of arrays or objects into variables .
For Eg ;
let animal =['dog','cat','rabbit'];
let [d,c,r] = arr;  //destructuring
console.log(d);

3.Defining Objects
var boy = ""Ram"";
var marks = 90;
var class = 12;
var gen = ""male"";

// ES5
var object1 = {  boy:boy,marks:marks,class:class,gen:gen };
// ES6
var object2 = { boy,marks,class,gen };

4.String Interpolation
Earlier in ES5, we used to concatenate the two strings with the help of a concatenation operator but with String Operator it becomes a lot handier to do it
For eg:

var x='The'+'order'+id;
let x +`The Order ${id}`;

5.Arrow Functions 
// Arrow Function Break Down

// 1. Remove the word ""function"" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
}

// 2. Remove the body brackets and word ""return"" -- the return is implied.
(a) => a + 100;

// 3. Remove the argument parentheses
a => a + 100;"

13. Define let and const keywords.

"Let and Const are introduced in ES6 .Earlier ,variables in JS are declared with var Keyword
var was function scoped where let and const is block scope 
var can be redeclared and updated but let cannot be redecLared but can be updated
let order = 50;
let order = 60;

// In the console error will be like:
Uncaught SyntaxError: Identifier 'points' has already been declared 

But This Is Possible:
let order = 50;
order = 60;

Scope of Let
let x=10;

if(x>1){
let x=2;
}

on calling x we will get 10 

Const are the variables which cannot be declared or updated .If once a value is declAred it cannot be updated
const key = 'fegf123';
// Then try to redeclare it:
key = 'dwed1234'
// I get the following error:
Uncaught TypeError: Assignment to constant variable."

14. What is Functional Programming?

Functional Programming is a type of programming in which we build our applications with functions using expressions that calculates a value without mutating or changing the arguments that are passed to it. JavaScript Array has a map, filter, reduce methods which are the most famous functions in functional programming because they don’t mutate or change the array which makes these functions pure and which are features of a Functional Programming Language.


1.) Array.Map Method
The map method creates a new array with the results of calling a provided callback function on every element in the array.
const words = [“Functional”, “Procedural”, “Object-Oriented”];

const wordsLength = words.map(word => word.length);

2.)Array.filter -The filter method creates a new array with all elements that pass the test in the callback function.
let numbers={1,2,3,4};

const evenNumbers = numbers.filter(x => x%2 );

15. Give an example of an Arrow function in ES6? List down its advantages.

An arrow function expression can be used as an alternative to the old javascript function expression, but is limited and cannot be used all the time. Arrow functions are lexically bound to this keyword, unlike the normal functions which are dynamically bound.
Arrow functions cannot be used as a method and constructors

Arrow syntax binds this to the surrounding that means they are lexically scoped than normal functions which are dynamically scoped
The syntax gives a return when there is no body block, resulting in simpler code in some cases
Last but not least, => is shorter and simpler than function, although stylistic issues are often subjective Advantages of Arrow functions are being listed below:-
1.) Arrow Functions do not have a binding with this, i.e. arrow functions do not have their own this.
To understand this in a more simple manner, lets take an example:

let ty={
 x :""1"",
 random: () =>{
console.log(x);    //do not have binding with this
},
random2(){
console.log(x);     //have binding with this
}
};
ty.random();
ty.random2();
Output:
undefined
1

2.) Another feature is that regular functions have its arguments , but arrow functions do not have 
for eg:
let y=function(){
console.log(argument);
}
new y=(1,2,3);

output:
Arguments {0:1,1:2,2:3}

let y=() =>{
console.log(argument);

}
new y(1,2,3);
Type Error y is not defined

3.) Arrow functions allow us to return where there is no implicit return
let y =() => 1; 

16. Discuss the spread operator in ES6 with an example.

The spread operator is introduced in JavaScript ES6. It takes an array or iterable and expands it into individual elements.
It is also used to make copies of JS objects as shown in the below example
For Eg:
let a=[1,2,3]
let b=[4,5,6 ,…a]
console.log(b) // 4,5,6,1,2,3

Another Use of Spread Operator is that after using this it makes code concise and increase its code readability.

17. What are the template literals in ES6?

Template literals are introduced in ES6 to overcome the problem with string concatenation in our programs . Now we have to use ` character instead of ‘ or ” quotes , to produce a new string

For Eg :
console.log(`Ram likes to eat mango`)

MultiLine
console.log(`Ram likes to eat mango\nHe is a good Boy`)

Expressions
const pi=3.14

console.log(`The radius of Circle is ${pi}*2*2`)
The ${} syntax is used to put an expression in it and it will produce the value.

18. What do you understand by the Generator function?

In ES6, a new kind of functions is introduced which are different from the regular functions. Unlike regular functions, Generators functions can stop at midway
and then it can continue from where it was paused
We can define Generatares functions as:-

function* gen() {
console.log(‘1st’);
yield 1;
console.log(‘2nd’);
yield 2;
}

We can define generator function by adding * after function and yield statement pauses the execution and returns the value

we can call this function as
let g= gen()
console.log(g) // this would give generator object

This Generator Object returns another object with two properties done and value. Generator is iterable

let g1=gen.next()
console.log(g1) //invoked 1st time
{ value: 1, done: false }

g1=gen.next()
console.log(g1) //invoked 2nd time
{ value: 2, done: false }

g1=gen.next() //{ value: undefined, done: true }
console.log(g1)

19. Why are functions are called as first class objects?

Functions in JavaScript are First-class Objects because they are treated as any other value in the language.
1.) They can be assigned to variables.
2.) They can be properties of an object which are called methods, they can be an item in the array.
3.) They can be passed as arguments to a function, and they can be returned as values of a function.

20. Discuss the Rest parameter in ES6 with an example.

Rest parameters are introduced in ES6 so that we can gather any number of arguments into an array.
For Better Understanding, let’s understand with this an example

Without Rest parameter
function add(a,b) {
let sum = 0;

sum=a+b;

return sum
}

With rest arguments, with this, we can now accept any number of arguments

function add(…a) {
let sum = 0;

for (let a1 of a) sum += a;

return sum
}

add(5) // returns 5
add(1,2) // returns 3
add(1, 2, 3, 4, 5) // returns 15

21. What do you mean by IIFE?

IIFE’s are Immediately-Invoked Function Expressions. They are the functions that are called immediately after being defined.
We can make any function IIFE by wrapping it in parenthesis and following pair of parentheses at the end

(function() {
// Code
})()

With Arrow function
(() => {
// Code
})()

We use IIFE to Aliasing global variables, Creating private variables and functions, Asynchronous functions in loops.

22. What are the default parameters?

Default function parameters are used to initialize parameters with default values if no value or undefined is passed to the variable

function setOrder (id ,name=Demo){ //here we have passed demo
console.log(`The OrderId ${id} is of ${name} `)
}

23. Discuss the for…of loop.

for…of is used to iterate over the elements of an array. It does so nicely and shortly, without the need of additional variables .

For example:

const animal = [‘cat’, ‘dog’];

for (const a of animal) {
console.log(animal);
} Output:
// ‘cat’
// ‘dog’

24. Discuss the for…in loop.

for ..in loop is uesd to iterate over the properties of object,a key is assigned to the key variable. The loop continues for all object properties

const Employee = {
    name: 'Ram',
    EmpID: 71222,
    age: 45
}
// using for...in
for ( let k in Employee ) {

    // display the properties
    console.log(`${k} => ${Employee[k]}`);   
}

Output:
Ram 71222 45

25. Define Map.

Map is a feature introduced in ES6, is a collection of elements where each element is stored as a Key-value pair. It can hold both objects and primitive
values. On iterating on the map object, it returns the key-value pairs. We can create Map like
var map = new Map([[1 , 2], [2 ,3 ] ,[4, 5]]);

console.log(map);

Output would be like :
// 1 => 2
// 2 => 3
// 4 -> 5

Some of the Important Methods of Map are :
1. Map.prototype.set() – It adds the key and value to the Map Object.
Syntax:
const map = new Map();
map.set(‘id’, ‘qwert’);

2. Map.prototype.has() -It return a boolean value depending on whether the specified key is present or not
let map =new Map()
map.set(‘class’,’12th’)
console.log(map.has(‘class’)) //true

3. Map.prototype.get()- It returns the value of the corresponding key
let map = new Map();
map.set(‘name’, ‘Ram’);
console.log(map.has(‘class’)) //true

console.log(map.get(‘name’)) //Ram
4. Map.prototype.delete() – It delete’s both the key as well as a value from the map.

const map = new Map();
map.set(‘name’, ‘Ram’);

console.log(map.delete(‘name’));
// expected result: true
// (true indicates successful removal)

26. Define set.

Sets are also introduced in ES6, stores a collection of Objects which contain unique values. In sets, no value can repeat itself. To create a new empty Set, the syntax is as follows:

let set = new Set();
The Set object provides the following useful methods:

add(value) – appends a new element. It returns the Set object
clear() – removes all elements from the Set object.
delete(value) – deletes an element specified by the value.
entries()– returns a new Iterator that contains an array

27. What do you understand by Weakmap?

In Es6 ,Weakmap is introduced which is a type of collection similar to map.In this the values are stored as key-value pairs where keys are weakly referenced .
Weakmap object allows the keys of object only.
For Eg:
const w=new WeakMap(); //Weakmap is created
const o={}; object1
const o1={}
const o3={};

The WeakMap methods are :
1. set()- It set the given key to the weakmap
eg;
for the given above weakmap
const w=new WeakMap(); //Weakmap is created
const o={}; object1
const o1={}
const o3={};
w.set(o,”cool”)
w.set(o1,”Great”)
w.set(o2,”Learning”)
2. has()-It tells wheteher the given key is present in weakmap or not
Eg:
const w=new WeakMap(); //Weakmap is created
const o={}; object1
const o1={}
const o3={};
w.set(o,”cool”)
w.set(o1,”Great”)
w.set(o2,”Learning”)
w.has(o1) //true
3. get()-It returns the value of the given key
Eg:
const w=new WeakMap();
const o={}; object1
const o1={}
const o3={};
w.set(o,”cool”)
w.set(o1,”Great”)
w.set(o2,”Learning”)
w.get(o) //cool is returned

4. delete()-It deletes the element from the weakmap
const w=new WeakMap();
const o={}; object1
const o1={}
const o3={};
w.set(o,”cool”)
w.set(o1,”Great”)
w.set(o2,”Learning”)
w.delete(o)

28. Explain Promises in ES6.

A promise is an object that returns a value which will be returned in future, but not now.Because of this feature the promise is very well-suited for handling asynchronous operations.
A JavaScript Promise object can be:
Pending-(working), the result is undefined.
Fulfilled- the result is a value.
Rejected-the result is an error object.
settled-fullfilled or rejected

to create a promise:
let completed = true;

let greatLearning = new Promise(function (resolve, reject) {
if (completed) {
resolve(“GreatLearning course is completed.”);
} else {
reject(“Complete the Previous Assignments”);
}
});

29. What do you understand by Weakset?

Weakset is a collection of objects, adapts the same properties of a set but does not contain duplicate values.
the way to define the weakset are:-
const w=new WeakSet();
Important methods of weakset are:-
1. add(value)-a new object is appended with the given value to the weakset.
w.add(value)
2. delete(value)-Deletes the value from the WeakSet collection.
w.delete(value)
3. has(value)-Returns true if the value is present in the WeakSet Collection, false otherwise.
w.has(value)
4. length()-Returns the length of weakSetObject
w.length()

30. What do you understand by Callback and Callback hell in JavaScript?

Callback is a function that is passed an Argument to an another function
For Eg :
let numbers = [1, 2, 4, 7, 3, 5, 6];
function isEvenNumber(x) {
return x % 2;
}

const evenNumbers = numbers.filter(isEvenNumber);
console.log(evenNumbers); // [ 2,4,6]

so using callback,
let evenNumbers = numbers.filter(function(x) {
return x % 2;
});
console.log(evenNumbers); // [ 2,4,6 ]

In ES6:
let evenNumbers = numbers.filter(x => x % 2);
console.log(evenNumbers); // [ 2,4,6 ]

Callback hell is also known as the Pyramid of Doom. Callback hell is nothing but calling another callback inside the callback. Here the callbacks nested are related to each other.
For Example in the example below set timeout is being called inside another set timeout and so on…This is a small example of callback hell


const getRol1No = () => {

setTimeout( () => {

console.log(‘API getting roll no’);

let roll_no = [1,2,3,4,5];

console.log(roll_no);

setTimeout( (rollno) => {
const biodata = {
name : ‘vinod’, age : 26
}
console.log(` My roll no is ${rollno). My name is ${ biodata.name} and I am ${biodata.age} years old`);

setTimeout((name) =>{
biodata.gender
},2000,biodata.name)

},2000, roll_no[1])

},2000):
}

31. What do you understand by the term Hoisting in JavaScript?

Hoisting in Javascript is done during compilation, it is the process to move the variables, functions declarations to the top of the scope
Please be careful that only declaration gets hoisted NOT the initialization. When you execute a code, the JavaScript engine V8 or spider monkey etc. creates the global execution context.
The global execution context has two phases: creation and execution.
During the creation phase, the JavaScript engine moves the variable and function declarations to the top of your code. This feature is known as hoisting in JavaScript.
There are broadly two main types of hoisting
1. Variable Hoisting-the JavaScript engine moves the variable declarations to the top of the script
console.log(x); // undefined
var x = 1;

In execution phase, this would look like something
var x
console.log(x);
x = 1;


2.Function hoisting
let x = 20,
y = 10;

let result = add(x,y);
console.log(result);

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

During the execution phase, it would look something like this function add(a, b){
return a + b;
}

let x = 20,
y = 10;

let result = add(x,y);
console.log(result);

32. What is AJaX?

AJAX stands for Asynchronous JavaScript and XML. It is a group of related technologies used to display data asynchronously.
What this means is that we can send data to the server and get data from the server without reloading the web page.

Technologies use for AJAX.

HTML – web page structure
CSS – the styling for the webpage
JavaScript – the behaviour of the webpage and updates to the DOM
XMLHttpRequest API – used to send and retrieve data from the server
PHP, Python, Nodejs – Some Server-Side language

33. List the new Array methods introduced in ES6?

Some of the Array Methods Introduced in ES6 are:-
1.concat()- this is used to merge two or more arrays together.
eg:
let a1=[1,2,3]
let b1=[4,5,6]
console.log(a1.concat(b1)); // output would be [1,2,3,4,5,6]
2. every()-This function checks whether the elements satisfy the condition or not. If it satisfies the condition it returns true and if a condition is not satisfied, it returns false and does not check for remaining values.

let a =[1,2,4];
a.every(function(num){
return num<10;
})

returns true

3.filter()- This method creates a new array that pass the given criteria and condition.It does not execute on empty array and also does not change the original array
let words = [‘aaa’, ‘abcd’, ‘a1a1’, ‘bcd123’, ‘ghjytr’, ‘fgfegf’];
console.log(words.filter(function(str){
return str.length>4;
}))
[“bcd123”, “ghjytr”, “fgfegf”]

4.find()- It returns the values of element as soon as the given condition satisfies.If the condition is satisfied , it returns from the array,return the value and
does not check for remaining values.It does not change the original array.
let a = [3, 10, 18, 20];
console.log(a.find(function(b){
return b==18}))
// returns 18

5. forEach()-This method used to iterate through its elements of the Arrays.
let b =[1,2,3,4];
b.forEach(function(i){console.log(i)})

6. Array.from() -The Array.from() method returns an Array from the given array , in case of string it return character of the string .
It accepts three parameters as object ,mapFunction and this which is optional
For eg ;
let a=”I am a good Boy”;
console.log(Array.from(a)) //It will print [“I”, ” “, “a”, “m”, ” “, “a”, ” “, “g”, “o”, “o”, “d”, ” “, “B”, “o”, “y”]


7. indexOf()-This method is used to find the index of the first occurrence of the search element provided as the argument to the method.
let b=[4,5,6,7]
console.log(b.indexOf(4)) //returns 0

34. What are the new String methods introduced in ES6?

Some of the String Method Introduced in ES6 are:-
1.startsWith -This method accepts two parameters one is queryString and another is the position. This method returns either true if the string starts with the provided string
from the specified position, otherwise false.
let str = “GreatLearning”;

console.log(str.startsWith(“Great”))

2.endsWith()-This method accepts two parameters one is queryString and another is the position. This method returns either true if the string ends with the provided
string for specified length, otherwise false.
let str = “GreatLearning”;

console.log(str.endsWith(“Learning”))

3.includes-This method accepts two parameters one is queryString and another is the position. This method will true if the string is present
let str = “GreatLearning”;

console.log(str.includes(“ern”));

4.repeat(count)-This method accepts a single argument which is an integer value that represents the number of times the string is to be repeated.
let str = “GreatLearning”;
console.log(str.repeat(2));

35. Define Webpack.

Webpack is a tool that compiles JavaScript modules, also known as module bundler.
It is used to generates a single file from a large file that runs in-app. Webpack can run Babel which transpiles to ES5. It can also be used to transpile CoffeeScript to JavaScript,
can also run a development webserver.
Webpack is not only used on the frontend, it’s also useful in backend Node.js development as well.

Predecessors of webpack are as follows

– Grunt
– Broccoli
– Gulp


The webpack mode is introduced in webpack 4 which sets the environment on which webpack works. It can be development or production defaults to production.

Development mode:

– builds very fast
– is less optimized than production
– does not remove comments
– provides more detailed error messages and suggestions

Production mode
– is slower to build, since it needs to generate a more optimized bundle.
– The resulting JavaScript file is smaller in size, as it removes many things that are not needed in production.

36. Define Babel.

Babel is a JavaScript transpiler that converts ES6JavaScript into old ES5 JavaScript that can run in any browser.
Every major release, the syntactical sugar is being added to JavaScript, but that is not immediately supported by Browser so to overcome this babel is used

In

// ES2020 nullish coalescing
function Hello(val) {
return val ?? “Hello world”;
}
Out

function Hello(val) {
return val != null ? val : “Hello world”;
}

1

LEAVE A REPLY

Please enter your comment!
Please enter your name here

ten + two =