js Es Flashcards

1
Q

Mention some popular features of ES6.

A

Supports constants/immutable variables.
Block scope support for all variables, constants and functions.
Introduction to arrow functions
Handling extended parameter
Default parameters
Extended and template literals
De-structuring assignment
Promises
Classes
Modules
Collections
Supports Map/Set & Weak-map/Weak-Set
Localization, meta-programming, internationalization

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

. What are the object oriented features supported in ES6.

A

Classes Methods Inheritance

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Give a thorough comparison between ES5 and ES6.

A

ES5 is the fifth edition of the ECMAScript which was introduced in 2009. ES6 is the sixth edition of the ECMAScript which was introduced in 2015.
Primitive data types that are string, boolean, number, null, and undefined are supported by ES5. There are a few additions to the JavaScript data types in ES6. For supporting unique values, a new primitive data type ‘symbol’ was introduced.
In ES5, we could define the variables by using the var keyword only. In ES6, in addition to var, there are two new methods to define variables: let and const.
Both function and return keywords are used in order to define a function in ES5. An arrow function is a newly added feature in ES6 in which we don’t require the function keyword in order to define the function.
In ES5, a for loop is used to iterate over elements. ES6 introduced the idea of for…of loop in order to iterate over the values of the iterable objects.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is the difference between let and const? What distinguishes both from var?

A

When declaring any variable in JavaScript, we used the var keyword. Var is a function scoped keyword. Within a function, we can access the variable. When we need to create a new scope, we wrap the code in a function.

Both let and const have block scope. If you use these keywords to declare a variable, it will only exist within the innermost block that surrounds them. If you declare a variable with let inside a block (for example, if a condition or a for-loop), it can only be accessed within that block.

The variables declared with the let keyword are mutable, which means that their values can be changed. It’s akin to the var keyword, but with the added benefit of block scoping. The variables declared with the const keyword are block-scoped and immutable. When variables are declared with the const keyword, their value cannot be modified or reassigned.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

. Discuss the arrow function.

A

In ES6, arrow functions are introduced. The shorthand syntax for writing ES6 functions is arrow functions. The arrow function’s definition consists of parameters, followed by an arrow (=>), and the function’s body.

The ‘fat arrow’ function is another name for the Arrow function. We won’t be able to employ them as constructors.

It reduces the size of the code.
For a single-line function, the return statement is optional.
Bind the context lexically.
For a single-line statement, functional braces are not required.
Doesn’t work with new

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

When should one not use arrow functions?

A

One should not use arrow functions in the following cases:

Function Hoisting, Named Functions:
As arrow functions are anonymous, we cannot use them when we want function hoisting or when we want to use named functions.

Object methods:
var a = {
b: 7,
func: () => {
this.b–;
}
}
The value of b does not drop when you call a.func. It’s because this isn’t bound to anything and will inherit the value from its parent scope.

Callback functions with dynamic context:
var btn = document.getElementById(‘clickMe’);
btn.addEventListener(‘click’, () => {
this.classList.toggle(‘on’);
});
We’d get a TypeError if we clicked the button. This is due to the fact that this is not bound to the button, but rather to its parent scope.

this/arguments:
Since arrow functions don’t have this/arguments of their own and they depend on their outer context, we cannot use them in cases where we need to use

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is the generator function?

A

This is a newly introduced feature in ES6. The Generator function returns an object after generating several values over time. We can iterate over this object and extract values from the function one by one. A generator function returns an iterable object when called. In ES6, we use the * sign for a generator function along with the new ‘yield’ keyword.

function *Numbers() {
let num = 1;
while(true) {
yield num++;
}
}

var gen = Numbers();

// Loop to print the first
// 5 Generated numbers
for (var i = 0; i < 5; i++) {

// Generate the next number
document.write(gen.next().value);
 
// New Line
document.write("<br>"); } Output:

1
2
3
4
5
The yielded value becomes the next value in the sequence each time yield is invoked. Also, generators compute their output values on demand, allowing them to efficiently represent expensive to compute sequences or even infinite sequences.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the “spread” operator in ES6?

A

The list of parameters is obtained using the spread operator. Three dots (…) are used to represent it. The spread operator divides an iterable (such as an array or a string) into individual elements. It’s mostly used in JavaScript to make shallow copies of JS. It improves the readability of your code by making it more concise.

The spread operator can be used to join two arrays together or to concatenate them.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Explain Destructuring in ES6.

A

Destructuring was introduced in ES6 as a way to extract data from arrays and objects into a single variable. It is possible to extract smaller fragments from objects and arrays using this method. The following is an example.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What are Promises in ES6?

A

Asynchronous programming is a concept found in JavaScript. The processes are run separately from the main thread in asynchronous programming. Promises are the most convenient approach to deal with asynchronous programming in ES6. Depending on the outcome of the procedure, a promise can be refused or resolved. Callbacks were used to cope with asynchronous programming before promises were introduced in ES6.

However, it caused the problem of callback hell, which was addressed with the introduction of promises.

