You create an array by:
var employeeDetails = [0];
employeeDetails [0]=†EMPâ€;
var employeeDetails = [111,â€JOHNâ€, “80Kâ€];
var employeeDetails = new Array("EMP_ID", "EMP_NAME", "SALARY");
Posted Date:- 2021-10-08 09:23:55
The entire variable will go to the summit of the function and state the variable.
Posted Date:- 2021-10-08 09:23:02
The negative infinity is a figure in JavaScript, which can cause resultant by separating a negative number by 0. Negative infinity is less than zero when compared, and optimistic infinity is better than zero.
Posted Date:- 2021-10-08 09:21:43
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 = void
function b() {
return 'f';
}();
console.log(f); // undefined
Posted Date:- 2021-10-08 09:20:55
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); // undefined
console.log(b); // causes ReferenceError: aLet is not defined
var a = 1;
let b = 2;
Posted Date:- 2021-10-08 09:20:12
Callback: It is used to handle the execution of function after the completion of the execution of another function. A callback would be helpful in working with events. In the callback, a function can be passed as an argument to another function. It is a great way when we are dealing with basic cases such as minimal asynchronous operations.
Callback hell: When we develop a web application that includes a lot of code, then working with callback is messy. This excessive Callback nesting is often referred to as Callback hell.
Posted Date:- 2021-10-08 09:18:00
JavaScript permits a usual function to be approved as a fight to another task. This callback function will be invoked later within the past role. It is also known as high-order functions. An everyday use case for a callback is occasion handlers.
$("#btn").click(clickEvent);
How they work: We are not transitory the function with (). We are passing only the purpose definition. So, that will be invoked later. Since callback functions are closure, they have admission to the containing function’s range, and even from the worldwide scope.
Posted Date:- 2021-10-08 09:14:35
Weak maps are almost similar to maps, but the keys in weak maps must be objects. It stores each element as a key-value pair where keys are weakly referenced. Here, the keys are objects, and the values are arbitrary.
A weak map object iterates the element in their insertion order. It only includes delete(key), get(key), has(key) and set(key, value) method.
Posted Date:- 2021-10-08 09:13:50
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.
Posted Date:- 2021-10-08 09:12:25
By using the default parameters, we can initialize named parameters with default values if there is no value or undefined is passed.
Example
var show = (a, b=200) => {
console.log(a + " " + b);
}
show(100);
Output
100 200
Posted Date:- 2021-10-08 09:11:34
This keyword is used for creating the class. We can include the classes in our code either by using class expression or by class declaration. A class definition can only include functions and constructors. These components are together called as data members of the class.
Constructors in classes allocate the memory to the objects of the class. Functions in a class are responsible for performing the actions to the objects.
To learn more about classes in ES6, follow this link ES6 Classes
.
Let us see the syntax for creating classes.
Syntax: In ES5
var var_name = new class_name {
}
Syntax: In ES6 (Using class keyword)
class class_name{
}
Posted Date:- 2021-10-08 09:10:04
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 like Object.prototype.has Own Property which appears in anything that inherits from Object.
Posted Date:- 2021-10-08 09:09:09
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.
let arr = [3, 4, 5];
for (let i in arr) {
console.log(i); // "0", "1", "2",
}
for (let i of arr) {
console.log(i); // "3", "4", "5"
}
Posted Date:- 2021-10-08 09:08:22
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.
Posted Date:- 2021-10-08 09:07:24
Promises mainly possess three states as follows:
1. Pending: This refers to the initial state of every promise. It indicates that the result has not yet been computed.
2. Fulfilled: It refers to the completion of a task.
3. 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() constructor. It returns either the first or second parameter, depending on the asynchronous operation.
Posted Date:- 2021-10-08 09:05:42
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
Posted Date:- 2021-10-08 09:01:59
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()
Posted Date:- 2021-10-08 09:01:00
he 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.
Syntax: In ES5
var varName = new className {
}
Syntax: In ES6 (Using class keyword)
class className{
}
Posted Date:- 2021-10-08 09:00:28
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’
Posted Date:- 2021-10-08 08:59:19
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} `)
}
Posted Date:- 2021-10-08 08:58:25
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 previous versions.
Posted Date:- 2021-10-08 08:57:58
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.
let s1 = "Good";
let s2 = "Day";
let s = `${s1} ${s2}`;
console.log(s);
Output:
Good Day
Posted Date:- 2021-10-08 08:56:55
The benefits are:
1. It has included dev server. You only require including one JS tag sharp to server like localhost:8080/assets/bundle.js and get live system updating and advantage management in no costs.
2. Multiple modules and packs are bundled into a solo .js file.
Posted Date:- 2021-10-08 08:56:19
Babel is a JS Transpiler, which let us write in ES6 and interpret the work done in ES6 into ES5 which is supported by browsers.
Posted Date:- 2021-10-08 08:55:34
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.
Posted Date:- 2021-10-08 08:53:22
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.
function display(...args) {
let ans = 0;
for (let i of args) {
ans *= i;
}
console.log("Product = "+ans);
}
display(4, 2, 3);
Output:
Product = 24
Posted Date:- 2021-10-08 08:52:44
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 hell.)
Posted Date:- 2021-10-08 08:52:03
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.
let greeting =['Good','Morning'];
let [g1, g2] = greeting;
console.log (g1, g2);
Output:
Good Morning
Posted Date:- 2021-10-08 08:51:29
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.
Posted Date:- 2021-10-08 08:49:07
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)
Posted Date:- 2021-10-08 08:46:55
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
He 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.
Posted Date:- 2021-10-08 08:46:24
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.
Posted Date:- 2021-10-08 08:45:58
Classes are based on the OOP style that is object-oriented programming. The class declaration makes the patterns easier to use. It supports inheritance, base class access, static methods, and constructors.
1. Modules: it defines the patterns from popular javascript module loaders. It supports exporting or importing the values from or to modules without the global namespace. It supports marking the value as the default exported value and max-min values.
2. Proxies: It enables object creation with a wide variety of behaviours available to host objects. It can be used for logging, profiling, etc.
Posted Date:- 2021-10-08 08:45:37
This is the frequently asked ES6 Interview Questions which is asked in an interview. Destructuring assignment is used to bind the set of a variable to the corresponding values. It mainly refers to the use of patterns to extract the parts of an object. A destructuring assignment has different forms like array matching, object matching, shorthand notation, object matching, deep matching, object and array matching, default values, parameter context matching, and fail-soft destruct. Some are explained as:
1. Array matching/object matching, shorthand notation/ object matching, deep matching: It is intuitive and flexible of arrays into individual variables during an assignment.
2. Object and Array matching: It is simple and defined default values for destructuring of objects and arrays.
Posted Date:- 2021-10-08 08:44:33
These are the APIs that are standard API of JavaScript that helps in different tasks like collation, Number formatting, Currency formatting, Date and time formatting.
1. Collation: It is used for searching within a set of strings and sorting a set of strings. It is parameterized by locale and aware of Unicode.
2. Number Formatting: Numbers can be formatted with localized separators and digit grouping. The other things that include are style formatting, numbering system, percent, and precision.
3. Currency formatting: Numbers can be formatted mainly with currency symbols, with localized separators and digit grouping.
4. Date and time formatting: it has been formatted with localized separators and ordering. The format can be short, long and other parameters like locale and time zone.
Posted Date:- 2021-10-08 08:43:44
Default parameter values are used to initialize the functions with default values. The value of a parameter can be anything like a null value, number or function.
The rest parameter is used to retrieve all the arguments to invoke the function. It means we can push the items of different categories separately. The rest parameter uses the rest parameter to combine parameters into a single array parameter.
A spread operator is donated by …, and then the variable name has been provided. E.g. ‘…X’ syntax of spread operator. It has been used to manipulate objects and array in ES6 and to copy the enumerable properties from one object to another.
Posted Date:- 2021-10-08 08:42:08
Webpack is used to bundle javascript files that can be used in a browser. Webpack processes the application and builds a dependency graph to map each module of the project requirement and generated the bundles. It allows you to run that environment that has been hosted babel. The advantage of using a web pack is that it bundles multiple modules and packs into a single JavaScript file. It integrated the dev server, which helps in updating code and asset management.
Posted Date:- 2021-10-08 08:41:48
Arrow functions support expressions bodies and statement bodies which returns the expression’s value and makes the syntax more expressive. Arrow functions have lexical ‘this’ feature as well. Arrow (=>) is used as part of the syntax. Lexical, this is declared or defined where the function is written. It comes under the umbrella of lexical scope; lexical scope has access to variables that are in its parent scope.
Posted Date:- 2021-10-08 08:41:27
This is the common ES6 Interview Question that is asked in an interview. The variables and functions are defined as indefinite blocks. It means these can be used where the variables and functions are defined or declared. If we have declared variable and function in any function block, their scope will be limited to that function only; they cannot be accessible outside the block/function. ‘Const’ keyword cannot change the value of a variable. ‘let’ keyword allows variable value to be re-assigned; it can be in for loop or arrays.
Posted Date:- 2021-10-08 08:41:10
The WeakMap is same as Map where it is a collection of key/value pairs. But in WeakMap, the keys must be objects and the values can be arbitrary values. The object references in the keys are held weakly, meaning that they are a target of garbage collection (GC) if there is no other reference to the object anymore. The WeakMap API is the same as the Map API.
However, One difference to Map objects is that WeakMap keys are not enumerable. And there are no methods giving us a list of keys. If they were, the list would depend on the state of garbage collection, introducing non-determinism. If we want to have a list of keys, we should use a Map.
Posted Date:- 2021-10-08 08:40:31
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 );
Posted Date:- 2021-10-08 08:38:52
<!--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;
Posted Date:- 2021-10-08 08:38:06
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.
Posted Date:- 2021-10-08 08:37:48
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.
Posted Date:- 2021-10-08 08:36:58
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);
Posted Date:- 2021-10-08 08:35:50
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();
Posted Date:- 2021-10-08 08:35:24
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
Posted Date:- 2021-10-08 08:34:50
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 !â€)};
Posted Date:- 2021-10-08 08:34:32
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
Posted Date:- 2021-10-08 08:34:18
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.
Posted Date:- 2021-10-08 08:33:33
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.
Posted Date:- 2021-10-08 08:33:16