(A callback is a function that is performed after another function has completed. When working with events in JavaScript, callback is very useful. As an argument to another function, we pass a function into another function.

When we use callbacks in our web applications, it’s common for them to get nested. Excessive callback usage clogs up your web application and leads to callback

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Explain the Rest parameter in ES6.

A

It’s a new feature in ES6 that enhances the ability to manage arguments. Indefinite arguments can be represented as an array using rest parameters. We can invoke a function with any number of parameters by utilizing the rest parameter.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Discuss the template literals in ES6.

A

Template literals are a brand-new feature in ES6. It makes producing multiline strings and performing string interpolation simple.

Template literals, also known as string literals, allow for embedded expressions.

Template literals were referred to as template strings prior to ES6. The backtick (``) character is used to enclose template literals. The dollar sign and curly brackets (${expression}) are used to denote placeholders in template literals. If we need to use an expression within the backticks, we can put it in the (${expression}) variable.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Why should one use ES6 classes?

A

Developers have discovered that ES6 classes are really handy. The following are some of the most common applications of ES6 classes:

The syntax of ES6 classes is simpler and less prone to errors.
When it comes to building up inheritance hierarchies, ES6 is the ideal option because it combines new and old syntax, reducing errors and simplifying the process.
ES6 classes prevent developers from making mistakes when using a new operator. If this proves to be an invalid object for the constructor, classes eliminate this issue by having the constructor throw an exception.
Classes can also be used to call a method from the prototype’s version. With the new ES6 syntax, this version is significantly easier to use than previou

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

How can you create a class in ES6?

A

The keyword class is used to create a class in ES6. We can use class expressions or class declarations to include classes in our code. Only functions and constructors are allowed in a class definition. These components are collectively referred to as the class’s data members.

Constructors in classes are responsible for allocating memory to the class’s objects. A class’s functions are in charge of performing actions on the objects.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is a class expression?

A
  1. What is a class expression?
    In ES6, one way to define a class is to use the Class expression. Class expressions, like function expressions, can be named or unnamed. If the class is named, the name is unique to the class body. Prototype-based inheritance is used in JavaScript classes.

var Product = class {
constructor (num1, num2) {
this.num1 = num1;
this.num2 = num2;
}
multiplication() {
return this.num1 * this.num2;
}
}
console.log(new Product(5,8).multiplication());
// expected output: 40
The syntax of a class expression is similar to that of a class statement (declaration). Class expressions, on the other hand, allow you to omit the class name (“binding identifier”), which is not possible with class statements. Additionally, unlike class declarations, class expressions allow you to redefine/re-declare classes without

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What do you understand about IIFE (Immediately Invoked Function Expressions)?

A

IIFE is a JavaScript function that starts running as soon as it is defined. The Self-Executing Anonymous Function is another name for it. It is divided into two major sections, which are as follows:

The first part is a lexical scope (static scope) anonymous function that is enclosed by the Grouping operator ().
The IIFE, which is used by JavaScript, is created in the second part. The function will be directly interpreted by the engine.

17
Q

What are the states of Promises in ES6?

A

Promises mainly possess three states as follows:

Pending: This refers to the initial state of every promise. It indicates that the result has not yet been computed.
Fulfilled: It refers to the completion of a task.
Rejected: It indicates the failure that arises during computation.
The promise will be immutable once it has been fulfilled or rejected. A rejected function and a resolve function are the two arguments passed into the Promise

18
Q

What is Export Default and Named Export in ES6?

A

With the help of the import statement, the export statement comes into picture when one needs to export functions, objects, and variables to other JavaScript modules. There are two methods for exporting:

Named Export: Named exports are useful when one has to export multiple values. The name of the imported module must match that of the exported module.
Example:

19
Q

Which keyword can be used to deploy inheritance in ES6?

A

The extend keyword is used to implement inheritance in the ES6 language. There was no idea of classes in prior versions of Javascript, but with the release of ES6, Pure Object Oriented elements were added to the language.

20
Q

What is Bubbling and Capturing?

A

When an event occurs on the DOM, it does not take place completely on one element. The event bubbles up or goes to its parent, grandparents, and grandparent’s parent until it reaches the window in the Bubbling Phase, whereas the event starts out from window down to the element that prompted the event or the event target in the Capturing Phase.

There are three stages of event propagation:

Capturing Phase - the event begins with the window and progresses through each element until it reaches the target element.
Target Phase - The event has arrived at the target element.
Bubbling Phase - The event bubbles up from the target element and then up every element until it reaches the window

21
Q

What is the difference between for..of and for..in?

A

for in: runs over an object’s enumerable property names.
for of: (new in ES6) takes an object-specific iterator and loops through the data it generates.
Both the for..of and for..in commands iterate over lists, but the results they return are different: for..in returns a list of keys on the object being iterated, whereas for..of returns a list of values of the object’s numeric attributes.

22
Q

What is the reason behind adding Symbol to ES6?

A

Symbols are a new type of object that can be used as distinct property names in objects. Using Symbols instead of strings allows separate modules to create properties that are not mutually exclusive. Symbols can also be kept private, preventing anyone who does not have direct access to the Symbol from accessing its properties.

Symbols are a brand-new kind of primitive. Symbols, like numbers, strings, and booleans, have a function that can be used to produce them. Symbols, unlike the other primitives, do not have a literal syntax (similar to how strings have “) and can only be created using the Symbol constructor:

let symbol = Symbol();
In truth, Symbols are only a little different means of attaching properties to an object; the well-known Symbols could easily be provided as standard methods, just

23
Q

What is Babel?

A

abel is an open-source JavaScript transpiler that converts ECMAScript 2015+ (ES6+) code into a backwards compatible version of JavaScript that can be run by previous JavaScript engines. Babel is a popular tool for exploiting the JavaScript programming language’s latest capabilities.

Babel plugins are used to convert syntax that isn’t widely supported into a version that is backwards compatible. Arrow functions, for example, which are defined in ES6, are translated to ordinary function declarations. It’s also possible to translate non-standard JavaScript syntax, such as JSX. Babel may automatically inject core-js polyfills for support capabilities that aren’t available in JavaScript environments

24
Q

What is the Prototype Design Pattern?

A

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.

25
Q

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

A

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.

26
Q

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

A

he 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.

27
Q

What are Proxy in ES6?

A

he 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, undefined

console.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 javascrip

28
Q

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

A

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

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