https://github.com/piyalidas10/javascript-interview-questions-mylists
Javascript Interview Questions
https://github.com/piyalidas10/javascript-interview-questions-mylists
interview interview-questions javascript
Last synced: 12 months ago
JSON representation
Javascript Interview Questions
- Host: GitHub
- URL: https://github.com/piyalidas10/javascript-interview-questions-mylists
- Owner: piyalidas10
- Created: 2023-01-16T05:07:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-17T15:27:18.000Z (over 1 year ago)
- Last Synced: 2024-11-17T16:34:16.820Z (over 1 year ago)
- Topics: interview, interview-questions, javascript
- Homepage:
- Size: 7.68 MB
- Stars: 5
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Javascript-Interview-Questions
Javascript Interview Questions
### 1. Pure function vs Impure functions
Answer
####
- Pure functions do not have side effects. Impure functions can cause side effects.
- Pure functions return the same output if we use the same input parameters. However, impure functions give different outcomes when we pass the same arguments multiple times.
- Pure functions always return some results. Impure functions can execute without producing anything.
- Debugging pure functions is relatively easier than debugging impure functions.
- Pure functions cannot execute AJAX calls or standard DOM manipulation.
- Impure functions aren’t inherently wrong. They merely can cause some confusion in more extensive systems in the form of spaghetti code.
`Pure Functions`
To get a better understanding, let’s consider the following example.
```
function add(a,b) {
return a + b
}
console.log(add(4,5))
```
This example contains a simple add() function, which gives 9 as the output. It is a very predictable output, and it does not depend on any external code. This makes the add() function a pure function.
`Impure Functions`
For example, consider the following code snippet:
```
var addNew = 0;
function add(a,b){
addNew =1;
return a + b + addNew
}
console.log(add(4,5))
```
In the above example, there is a variable named addNew, and it is declared outside of the add() function. But the state of that variable is changed inside the add() function. So, the add() function has a side effect on a variable outside of its scope and is therefore considered an impure function.
---
### 2. What is Javascript closure ?
Answer
####
https://medium.com/@piyalidas.it/closure-in-javascript-2496fdedeb7d
https://dev.to/imranabdulmalik/mastering-closures-in-javascript-a-comprehensive-guide-4ja8#:~:text=The%20Factory%20Function%20Pattern%20uses,without%20explicitly%20class%2Dbased%20syntax.
Closure provides access to the outer scope of a function from inside the inner function, even after the outer function has closed. The main advantage of javascript closure is Data Privacy.
```
const countFunc = function counter() {
let c = 0;
c = c+1;
return c;
}();
```
If you run countFunc, eveytime it will print "1". This you can resolve by closure.
Solution using normal function
------------------------------------------
const countFunc = function counter() {
let c = 0;
return function() {
c = c+1;
return c;
}
}();
run countFunc()
Solution using arrow function
------------------------------------------
```
const countFunc = function counter() {
let c = 0;
return ()=> {
c = c+1;
return c;
}
}();
run countFunc()
```
The variable countFunc is assigned to the return value of a self-invoking function.
When to Use Closure in JavaScript (Practical use)?
Suppose, you want to count the number of times user clicked a button on a webpage. For this, you are triggering a function on onclick event of button to update the count of the variable
```
click me
```
Now there could be normal approaches like:
You could use a global variable, and a function to increase the counter:
```
var counter = 0;
function updateClickCount() {
++counter;
// Do something with counter
}
```
But, the pitfall is that any script on the page can change the counter, without calling updateClickCount().
ou might be thinking of declaring the variable inside the function:
```
function updateClickCount() {
var counter = 0;
++counter;
// Do something with counter
}
```
But, hey! Every time updateClickCount() function is called, the counter is set to 1 again.
you need to find a way to execute counter = 0 only once not everytime. SO have to use closure.
```
var updateClickCount = (function(){
var counter = 0;
return function(){
++counter;
document.getElementById("spnCount").innerHTML = counter;
}
})();
click me
you've clicked
0 times!
```
---
### 3. Javascript Event Loop
Answer
####
https://www.jsv9000.app/
```
function three() {
console.log("three");
setTimeout(function () {
console.log("last");
}, 1000);
}
function two() {
console.log("two");
three();
}
function one() {
console.log("one");
two();
}
one();
```
JavaScript is single-threaded: only one task can run at a time. Usually that’s no big deal, but now imagine you’re running a task which takes 30 seconds.. Ya.. During that task we’re waiting for 30 seconds before anything else can happen (JavaScript runs on the browser’s main thread by default, so the entire UI is stuck) 😬 It’s 2019, no one wants a slow, unresponsive website.
Luckily, the browser gives us some features that the JavaScript engine itself doesn’t provide: a Web API. This includes the DOM API, setTimeout, HTTP requests, and so on. This can help us create some async, non-blocking behavior.
When we invoke a function, it gets added to something called the call stack. The call stack is part of the JS engine, this isn’t browser specific. It’s a stack, meaning that it’s first in, last out (think of a pile of pancakes). When a function returns a value, it gets popped off the stack.
The respond function returns a setTimeout function. The setTimeout is provided to us by the Web API: it lets us delay tasks without blocking the main thread. The callback function that we passed to the setTimeout function, the arrow function () => { return 'Hey' } gets added to the Web API. In the meantime, the setTimeout function and the respond function get popped off the stack, they both returned their values!
In the Web API, a timer runs for as long as the second argument we passed to it, 1000ms. The callback doesn’t immediately get added to the call stack, instead it’s passed to something called the queue.
This can be a confusing part: it doesn't mean that the callback function gets added to the callstack(thus returns a value) after 1000ms! It simply gets added to the queue after 1000ms. But it’s a queue, the function has got to wait for its turn!
Now this is the part we’ve all been waiting for… Time for the event loop to do its only task: connecting the queue with the call stack! If the call stack is empty, so if all previously invoked functions have returned their values and have been popped off the stack, the first item in the queue gets added to the call stack. In this case, no other functions were invoked, meaning that the call stack was empty by the time the callback function was the first item in the queue
The callback is added to the call stack, gets invoked, and returns a value, and gets popped off the stack.
Reading an article is fun, but you'll only get entirely comfortable with this by actually working with it over and over. Try to figure out what gets logged to the console if we run the following:
```
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
bar();
foo();
baz();
```
Got it? Let's quickly take a look at what's happening when we're running this code in a browser:
- 1. We invoke bar. bar returns a setTimeout function.
- 2. The callback we passed to setTimeout gets added to the Web API, the setTimeout function and bar get popped off the callstack.
- 3. The timer runs, in the meantime foo gets invoked and logs First. foo returns (undefined),baz gets invoked, and the callback gets added to the queue.
- 4. baz logs Third. The event loop sees the callstack is empty after baz returned, after which the callback gets added to the call stack.
- 5. The callback logs Second.
---
### 4. Slice vs Splice
Answer
####
- 1. Slice is used to get a new array from the original array whereas the splice is used to add/remove items in the original array. The changes are not reflected in the original array in the case of slice and in the splice, the changes are reflected in the original array.
```
--------- Slice-----------
let arr = [4, 3, 5, 9];
let res = arr.slice(0, 2);
console.log(res); --------- (2) [4, 3]
-----------Splice----------
let arr = [4, 3, 5, 9];
arr.splice(0, 2);
console.log(arr); --------- (2) [5, 9]
```
- 2. The splice() method is used to add or remove elements of an existing array
```
--------- Add element-----------
let arr = [4, 3, 5, 9];
arr.splice(2, 0, 10);
console.log(arr); ---------- (5) [4, 3, 10, 5, 9]
--------- Remove element-----------
let arr = [4, 3, 5, 9];
arr.splice(2, 1);
console.log(arr); ---------- (3) [4, 3, 9]
```
---
### 5. Spread vs Rest
Answer
####
The spread operator helps us expand an iterable such as an array where multiple arguments are needed, it also helps to expand the object expressions.
var array1 = [10, 20, 30, 40, 50];
var array2 = [60, 70, 80, 90, 100];
var array3 = [...array1, ...array2];
console.log(array3); [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
const obj = {
firstname: "Divit",
lastname: "Patidar",
};
const obj2 = { ...obj };
console.log(obj2);
{
firstname: "Divit",
lastname: "Patidar"
}
The rest parameter syntax allows a function to accept an indefinite number of arguments as an array.
```
function myBio(firstName, lastName, ...otherInfo) {
return otherInfo;
}
console.log(
myBio('Oluwatobi', 'Sofela', 'CodeSweetly', 'Web Developer', 'Male')
);
["CodeSweetly", "Web Developer", "Male"]
```
---
### 5. Event Propagation ( Event Bubbling and capturing )
Answer
####
- 1. Capturing phase – the event goes down to the element.
- 2. Target phase – the event reached the target element.
- 3. Bubbling phase – the event bubbles up from the element.
Event capturing means propagation of event is done from ancestor elements to child element in the DOM while event bubbling means propagation is done from child element to ancestor elements in the DOM.
DOM Events describes 3 phases of event propagation: Capturing phase – the event goes down to the element. Target phase – the event reached the target element. Bubbling phase – the event bubbles up from the element.
Both can be prevented by using the stopPropagation() method.
```
FORM
DIV
P
```
So if we click on
, then we’ll see 3 alerts: p → div → form.
The process is called “bubbling”, because events “bubble” from the inner element up through parents like a bubble in the water.
event.stopPropagation() stops the move upwards
---
### 6. Top 10 Features of ES6
Answer
####
https://www.boardinfinity.com/blog/top-10-features-of-es6/
- 1. let and const Keywords
- 2. Arrow Functions
- 3. Multi-line Strings
- 4. Default Parameters
- 5. Template Literals
- 6. Destructuring Assignment
- 7. Enhanced Object Literals
- 8. Promises
- 9. Classes
- 10. Modules
---
### 7. What is Recursion?
Answer
####
Recursion is a technique for iterating over an operation by having a function call itself repeatedly until it arrives at a result.
```
function factorial(num) {
if(num <= 0) {
return 1;
} else {
return (num * factorial(num-1) )
}
}
console.log(factorial(6))
```
---
### 8. What is Temporal Dead Zone?
Answer
####
Temporal Dead Zone is the period of time during which the let and const declarations cannot be accessed.
Temporal Dead Zone starts when the code execution enters the block which contains the let or const declaration and continues until the declaration has executed.
Variables declared using let and the constants declared using const are hoisted but are in a TDZ.
```
console.log(a);
var a = 10;
It will print ----------- undefined
console.log(a);
let a = 10;
It will print ----------- VM228:1 Uncaught ReferenceError: a is not defined
```
---
### 9. map() vs forEach()
Answer
####
The map() method is used to transform the elements of an array, whereas the forEach() method is used to loop through the elements of an array. The map() method can be used with other array methods, such as the filter() method, whereas the forEach() method cannot be used with other array methods.
---
### 10. What is prototype in javascript
Answer
####
Prototypes are the mechanism by which JavaScript objects inherit features from one another. The prototype is an object that is associated with every functions and objects by default in JavaScript.
When a programmer needs to add new properties like variables and methods at a later point of time, and these properties need sharing across all the instances, then the prototype will be very handy.
---
### 11. When to use Prototype in JavaScript?
Answer
####
As we all know, Javascript is a dynamic language where we can add new variables and methods to the object at any point in time, as shown below.
```
function Employee() {
this.name = 'Arun';
this.role = 'QA';
}
var empObj1 = new Employee();
empObj1.salary = 30000;
console.log(empObj1.salary); // 15
var empObj2 = new Employee();
console.log(empObj2.salary); // undefined
```
As we see in the above example, the salary variable adds to the empObj1. But when we try to access the salary variable using the empObj2 object, it doesn't have the salary variable because the salary variable is defined only in the empObj1 object.
Now comes the question, Can there be a way that the new variable can be added to the function itself so as it is accessible to all the objects created using the function?
The answer to this question is the use of a prototype. A prototype is an invisible inbuilt object which exists with all the functions by default. The variables and methods available in the prototype object can be accessible, modifiable, and even can create new variables and functions.
---
### 12. prototype inheritance in javascript
Answer
####
Prototype inheritance in javascript is the linking of prototypes of a parent object to a child object to share and utilize the properties of a parent class using a child class.
The syntax used for prototype inheritance has the __proto__ property which is used to access the prototype of the child. The syntax to perform a prototype inheritance is as follows :
child.__proto__ = parent;
```
let animal = {
animalEats: true,
};
let rabbit = {
rabbitJumps: true,
};
// Sets rabbit.[[Prototype]] = animal
rabbit.__proto__ = animal;
console.log(rabbit.animalEats); // true
console.log(rabbit.rabbitJumps); // true
```
---
### 13. Remove duplicate values from Array
Answer
####
```
arr = [1, 2,3,4,5,6,2,3,4];
finalArr = [...new Set(arr)]; /////// [1, 2, 3, 4, 5, 6]
arr = [1, 2, 3, 3, 4, 5, 6];
const finalArr1 = arr.reduce((acc, curElm) => {
return acc.includes(curElm)? acc : [...acc, curElm]
},[]);
console.log(finalArr1); // [1, 2, 3, 4, 5, 6]
const finalArr2 = arr.reduce((acc, curElm) => {
return acc.includes(curElm)? acc : acc.concat(curElm)
},[]);
console.log(finalArr2); // [1, 2, 3, 4, 5, 6]
```
---
### 14. Removing duplicate objects (based on multiple keys) from array
Answer
####
```
const listOfTags = [
{id: 1, label: "Hello", color: "red", sorting: 0},
{id: 2, label: "World", color: "green", sorting: 1},
{id: 3, label: "Hello", color: "blue", sorting: 4},
{id: 4, label: "Sunshine", color: "yellow", sorting: 5},
{id: 5, label: "Hello", color: "red", sorting: 6},
]
const unique = [];
listOfTags.map(x => unique.filter(a => a.label == x.label && a.color == x.color).length > 0 ? null : unique.push(x));
console.log(unique);
```
---
### 15. Why JavaScript is a single-thread language ?
Answer
####
The JavaScript within a chrome browser is implemented by a V8 engine.
Memory Heap
Call Stack
Memory Heap: It is used to allocate the memory used by your JavaScript program. Remember memory heap is not the same as the heap data structures, they are totally different. It is the free space inside your OS.
Call Stack: Within the call stack, your JS code is read and gets executed line by line.
Now, JavaScript is a single-threaded language, which means it has only one call stack that is used to execute the program. The call stack is the same as the stack data structure that you might read in Data structures. As we know stacks are FILO that is First In Last Out. Similarly, within the call stack, whenever a line of code gets inside the call stack it gets executed and moves out of the stack. In this way, JavaScript is a single-thread language because of only one call stack.
JavaScript is a single-threaded language because while running code on a single thread, it can be really easy to implement as we don’t have to deal with the complicated scenarios that arise in the multi-threaded environment like a deadlock.
Since JavaScript is a single-threaded language, it is synchronous in nature. Now, you will wonder if you have used async calls in JavaScript so is it possible then?
So, let me explain to you the concept of async calls within JavaScript and how it is possible with single-threaded language. Before explaining it let’s discuss briefly why we require the async call or asynchronous calls. As we know within the synchronous calls, all the work is done line by line i.e. the first task is executed then the second task is executed, no matter how much time one task will take. This arises the problem of time wastage as well as resource wastage. These two problems are overcome by asynchronous calls, where one doesn’t wait for one call to complete instead it runs another task simultaneously. So, when we have to do things like image processing or making requests over the network like API calls, we use async calls.
Now, coming back to the previous question of how to use async calls within JS. Within JS we have a lexical environment, syntax parser, and an execution context (memory heap and call stack) that is used to execute the JS code. But these browsers also have Event Loops, Callback queue, and WebAPIs that are also used to run the JS code. Although these are not part of JS it also helps to execute the JS properly as we sometimes used the browser functions within the JS.e);
---
### 16. How can i make array immutable in javascript
Answer
####
In JavaScript, things that are immutable don’t change in value when you use them, and things that are mutable do.
Object. freeze() to arrays to make them immutable.
```
For example, lets create a variable, age1, and assign its value to another variable, age2. If we update age2, the original variable, age1, is unaffected.
// Create a variable
let age1 = 42;
// Assign it to a new variable
let age2 = age1;
// Update the new variable
age2 = 84;
// logs 42
console.log(age1);
```
You can create an immutable copy of an array using Array.slice() with no arguments, or with the Array.from() method. It’s considered a best practice to do so before manipulating an array.
```
// Create an immutable copy
let evenMoreSandwiches = Array.from(sandwiches);
// Add a few sandwiches
sandwiches.push('italian', 'blt');
// logs ["turkey", "ham", "pb&j", "italian", "blt"]
console.log(sandwiches);
// logs ["turkey", "ham", "pb&j"]
console.log(evenMoreSandwiches);
```
You can use the spread operator to create immutable copies of arrays and objects instead of use Array.from().
---
### 17. How can i make object immutable in javascript
Answer
####
You can create an immutable copy of an object using Object.assign(). Pass in an empty object ({}) as the first argument and the object you want to copy as the second.
It’s considered a best practice to do so before manipulating an object.
```
// Create an immutable copy
let evenMoreLunch = Object.assign({}, lunch);
// Add a snack
lunch.snack = 'cookies';
// Logs {sandwich: 'turkey', drink: soda, snack: 'cookies'}
console.log(lunch);
// Logs {sandwich: 'turkey', drink: soda}
console.log(evenMoreLunch);
```
You can use the spread operator to create immutable copies of arrays and objects instead of use Object.assign().
---
### 18. How can reduce Memory Leaks in Javascript ?
Answer
####
most of the memory leaks can be traced back to not removing all references to objects that you don't need anymore. This can happen when you forget to remove intervals or timers, or you make excessive use of global variables.
Storing data in global variables is probably the most common type of memory leak. In the browser, for instance, if you use var instead of const or let—or leave out the keyword altogether—the engine will attach the variable to the window object.
The same will happen to functions that are defined with the function keyword.
```
user = getUser();
var secondUser = getUser();
function getUser() {
return 'user';
}
```
All three variables, user, secondUser, and getUser, will be attached to the window object.
This only applies to variables and functions that are defined in the global scope. If you want to learn more about this, check out this article explaining the JavaScript scope.
Avoid this by running your code in strict mode.
Apart from adding variables accidentally to the root, there are many cases in which you might do this on purpose.
You can certainly make use of global variables, but make sure you free space up once you don't need the data anymore.
To release memory, assign the global variable to null.
```
window.users = null;
```
So something to keep in mind is that memory is limited. When it comes to a call stack and memory Heap, those are two places is where javascript runs and stores memory. So we have to be careful not to have memory leaks or stack overflow if we are to have efficient code.
On the frontend, you can profile the memory usage in the Chrome DevTools under the Memory tab.
---
### 19. Why JavaScript is single threaded?
Answer
####
JavaScript can do one single thing at a time because it has only one call stack.
The call stack is a mechanism that helps the JavaScript interpreter to keep track of the functions that a script calls.
Every time a script or function calls a function, it's added to the top of the call stack. Every time the function exits, the interpreter removes it from the call stack.
A function either exits through a return statement or by reaching the end of the scope.
Every time a function calls another function, it's added to the top of the stack, on top of the calling function.
The order in which the stack processes each function call follows the LIFO principle (Last In, First Out).
---
### 20. Primitive vs Non-Primitive
Answer
####
Primitive data types
----------------------------------------------------------------------
Examples of Primitive data types are Boolean, char, byte, int, short, long, float, and double.
basic data types for whom memory is allocated in stack.
A stack is a data structure that JavaScript uses to store static data. Static data is data where the engine knows the size at compile time. In JavaScript, this includes primitive values (strings, numbers, booleans, undefined, and null) and references, which point to objects and functions.
Since the engine knows that the size won't change, it will allocate a fixed amount of memory for each value.
The process of allocating memory right before execution is known as static memory allocation.
Because the engine allocates a fixed amount of memory for these values, there is a limit to how large primitive values can be.
The limits of these values and the entire stack vary depending on the browser.
Reference (non primitive) data types
----------------------------------------------------------------------
1. Function – typeof function is function
2. Array – typeof array is object
3. Object – typeof object is object
4. Date – typeof date is object
Memory allocated for reference data types is in heap ( dynamic memory allocation).
The heap is a different space for storing data where JavaScript stores objects and functions.
Unlike the stack, the engine doesn't allocate a fixed amount of memory for these objects. Instead, more space will be allocated as needed.
Allocating memory this way is also called dynamic memory allocation.
---
### 21. What is garbage collector ?
Answer
####
In javascript, memory should be cleared up automatically using a thing called Garbage collector. Javascript is a language who ha garbage collector meaning you don't have to manage your memory manually. It gets cleared automatically & assigned automatically.
Garbage collector consists of three steps : 1. Find the root node in your code and recursively go through every child. The root node of browser code is Window object. In Nodejs , window object is global variable. 2. Mark every child including the root as active or inactive. Active means this part of code is referenced in the memory. Inactive mens it's not referenced from anywhere. 3. Delete all these inactive ones which mean if the variable i not needed anymore in the memory simple delete it.
window.x = 10 it's a global variable. you probably heard many times is a realy bad practive to have global variables.
window.calc = function() => {} calc is a fuction and imagine it does something heavy inside. That's obviously gonna stay on the root becuase root is accessing it and garbage collectors think that is always active becuase it sits on the root.
First thing you can do use strict to prevent you from these memory leaks becuae it i going to throw errors as soon as you have global variables. Or simple not use any global variables.
---
### 22. Difference Between Null & Undefined ?
Answer
####
Undefined means the variable has been declared, but its value has not been assigned. Null means an empty value or a blank value.
---
### 23. What will be the output of undefined==null & undefined===null ? Why ?
Answer
####
undefined==null will be true because both undefined and null represent nothingness.
undefined===null will be false because they contain different data type because undefined and null are different in terms of data type.
typeof(undefined) // 'undefined'
typeof(null) // 'object'
---
### 24. What is Hosting ?
Answer
####
In JavaScript, hoisting refers to the built-in behavior of the language through which declarations of functions, variables, and classes are moved to the top of their scope – all before code execution. Hoisting only happen with var and function keywords.
console.log(x);
var x = 9;
it will print undefined becuase at runtime it will be executed like the following way =:>
var x;
console.log(x);
x = 9;
---
### 25. var vs let ?
Answer
####
var is function scoped and let is block scoped. Variables declared by let are only available inside the block where they’re defined. Variables declared by var are available throughout the function in which they’re declared.
console.log(x);
var x=5;
Output will be undefined
console.log(x);
let x=5;
Output will be ReferenceError: Cannot access 'x' before initialization
let variables are not initialized until their definition is evaluated. Accessing them before the initialization results in a ReferenceError. The variable is said to be in "temporal dead zone" from the start of the block until the initialization is processed.
When working outside of function bodies, at a global level, let does not create a property on the global object, whereas var does. Therefore:
// Global variables
var x = 1;
let y = 2;
console.log(this.x); // will print 1
console.log(this.y); // will print undefined
{
let name1 = "Aryan" // name1 in block scope
console.log(name1) // Aryan
}
{
var newName = "Kaush" // newName not in block scope as var is used
console.log(newName) // Kaush
}
console.log(name1) // ReferenceError
console.log(newName) // Kaush
---
### 26. What is Arrow function ?
Answer
####
Arrow functions do not have their own arguments and it uses the arguments from the outer function.
- This object does not work with arrow function.
- arguments object does not work with arrow function.
- you cannot use new to call arrow function.
```
const obj = {
test() {
console.log(this);
}
};
obj.test() ==== {test: ƒ}
const obj = {
test:()=>{
console.log(this);
}
};
obj.test() ======== Window{0: Window, window: Window, self: Window, document: document, name: '', location: Location,…}
function show() {
console.log(arguments);
}
show(1,2,3); ======== Arguments(3)[1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
const show = ()=> {
console.log(arguments);
}
show(1,2,3); ======== Uncaught ReferenceError: arguments is not defined
solution for that --------
const show = (...arg)=> {
console.log(arg);
}
show(1,2,3); ========(3)[1, 2, 3]
```
---
### 27. What is IIFE(Immediately Invoked Function Expression) ?
Answer
####
a JavaScript function which calls itself, runs as soon as it is defined. This pattern encapsulates code within its own scope, preventing variable pollution in the global scope and enabling more controlled and modular code organization.
```
(function(){
console.log("IIFE");
})();
```
Use Cases
Encapsulation: IIFEs are commonly used to encapsulate variables and functions, preventing them from polluting the global scope. This is particularly useful in large applications or when integrating third-party scripts.
Avoiding Variable Collision: By creating a separate scope, IIFEs help prevent variable names from conflicting with those in other scripts or libraries, thus improving code robustness.
Module Pattern: Before ES6 introduced modules, IIFEs were often used to create modules with private and public methods, providing a way to structure code and manage dependencies effectively.
Module Pattern Before ES6
```
var module = (function() {
var privateVariable = 'I am private';
function privateFunction() {
return 'Private function';
}
return {
publicVariable: 'I am public',
publicFunction: function() {
return 'Public function calls ' + privateFunction();
}
};
})();
console.log(module.publicVariable); // Outputs: I am public
console.log(module.publicFunction()); // Outputs: Public function calls Private function
```
Here, privateVariable and privateFunction() are encapsulated within the IIFE’s scope, while publicVariable and publicFunction() are exposed and accessible outside.
For Loop with var Before ES6
Another common use case of IIFEs was to handle for loops with var, preventing unintended closures:
```
for (var i = 0; i < 5; i++) {
(function(index) {
setTimeout(function() {
console.log(index);
}, 1000);
})(i);
}
```
---
### 28. What is Call, Bind, Apply ?
Answer
####
bind() - creates a new function with predefined this value and returns it.
call() and apply() execute functions immediately with the specified this value. , but call() accepts arguments individually while apply() accepts an array of arguments.
Practical Scenario ::=
```
function show(obj) {
console.log(this);
}
let obj = {
a: 5
}
```
show(obj) will print Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}
Now I want that show function should bind to this object and not the window object, which is the global object. So purpose of this function is at the moment I want to assign the object reference tool that this object. Now call is handy for this scenario.
The call method takes first argument as the object to be passed to this. Then whatever parameters you want to pass, it's absolutely fine.
show.call(obj) will print {a: 5}
So in short call is used to change the reference or context are in charge value of this object.
```
const person = {
firstName: 'John',
lastName: 'Doe',
getFullName: function() {
return `${this.firstName} ${this.lastName}`;
}
};
const logName = function() {
console.log(`Logged name: ${this.getFullName()}`);
}
// bind logName to person object
const logPersonName = logName.bind(person);
logPersonName(); // will output "Logged name: John Doe"
```
Now call is handy for this scenario. When we want to bind the object but will call later.
---
### 29. What are the use of Map & Set ?
Answer
####
let product = new Map();
product.set('pCode', '001');
=====> Map(1) {'pCode' => '001'}
product.set(1, '002');
=====> Map(2) {'pCode' => '001', 1 => '002'}
product.set(true, '003');
=====> Map(3) {'pCode' => '001', 1 => '002', true => '003'}
product.size =====> 3
product.get(1) =====> '002'
let product = new Set(['one', 'two', 'three', 'two']);
product =====> Set(3) {'one', 'two', 'three'}
let arr = [1, 2, 3, 4, 2, 5];
arr = [...new Set(arr)]; =====> (5) [1, 2, 3, 4, 5]
---
### 30. Delete/Remove a property from an Object ?
Answer
####
Using delete operator
let emp = {
name: "Kareem",
age: 26,
designation: "Software Engineer",
}
delete emp.age
console.log(emp) =====> {name: 'Kareem', designation: 'Software Engineer'}
Using rest operator
let emp = {
name: "Kareem",
age: 26,
designation: "Software Engineer",
}
const {age, ...newEmp} = emp;
console.log(newEmp); =====> {name: 'Kareem', designation: 'Software Engineer'}
---
### 31. Difference Between == (loose equality) and === (strict equality operator) in Javascript ?
Answer
####
The == operator checks if two values are equal.
let a = '10', b = 10;
a == b =====> true
a === b =====> false
---
### 32. Anonymous Functions in JavaScript ?
Answer
####
Anonymous functions in JavaScript, are the functions that do not have any name or identity.
let variableName = function () {
//your code here
}
variableName(); //Can call the anonymous function through this
Use of Anonymous functions :
button.addEventListener('click',
function(event) {
alert('Button is clicked!')
});
setTimeout(function () {
console.log('I will run after 5 seconds!')
}, 5000);
Using Anonymous Functions as Arguments of Other Functions
function greet(wish){
console.log(wish() ,"everyone!");
}
greet(function(){
return "Good Morning";
})
Immediately Invoked Function Execution
(function(text) {
alert(text);
})('Hi all! Welcome to our page.');
for (var i = 1; i <= 5; i++) {
(function (count) {
setTimeout(function() {
console.log(`Counted till ${count} after ${count} seconds`);
}, 1000 * i);
})(i);
}
Output:
"Counted till 1 after 1 second"
"Counted till 2 after 2 seconds"
"Counted till 3 after 3 seconds"
"Counted till 4 after 4 seconds"
"Counted till 5 after 5 seconds"
---
### 33. Difference between Document Object & Window Object ?
Answer
####
the entire browser window is actually window object and the inner part where the content is displayed, all the content can be accessed using the document object. This also means that window is the main container or patterned or global object and document is child of window object operations related to entire browser.
---
### 34. Rest Operator: Delete property from an Object using Rest operator ?
Answer
####
let user = {
name: 'Calvin',
age: 200,
country: 'Spain',
food: 'Pizza'
}
const {age, ...restOfUser} = user;
console.log(restOfUser) // { name: 'Calvin', country: 'Spain', food: 'Pizza' }
console.log(age) // 200
---
### 35. What is Object destructuring?
Answer
####
Object destructuring allows us to create variables from object property names, and the variable will contain the value of the property name - for example:
const data = { a: 1, b: 2, c: 3 };
const { a, b, c } = data;
console.log(a, b, c); // 1, 2, 3
By using const { a, b, c } = data we are declaring 3 new variables (a, b and c).
If a, b and c exist as property names on data, then variables will be created containing the values of the object properties. If the property names do not exist, you’ll get undefined.
Let’s take our earlier example and use the ...rest syntax to see what happens:
const data = { a: 1, b: 2, c: 3 };
const { a, ...rest } = data;
console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }
let arr = [1, 2, 3, 4];
let [a,,c,d] = arr;
console.log(a,c,d); // 1 3 4
let a = 4;
let b = 9;
[a,b] = [b,a];
console.log(a,b); // 9, 4
let arr =[1,2,3,4];
let [a,...b] = arr;
console.log(a); // 1
console.log(b); // (3) [2, 3, 4]
let arr = [1];
let [a,b=0] = arr;
console.log(a,b); // 1 0
---
### 36. Spread Operator : Practical use
Answer
####
const odd = [1,3,5];
const combined = [2,...odd, 4,6];
console.log(combined); // [ 2, 1, 3, 5, 4, 6 ]
1. Push an array inside another array
let rivers = ['Nile', 'Ganges', 'Yangte'];
let moreRivers = ['Danube', 'Amazon'];
rivers.push(...moreRivers); // ['Nile', 'Ganges', 'Yangte', 'Danube', 'Amazon']
2. Concatenate two or more arrays
let numbers = [1, 2];
let moreNumbers = [3, 4];
let allNumbers = [...numbers, ...moreNumbers];
console.log(allNumbers); // [1, 2, 3, 4]
3. Copying an array
let scores = [80, 70, 90];
let copiedScores = [...scores];
console.log(copiedScores); // [80, 70, 90]
---
### 37. Splice() method to delete existing elements, insert new elements, and replace elements in an array
Answer
####
The splice() method is used to add or remove elements of an existing array
```
--------- Add element-----------
let colors = ['red', 'green', 'blue'];
colors.splice(2, 0, 'purple');
console.log(colors); ---------- (4) ["red", "green", "purple", "blue"]
colors.splice(1, 0, 'yellow', 'pink');
console.log(colors); ---------- (6) ["red", "yellow", "pink", "green", "purple", "blue"]
--------- Remove element-----------
let arr = [4, 3, 5, 9];
arr.splice(2, 1);
console.log(arr); ---------- (3) [4, 3, 9]
--------- Replacing elements-----------
let languages = ['C', 'C++', 'Java', 'JavaScript'];
languages.splice(1, 1, 'Python');
console.log(languages); ---------- (4) ["C", "Python", "Java", "JavaScript"]
```
---
### 38. Template Literals
Answer
####
Template literals are literals delimited with backtick ( ` ) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.
```
`string text`
`string text line 1
string text line 2`
`string text ${expression} string text`
tagFunction`string text ${expression} string text`
tag`string text line 1 \n string text line 2`;
```
---
### 39. ES6 template literals vs. concatenated strings
Answer
####
Template literals provide us with an alternative to string concatenation .They also allow us to insert variables in to a string. Template literals were introduced in ECMAScript 2015/ ES6 as a new feature. It provides an easy way to create multi-line strings and perform string interpolation.
Why would I use this new template literal method? I would recommend switching to the new format for a few reasons.
- One of which is that it requires fewer characters. So the extra space that you would need to use the plus before adds extra length to your code, causing it to look more bloated
- It no longer needs to escape single or double quotes. Yes, that’s right. You no longer need to put back slashes in order to close quotation marks.
- it’s much easier to read. With the dollar sign curly bracket syntax you can more clearly see what parts of your strings are using a variable.At a glance, I can quickly see that this is a variable.
- with my code editor, it would have improved syntax highlighting
Let’s us rewrite our example from concatenated string:
```
Console.log("Hello,welcome to" +website.name+"!\"message goes here\" ") ;
```
To template literal:
```
Console.log(`Hello,welcome to ${website.name} !"message goes here"` ) ;
```
---
### 40. Write polyfill of Array.flat with customized nesting
Answer
####
---
### 41. There are two sorted arrays. Merge them in place of the first array
Answer
####
```
arr1 = [1, 2 , 3];
arr2 = [4, 5, 6];
arr1 = arr1.concat(arr2);
arr1 = [...arr1,...arr2];
```
---
### 42. Write a js function that can be invoked like below -
calc().add(10).subtract(5).multiply(20).divide(2).getResult() . In this case, the output should be 50.
Answer
####
---
### 43. prototype chain -
Answer
####
The prototype chain is a mechanism that allows objects to inherit properties and methods from other objects. Every object can have exactly one prototype object. That prototype object can also have a prototype object, and so on, creating a chain of inheritied properties and methods. The end of this chain is called the null prototype.
Every object in JavaScript can be linked to a prototype object which is the mechanism through which inheritance is provided.
You can see the prototype an object is pointing to using the __proto__ property.
```
// Define a human constructor
function Person(name, age) {
this.name = name;
this.age = age;
}
// Add a method for greeting
Person.prototype.greet = function() {
console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
};
// Create a human instance
const person = new Person('John', 30);
// Access the person's name attribute and output "John"
console.log(person.name);
// Access the greet method of person and output "Hi, my name is John and I'm 30"
person.greet()
```
---
### 44. What is the first class function in JavaScript ?
Answer
####
A programming language is said to have First-class functions if functions in that language are treated like other variables. So the functions can be assigned to any other variable or passed as an argument or can be returned by another function. This means that functions are simply a value and are just another type of object.
Usage of First-Class Function
- It can be stored as a value in a variable.
- It can be returned by another function.
- It can be passed into another function as an Argument.
- It can also stored in an array, queue, or stack.
- It can have its own methods and property.
```
const Arithmetics = {
add: (a, b) => {
return `${a} + ${b} = ${a + b}`;
},
subtract: (a, b) => {
return `${a} - ${b} = ${a - b}`
},
multiply: (a, b) => {
return `${a} * ${b} = ${a * b}`
},
division: (a, b) => {
if (b != 0) return `${a} / ${b} = ${a / b}`;
return `Cannot Divide by Zero!!!`;
}
}
console.log(Arithmetics.add(100, 100));
console.log(Arithmetics.subtract(100, 7))
console.log(Arithmetics.multiply(5, 5))
console.log(Arithmetics.division(100, 5));
const Geek = (a, b) => {
return (a + " " + b);
}
console.log(Geek("Akshit", "Saxena"));
```
---
### 45. What is a First Order Function in JavaScript ?
Answer
####
A First Order Function is just a normal regular function that does not take any function as one of its parameters and also it does not return another function as its return value inside its body. It is a simple function that accepts the parameters of different data types either primitive or non-primitive and it may or may not return a value as a result of the calculations performed on the passed parameters. A First Order Function can be declared using any of the methods available in JavaScript.
```
function firstOrderFunc(num1, num2){
console.log(num1*num2);
}
firstOrderFunc(4, 35)
```
---
### 45. What is Higher Order Function in JavaScript ?
Answer
####
A higher-order function is a function that can accept a function as one of its parameters and it can also return a function as its return value or it can do both return as well as accept a function. A higher-order function can also take as well as return other types of values but it either has to take a function as a parameter or return a function as its return value with them. It can be declared using any syntax available in JavaScript to declare functions.
```
function higherOrderFunc(a){
return function(b){
console.log(a*b)
}
}
higherOrderFunc(3)(53);
```
---
### 46. memoization in javascript
Answer
####
Memoization is a technique for speeding up applications by caching the results of expensive function calls and returning them when the same inputs are used again.
Importance of Memoization: When a function is given in input, it performs the necessary computation and saves the result in a cache before returning the value. If the same input is received again in the future, it will not be necessary to repeat the process. It would simply return the cached answer from the memory. This will result in a large reduction in a code’s execution time.
Memoization in Javascript: In JavaScript, the concept of memorization is based mostly on two ideas. They are as follows:
- Closures
- Higher-Order Functions
```
// Memoizer
const memoize = () => {
// Create cache for results
// Empty objects
const results = {};
// Return function which takes
// any number of arguments
return (...args) => {
// Create key for cache
const argsKey = JSON.stringify(args);
// Only execute func if no cached val
// If results object does not have
// anything to argsKey position
if (!results[argsKey]) {
results[argsKey] = func(...args)
}
return results[argsKey];
};
};
// Wrapping memoization function
const multiply = memoize((num1, num2) => {
let total = 0;
for (let i = 0; i < num1; i++) {
for (let j = 0; j < num1; j++) {
// Calculating square
total += 1 *;
}
}
// Multiplying square with num2
return total * num2;
});
console.log(multiply(500, 5000));
```
https://www.geeksforgeeks.org/how-to-write-a-simple-code-of-memoization-function-in-javascript/?ref=asr2
---
### 47. Dynamic object create ?
Answer
####
```
function createObj(obj, field, value) {
if (Object.keys(obj).includes(field)) {
Object.assign(obj, {[field]: value});
} else {
obj[field] = value;
}
return obj;
}
createObj({}, 'one', 'value1')
```
---
### 48. Reduce operator examples
Answer
####
```
const arr =[[1,2], [3,4], [5,6]];
const finalArr = arr.reduce((accumulator, current)=> accumulator.concat(current));
console.log(finalArr); // (6) [1, 2, 3, 4, 5, 6]
Sum of numbers
---------------------------------------------------------------
const numbers = [2, 4, 6, 8];
const result = numbers.reduce((accumulator, current)=> accumulator + current);
console.log(result); // 20
Average of numbers
---------------------------------------------------------------
const numbers = [2, 4, 6, 8];
const result = numbers.reduce((accumulator, current, index, arr)=> {
accumulator+=current;
if(index === arr.length-1) {
return accumulator/arr.length;
}
return accumulator;
});
console.log(result); // 5
Average of numbers with initial value 100
---------------------------------------------------------------
const numbers = [2, 4, 6, 8];
const result = numbers.reduce((accumulator, current, index, arr)=> {
accumulator+=current;
if(index === arr.length-1) {
return accumulator/arr.length;
}
return accumulator;
}, 100);
console.log(result); // 30
```
---
### 49. Arrow vs Normal functions ?
Answer
####
Access arguments
---------------------------------------------------------------------------------------------------------------------------------------------------
In regular functions, you can access all passed arguments using the arguments object, which is an array-like object containing each argument passed to the function.
```
function showArgs() {
console.log(arguments);
}
showArgs(1, 2, 3); // [Arguments] { '0': 1, '1': 2, '2': 3 }
```
Arrow functions do not have their own arguments object. To access arguments in arrow functions, use rest parameters (…args) to collect all arguments into an array.
```
const showArgs = (...args) => {
console.log(args);
};
showArgs(1, 2, 3); // [ 1, 2, 3 ]
```
Duplicate named parameters
---------------------------------------------------------------------------------------------------------------------------------------------------
In regular functions, duplicate named parameters are allowed but not recommended. The last occurrence of the parameter overwrites previous ones, and only its value is used.
```
function example(a, b, a) {
console.log(a, b);
}
example(1, 2, 3); // 3 2
```
Arrow functions do not allow duplicate named parameters, even in non-strict mode, and will throw a syntax error if duplicates are present. Always use unique parameter names in arrow functions.
```
const example = (a, b, a) => {
console.log(a);
};
// SyntaxError
```
Hosting
---------------------------------------------------------------------------------------------------------------------------------------------------
In regular functions, function declarations are hoisted to the top of their scope, allowing them to be called before they’re defined in the code.
```
greet(); // Output: Hello Geeks!
function greet() {
console.log('Hello Geeks!');
}
```
Arrow functions are not hoisted like regular function declarations. They are treated as variables, so they cannot be called before being defined due to the temporal dead zone.
```
greet(); // ReferenceError: Cannot access 'greet' before initialization
const greet = () => {
console.log('Hello!');
};
```
this keyword
---------------------------------------------------------------------------------------------------------------------------------------------------
In regular functions, this refers to the object that calls the function (runtime binding). Its value can vary based on how the function is called (method, event, or global).
```
const obj = {
name: 'Geeks',
greet: function() {
console.log(this.name);
}
};
obj.greet();
```
In arrow functions, this is lexically inherited from the surrounding scope, not the function itself.
```
const obj = {
name: 'Geeks',
greet: () => {
console.log(this.name);
}
};
obj.greet(); // Output: undefined (inherited from outer scope)
```
new keyword
---------------------------------------------------------------------------------------------------------------------------------------------------
Regular functions can be used as constructors with the new keyword, allowing the creation of new object instances. The new keyword sets this to the new object inside the function.
```
function Person(name) {
this.name = name;
}
const p = new Person('Geeks'); // Creates a new Person object
console.log(p.name); // Geeks
```
Arrow functions cannot be used as constructors and do not support the new keyword. Attempting to use new with an arrow function will result in a TypeError.
```
const Person = () => {};
const p = new Person(); // TypeError: Person is not a constructor
```
---
### 50. Passing by Reference vs. Passing by Value ?
Answer
####
Pass by Reference or Call by Reference
---------------------------------------------------------------------------------------------------------------------------------------------------
When a parameter is passed by reference, the caller and the callee use the same variable for the parameter. If the callee modifies the parameter variable, the effect is visible to the caller's variable.
Pass by Reference will work with Non Primitive data types like arrays, objects, functions.
Instead of making a copy, pass-by-reference does exactly what it sounds like; a value stored in memory gets referenced.
```
let a = 5;
let b = a;
console.log(a); // 5
console.log(b); // 5
b = a + 5;
console.log(a); // 5
console.log(b); // 10
```
both variables a & b will work independently.
Pass by Value or Call by Value
---------------------------------------------------------------------------------------------------------------------------------------------------
When a parameter is passed by value, the caller and callee have two independent variables with the same value. If the callee modifies the parameter variable, the effect is not visible to the caller.
Pass by Value will work with Primitive data types like Boolean, char, byte, int, short, long, float, and double.
pass-by-value creates a new space in memory and makes a copy of a value, whereas pass-by-reference does not.
```
let obj1 = { name: 'Piyali'};
let obj2 = obj1;
console.log(obj1); // { name: 'Piyali'}
console.log(obj2); // { name: 'Piyali'}
obj2 = {name: 'Test'};
console.log(obj1); // { name: 'Test'}
console.log(obj2); // { name: 'Test'}
```
Here with let obj2 = obj1, we are giving reference of obj1 to obj2. So, any changes in value of obj2 will change the original value of obj1.
Same thing will happen for array also.
Hindi Tutorial youtube link : https://www.youtube.com/watch?v=8y9c4SumvcQ
---
### 51. Remove Null and Undefined Values from an Object (Practical Coding)
Answer
####
```
let obj = {
a: 'test',
b: null,
c: undefined,
d: 'hi'
};
Object.entries(obj).filter(([key, value]) => value != null)
print in console -------------
(2) [Array(2), Array(2)]
0: (2) ['a', 'test']
1: (2) ['d', 'hi']
Object.fromEntries(Object.entries(obj).filter(([key, value]) => value != null))
print in console -------------
{a: 'test', d: 'hi'}
```
Why have written "value != null"?
Ans. The data type of undefined & null are not same. Data type of undefined is undefined. Data type of null is object. You can check using typeof operator.
console.log(undefined == null) // true
console.log(undefined === null) // false
---
### 52. Convert an Array to an Object
Answer
####
Single Dimention Array into an Object
---------------------------------------------------------------------------------------------------------------------------------------------------
```
Object.assign({}, ['a','b','c']);
{0: 'a', 1: 'b', 2: 'c'}
```
Array of Key-value pairs into an Object
---------------------------------------------------------------------------------------------------------------------------------------------------
```
let a = [['JS', 'JavaScript'], ['GFG', 'GeeksforGeeks']];
let obj = Object.fromEntries(a);
{ JS: 'JavaScript', GFG: 'GeeksforGeeks' }
```
Spread Operator
---------------------------------------------------------------------------------------------------------------------------------------------------
```
const arr = ["Geeks", "for", "Geeks"];
const obj = {...arr};
console.log(obj); // '0': 'Geeks', '1': 'for', '2': 'Geeks' }
```
Using forEach
---------------------------------------------------------------------------------------------------------------------------------------------------
```
const arr = ["Geeks", "for", "Geeks"];
const obj = {};
arr.forEach((value, index) => obj[index] = value);
console.log(obj); // { '0': 'Geeks', '1': 'for', '2': 'Geeks' }
```
Using Reduce
---------------------------------------------------------------------------------------------------------------------------------------------------
```
const a = ['Hello', 'World', 'Welcome', 'To', 'JavaScript'];
const obj = a.reduce((acc, current, index) => {
acc[index] = current;
return acc;
}, {});
console.log(JSON.stringify(obj)); // {"0":"Hello","1":"World","2":"Welcome","3":"To","4":"JavaScript"}
```
---
### 53. Convert Map keys to an array
Answer
####
Using array.from() Method
---------------------------------------------------------------------------------------------------------------------------------------------------
```
let myMap = new Map().set('GFG', 1).set('Geeks', 2);
let array = Array.from(myMap.keys());
console.log(myMap.keys()); // MapIterator {'GFG', 'Geeks'}
console.log(array); // (2) ['GFG', 'Geeks']
```
Using Object.keys() and Object.fromEntries()
---------------------------------------------------------------------------------------------------------------------------------------------------
```
const myMap = new Map([
["JavaScript", 1],
["Python", 2],
["C++", 3]
]);
// Convert Map to Object
let obj = Object.fromEntries(myMap); // {JavaScript: 1, Python: 2, C++: 3}
// Extract keys from Object
let keysArray = Object.keys(obj);
console.log(keysArray); // ['JavaScript', 'Python', 'C++']
```
---
### 54. How to serialize a Map in JavaScript ?
Answer
####
Serialization is the conversion of an object or a data structure to another format that is easily transferrable on the network.
Using Array.from() and JSON.stringify() Method
---------------------------------------------------------------------------------------------------------------------------------------------------
```
const map1 = new Map([
[1, 2],
[2, 3],
[4, 5]
]);
Array.from(map1); // Convert the map into an array using Array.from() method
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) [2, 3]
2: (2) [4, 5]
JSON.stringify(Array.from(map1)) // Use the JSON.stringify() method on this converted array to serialize it.
'[[1,2],[2,3],[4,5]]'
```
Using Object.fromEntries() and JSON.stringify() Method
---------------------------------------------------------------------------------------------------------------------------------------------------
```
const map1 = new Map([
[1, 2],
[2, 3],
[4, 5]
]);
Object.fromEntries(map1); // Convert the map into an object using Object.fromEntries() method
{1: 2, 2: 3, 4: 5}
JSON.stringify(Object.fromEntries(map1)); // Use the JSON.stringify() method on this converted object to serialize it.
'{"1":2,"2":3,"4":5}'
```
---
### 55. Object vs JavaScript Map ?
Answer
####
A Map in JavaScript is a collection of key-value pairs where keys can be any data type. Unlike objects, keys in a Map maintain insertion order. It provides methods to set, get, delete, and iterate over elements efficiently, making it useful for data storage and retrieval tasks.
Insertion Order
---------------------------------------------------------------------------------------------------------------------------------------------------
S6 Maps preserves the insertion order. A Map will keep the order of the inserted keys regardless of their type.
```
const myData = new Map();
myData.set(10427, "Description 10427");
myData.set(10504, "Description 10504");
myData.set(10419, "Description 10419");
console.log(myData); // Map(3) {10427 => 'Description 10427', 10504 => 'Description 10504', 10419 => 'Description 10419'}
```
const obj = {};
Object.assign(obj, {10427: "Description 10427"}); // {10427: 'Description 10427'}
Object.assign(obj, {10504: "Description 10504"}); // {10427: 'Description 10427', 10504: 'Description 10504'}
Object.assign(obj, {10419: "Description 10419"}); // {10419: 'Description 10419', 10427: 'Description 10427', 10504: 'Description 10504'}
Keys
---------------------------------------------------------------------------------------------------------------------------------------------------
A Map 's keys can be any value (including functions, objects, or any primitive). A Map holds key-value pairs where the keys can be any datatype. Map has no restriction over key names.
The keys of an Object must be either a String or a Symbol.
Perforamce by memory heap
---------------------------------------------------------------------------------------------------------------------------------------------------
The V8 engine heap isn't very good at managing arrays of objects. If you have an array of 100,000 objects, loop through each object and delete one parameter in the middle then re-add it, the heap size will spike rather than stay constant.
// Spike the memory heap
arr.forEach(obj => {let temp = obj[0]; delete obj[0]; obj[0] = temp})
The reason the heap will spike is because V8 creates intermediate arrays during the forEach loop over the array. Once the array you're looping over becomes massive (eg. 100,000 elements) the memory spike will be too large to handle and could crash the program.
Iterables like Map and Set aren't handled by the engine this way, and you can use a library like iter-tools to get array-like transformation methods for them.
---
### 56. Can we add Javascript function in JSON?
Answer
####
https://www.geeksforgeeks.org/how-to-store-a-javascript-fnction-in-json/
---
### 57. Ho can add Dynamic key in Object?
Answer
####
```
let tv = 'pCode', num = 10;
let obj = {
[tv]: 1001,
pName: 1000,
['get' + num]() {
console.log(pName);
}
}
console.log(obj) ==============
{pCode: 1001, pName: 1000, get10: ƒ}
get10: ƒ ['get' + num]()
pCode: 1001
pName: 1000
```
---
### 58. What will the output of bellow ?
function show() {
console.log(this);
}
show();
let obj = {
display: function() {
console.log(this);
}
}
obj.display();
let obj = {
display: ()=> {
console.log(this);
}
}
obj.display();
Answer
####
```
function show() {
console.log(this);
}
show(); // Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}
let obj = {
display: function() {
console.log(this);
}
}
obj.display(); // {display: ƒ}
let obj = {
display: ()=> {
console.log(this);
}
}
obj.display(); // Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}
```
---
### 59. What Are Stack and Heap?
Answer
####
Stack: The Stack is used for static memory allocation, primarily for storing primitive types and function calls. It's a simple, last-in, first-out (LIFO) structure, making it very fast to access.
Heap: The Heap is used for dynamic memory allocation, where objects and arrays (non-primitive types) are stored. Unlike the Stack, the Heap is more complex and slower to access, as it allows for flexible memory allocation.
```
---------------------------------------------------------------------------------------------
Example of Stack Memory
---------------------------------------------------------------------------------------------
let myYoutubeName = "ayushyadavz"; // Primitive type stored in the Stack.
let anotherName = myYoutubeName; // A copy of the value is created in the Stack.
anotherName = "amanyadavz"; // Changing the copy does not affect the original.
console.log(myYoutubeName); // Output: ayushyadavz (Original value remains unchanged)
console.log(anotherName); // Output: amanyadavz (Only the copy value is changed)
---------------------------------------------------------------------------------------------
Example of Heap Memory
---------------------------------------------------------------------------------------------
let userOne = { // The reference to this object is stored in the Stack.
email: "user@google.com",
upi: "user@ybl"
}; // The actual object data is stored in the Heap.
let userTwo = userOne; // userTwo references the same object in the Heap.
userTwo.email = "ayush@google.com"; // Modifying userTwo also affects userOne.
console.log(userOne.email); // Output: ayush@google.com
console.log(userTwo.email); // Output: ayush@google.com
```
---
### 60. What's the output of console.log(this) in JavaScript?
Answer
####
```
console.log(this);
------------------------------------------------------------------------------------------------------
Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}
```
---
### 61. Write a program using Promise and Async/Await.
Answer
####
```
async function fetchData() {
const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
const data = await response.json();
console.log(data);
}
fetchData();
------------------------------------------------------------------------------------------------------
{
userId: 1,
id: 1,
title: ....',
body: ....}
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
```
Advantages of Async and Await
------------------------------------------------------------------------------------------------------
Improved Readability: Async and Await allow asynchronous code to be written in a synchronous style, making it easier to read and understand.
Error Handling: Using try/catch blocks with async/await simplifies error handling.
Avoids Callback Hell: Async and Await prevent nested callbacks and complex promise chains, making the code more linear and readable.
Better Debugging: Debugging async/await code is more intuitive since it behaves similarly to synchronous code.
---
### 62. How would you efficiently handle 5000 records from an API call for a dropdown?
Answer
####
### 62. How is Async/Await different from Promises?
Answer
####
In JavaScript, promises and async/await are two different ways to handle asynchronous operations. But they are closely related.
Promise
------------------------------------------------------------------------------------------------------
A promise is an object that eventually leads to an asynchronous operation’s completion or failure. A promise can be in one of three states: pending, fulfilled, or rejected. When the asynchronous operation is completed, the Promise will either be fulfilled with a value or rejected with an error.
Async/Await
------------------------------------------------------------------------------------------------------
Async/await is a syntactic sugar on top of promises. It provides a more concise way to write asynchronous code, making it easier to read and write. With Async/Await, you can write asynchronous code that looks similar to synchronous code, and it uses promises under the hood. In async/await, the async keyword is used to declare an asynchronous function. The await keyword is used to wait for a promise to be resolved before continuing with the execution of the function. The await keyword can only be used inside an async function.
Difference
------------------------------------------------------------------------------------------------------
The only difference is the execution context between promise and async/await.
When a Promise is created and the asynchronous operation is started, the code after the Promise creation continues to execute synchronously. When the Promise is resolved or rejected, the attached callback function is added to the microtask queue. The microtask queue is processed after the current task has been completed but before the next task is processed from the task queue. This means that any code that follows the creation of the Promise will execute before the callback function attached to the Promise is executed.
On the other hand, with Async/Await, the await keyword causes the JavaScript engine to pause the execution of the async function until the Promise is resolved or rejected. While the async function waits for the Promise to resolve, it does not block the call stack, and any other synchronous code can be executed. Once the Promise is resolved, the execution of the async function resumes, and the result of the Promise is returned. If rejected, it throws an error value.
------------------------------------------------------------------------------------------------------
https://medium.com/version-1/difference-between-promise-and-async-await-95e453182f55
---
### 63. Explain Node.js and the Event Loop.
Answer
####
In Node, the Event Loop is a mechanism that handles asynchronous operations. It allows Node to perform non-blocking I/O operations despite the fact that JavaScript is single-threaded. It continuously checks the call stack and message queue, executes tasks from stack processing asynchronous operations.
https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick
---
### 64. How does this behave in Node.js? Is it the same as in the browser?
Answer
####
In Node. js all modules (script files) are executed in their own closure while browsers execute all script files directly within the global scope.
In the browser, running in the global scope, this is always window in your example
```
var obj1;
var obj2;
function x() {
obj1 = this; // window
}
function y() {
obj2 = this; // window
}
x();
y();
console.log(obj1 === obj2); // window === window = true
console.log(obj1 === this); // window === window = true
```
This is not how it works in Node. In Node.js all modules (script files) are executed in their own closure while browsers execute all script files directly within the global scope.
In other words, in just about any file running in Node, this will just be an empty object, as Node wraps the code in an anonymous function that is called immediately, and you'd access the global scope within that context with GLOBAL instead.
However, when calling a function without a specific context in Node.js, it will normally be defaulted to the global object - The same GLOBAL mentioned earlier, as it's execution context.
So outside the functions, this is an empty object, as the code is wrapped in a function by Node, to create it's own execution context for every module (script file), while inside the functions, because they are called with no specified execution context, this is the Node GLOBAL object
In Node.js you'd get
```
var obj1;
var obj2;
function x() {
obj1 = this; // GLOBAL
}
function y() {
obj2 = this; // GLOBAL
}
x();
y();
console.log(obj1 === obj2); // GLOBAL === GLOBAL = true
console.log(obj1 === this); // GLOBAL === {} = false
```
---
### 65. Write code for mul(2)(3)(4) = 24.
Answer
####
```
function mul(x) {
return function(y) {
return function(z) {
return x*y*z;
};
}
}
console.log(mul(2)(3)(5)); // 30
console.log(mul(2)(3)(4)); // 24
```
---
### 66. Solution to 25 JavaScript interview questions.
Answer
####
https://medium.com/@dynamicsa420/solution-to-25-javascript-interview-questions-4162a1f76609
---
### 66. What is Axios ?
Answer
####
Axios is a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and nodejs with the same codebase). On the server-side it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequests.
https://axios-http.com/docs/intro
---
### 67. What is Axios ?
Answer
####
Prototype inheritance in javascript is the linking of prototypes of a parent object to a child object to share and utilize the properties of a parent class using a child class. Prototypes are hidden objects that are used to share the properties and methods of a parent class with child classes.
The syntax used for prototype inheritance has the proto property which is used to access the prototype of the child. The syntax to perform a prototype inheritance is as follows :
```
child.__proto__ = parent;
// Creating a parent object as a prototype
const parent = {
greet: function() {
console.log(`Hello from the parent`);
}
};
// Creating a child object
const child = {
name: 'Child Object'
};
// Performing prototype inheritance
child.__proto__ = parent;
// Accessing the method from the parent prototype
child.greet(); // Outputs: Hello from the parent
```
```
// Creating a prototype object
const personPrototype = {
introduce: function() {
console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
}
};
// Creating a new object that inherits from the personPrototype
const john = Object.create(personPrototype);
john.name = 'John';
john.age = 30;
// Calling the introduce method on the john object
john.introduce();
// Outputs: Hi, my name is John and I am 30 years old.
```
```
// Constructor function for creating Person objects
function Person(name, age) {
this.name = name;
this.age = age;
}
// Creating an instance of the Person object
const person = new Person('John', 30);
// Accessing the constructor property of the prototype
console.log(person.constructor);
// Outputs: ƒ Person(name, age) { this.name = name; this.age = age;}
```
The prototype chain
```
let student = {
id: 1,
};
let tution = {
id: 2,
};
let school = {
id: 3,
};
student.__proto__ = school; //level1 inheritance
student.__proto__.__proto__ = tution; //level2 inheritance
console.log(student.id); //the student object's property
console.log(student.__proto__.id); //school object's property
```
---
### 68. did you know that javascript behaves differently in the browser and in the Nodejs ?
Answer
####
Node.js and Web browsers are two different but interrelated technologies in web development. JavaScript is executed in both the environment, node.js, and browser but for different use cases.
Javascript files loaded in Nodejs are automatically wrapped in anonymous functions.So in Node what you are really running is:
```
(function(/* There are args here, but they aren't important for this answer */){
var x = 10;
var o = { x: 15 };
function f(){
console.log(this.x);
}
f();
f.call(o);
})();
```
The environment of both Node.js and Browser are very different due to their different purpose Some key differences are:
The browser executes JavaScript within the Host Environment, on the client side. Browsers provide a Document Object Model(DOM) which represents the structure of web pages.
Node.js provides a runtime environment that allows JavaScript to run on a server, outside the browser. Also, it does not have a DOM like web browsers.
---
### 69. What is the difference between `==` and `===`?
Answer
####
The “===” operator compares both content and type, whereas “==” compares only content. The == operator will compare for equality after doing any necessary type conversions. The === operator will not do type conversion, so if two values are not the same type === will simply return false .
---
### 70. How do you handle errors in JavaScript?
Answer
####
Error handling in JavaScript plays an important role to make the application stable. Structures such as try-catch blocks, throw statement and finally block are used to deal with unexpected situations and ensure that the application runs correctly.
```
try {
console.log("try block: The code is running...");
} catch (error) {
console.log("Error Caught: " + error);
} finally {
console.log("finally block: Executed in all cases.");
}
```
---
### 71. What is globalThis ?
Answer
####
globalThis aims to consolidate the increasingly fragmented ways of accessing the global object by defining a standard global property. The globalThis proposal is currently at stage 4, which means it’s ready for inclusion in the ES2020 standard. All popular browsers, including Chrome 71+, Firefox 65+, and Safari 12.1+, already support the feature. You can also use it in Node.js 12+.
// browser environment
console.log(globalThis); // => Window {...}
// node.js environment
console.log(globalThis); // => Object [global] {...}
// web worker environment
console.log(globalThis); // => DedicatedWorkerGlobalScope {...}
By using globalThis, your code will work in window and non-window contexts without having to write additional checks or tests. In most environments, globalThis directly refers to the global object of that environment. In browsers, however, a proxy is used internally to take into account iframe and cross-window security. In practice, it doesn’t change the way you write your code, though.
Generally, when you’re not sure in what environment your code will be used, or when you want to make your code executable in different environments, the globalThis property comes in very handy. You’ll have to use a polyfill to implement the feature on older browsers that do not support it, however.
On the other hand, if you’re certain what environment your code is going to be used in, then use one of the existing ways of referencing the environment’s global object and save yourself from the need to include a polyfill for globalThis.
https://blog.logrocket.com/what-is-globalthis-why-use-it/
---
### 72. What is debouncing and throttling in JavaScript?
Answer
####
Execution Frequency: Debouncing postpones the execution until after a period of inactivity, while throttling limits the execution to a fixed number of times over an interval.
Use Cases: Debouncing is ideal for tasks that don’t need to execute repeatedly in quick succession, such as API calls based on user input. Throttling is suited for controlling the execution rate of functions called in response to events like scrolling or resizing.
Debouncing and throttling are powerful techniques for optimizing JavaScript applications, preventing unnecessary code executions, and improving user experience.
Debouncing Usecase :
Consider a search input field that fetches suggestions from a server as the user types. Without debouncing, every keystroke would send a request, potentially leading to hundreds of requests per minute. Debouncing allows us to delay the function call until the user has stopped typing for a predefined time.
```
function debounce(func, delay) {
let debounceTimer;
return function() {
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(context, args), delay);
};
}
// Usage
const fetchSuggestions = debounce(() => {
// Fetch suggestions from the server
}, 250);
```
Throttling Usecase :
An example use case is attaching a listener to the scroll event of a webpage. Since the scroll event can fire dozens of times per second, throttling can be used to limit the number of times your callback function executes, improving performance.
```
function throttle(func, limit) {
let inThrottle;
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => (inThrottle = false), limit);
}
};
}
// Usage
window.addEventListener('scroll', throttle(() => {
// Handle the scroll event
}, 1000));
```
---
### 73. How would you implement a deep clone of an object without using libraries?
Answer
####
Using Spread Operator to Deep Clone
```
let student1 = {
name: "Manish",
company: "Gfg"
}
let student2 = { ...student1 };
student1.name = "Rakesh"
console.log("student 1 name is", student1.name); // student 1 name is Rakesh
console.log("student 2 name is ", student2.name); // student 2 name is Manish
```
Using Object.assign() Method
```
let student1 = {
name: "Manish",
company: "Gfg"
}
let student2 = Object.assign({}, student1);
student1.name = "Rakesh"
console.log("student 1 name is", student1.name); // student 1 name is Rakesh
console.log("student 2 name is ", student2.name); // student 2 name is Manish
```
Using Json.parse() and Json.stringify() Methods
```
let student1 = {
name: "Manish",
company: "Gfg"
}
let student2 = JSON.parse(JSON.stringify(student1))
student1.name = "Rakesh"
console.log("student 1 name is", student1.name); // student 1 name is Rakesh
console.log("student 2 name is ", student2.name); // student 2 name is Manish
```
---
### 74. Event Delegation in JavaScript ?
Answer
####
Event Delegation is basically a pattern to handle events efficiently. Instead of adding an event listener to each and every similar element, we can add an event listener to a parent element and call an event on a particular target using the .target property of the event object.
Let’s see an example with and without event delegation
```
const customUI = document.createElement('ul');
for (var i = 1; i <= 10; i++) {
const newElement = document.createElement('li');
newElement.textContent = "This is line " + i;
newElement.addEventListener('click', () => {
console.log('Responding')
})
customUI.appendChild(newElement);
}
```
The above code will associate the function with every
- element, attaching too many
- elements, and attaching an event listener with a responding function to each paragraph as we create it.
Without Event Delegation
Implementing the same functionalities with an alternate approach. In this approach, we will associate the same function with all event listeners. We are creating too many responding functions (that all actually do the exact same thing). We could extract this function and just reference the function instead of creating too many functions:
```
const customUI = document.createElement('ul');function responding() {
console.log('Responding')
}for (var i = 1; i <= 10; i++) {
const newElement = document.createElement('li');
newElement.textContent = "This is line " + i;
newElement.addEventListener('click', responding)
customUI.appendChild(newElement);
}
```
The functionality of the above code is shown below –Without Event Delegation
In the above approach, we still have too many event listeners pointing to the same function. Now implementing the same functionalities using a single function and single event.
```
const customUI = document.createElement('ul');function responding() {
console.log('Responding')
}for (var i = 1; i <= 10; i++) {
const newElement = document.createElement('li');
newElement.textContent = "This is line " + i;
customUI.appendChild(newElement);
}
customUI.addEventListener('click', responding)
```Now there is a single event listener and a single responding function. In the above-shown method, we have improved the performance, but we have lost access to individual
- elements so to resolve this issue, we will use a technique called event delegation.
https://www.geeksforgeeks.org/event-delegation-in-javascript/
---
### 75. What are the microtask and macrotask within an event loop in JavaScript ?
Answer
####
```
```
---
### 76. Implement a chain calculator
Answer
####
```
const calculator = {
total: 0,
add: function(val){
this.total += val;
return this;
},
subtract: function(val){
this.total -= val;
return this;
},
divide: function(val){
this.total /= val;
return this;
},
multiply: function(val){
this.total *= val;
return this;
}
};
calculator.add(10).subtract(2).divide(2).multiply(5);
console.log(calculator.total); // 20
```
---
### 77. Execute promises in sequence ?
Answer
####
In JavaScript, executing multiple promises sequentially refers to running asynchronous tasks in a specific order, ensuring each task is completed before the next begins. This is essential when tasks depend on the results of previous ones, ensuring correct flow and preventing unexpected behavior.
```
let promise1 = new Promise((resolve, reject) => {
// Resolves immediately with "Hello! "
resolve("Hello! ");
});
let promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
// Resolves after 1 second with "GeeksforGeeks"
resolve("GeeksforGeeks");
}, 1000);
});
// Chain the promises to execute sequentially
promise1.then((result1) => {
// Logs result from promise1
console.log(result1);
// Returns promise2 to chain
return promise2;
}).then((result2) => {
// Logs result from promise2
console.log(result2);
});
```
The for…of loop with async-await in JavaScript allows you to execute promises sequentially. It iterates over an array of promises, awaiting each promise’s resolution before moving to the next, ensuring proper sequential execution of asynchronous tasks.
```
// Promise 1 that resolves immediately
let promise1 = new Promise((resolve, reject) => {
resolve("Hello! ");
});
// Promise 2 that resolves after a 1-second delay
let promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("GeeksforGeeks");
}, 1000);
});
let promiseExecution = async () => {
// Iterates over an array of promises and awaits each one sequentially
for (let promise of [promise1, promise2]) {
try {
// Waits for each promise to resolve
const message = await promise;
console.log(message);
// Logs the resolved value
} catch (error) {
// Catches and logs any errors
console.log(error.message);
}
}
};
promiseExecution();
```
---
### 78. Implement pipe and compose functions ?
Answer
####
The compose() function is used to combine multiple functions into a single function. It takes a series of functions as arguments and returns a new function that, when executed, runs the original functions from right to left. This means the output of the rightmost function is passed as the input to the next function, and so on.
```
const compose = (...fns) => (input) => fns.reduceRight((chain, func) => func(chain), input);
const sum = (...args) => args.flat(1).reduce((x, y) => x + y);
const square = (val) => val*val;
compose(square, sum)([3, 5]); // 64
```
Uses of Compose()
------------------------
When the sequence of transformations starts with the final result in mind.
Common in middleware composition (e.g., Redux).
Useful in functional programming to build complex operations from simple functions.
The pipe() function is similar to compose(), but it combines functions from left to right. This means the output of the leftmost function is passed as the input to the next function, and so on. It’s essentially the same as compose(), but the order of function execution is reversed.
```
const pipe = (...fns) => (input) => fns.reduce((chain, func) => func(chain), input);
const sum = (...args) => args.flat(1).reduce((x, y) => x + y);
const square = (val) => val*val;
pipe(sum, square)([3, 5]); // 64
```
Uses of pipe()
------------------------
When the sequence of transformations starts from the initial input and flows to the final result.
Common in data processing pipelines.
Preferred in scenarios where readability and straightforward function chaining are important.
To make it short, composition and piping are almost the same, the only difference being the execution order; If the functions are executed from left to right, it's a pipe, on the other hand, if the functions are executed from right to left it's called compose.
---
### 79. Create custom array polyfills
Answer
####
A polyfill is code that implements a feature on web browsers that do not support the feature.
Polyfill of forEach() method.
----------------------------------------------------------------------
Array.prototype.myForEach = function(callback){
for(let i=0; i
---
### 80. Flatten a nested array
Answer
####
```
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// expected output: Array [0, 1, 2, 3, 4]
const arr2 = [0, 1, [2, [3, [4, 5]]]];
console.log(arr2.flat());
// expected output: Array [0, 1, 2, Array [3, Array [4, 5]]]
console.log(arr2.flat(2));
// expected output: Array [0, 1, 2, 3, Array [4, 5]]
console.log(arr2.flat(Infinity));
// expected output: Array [0, 1, 2, 3, 4, 5]
```
---
### 81. Build an event emitter
Answer
####
```
```
---
### 82. Create a debouncing function with leading and trailing calls
Answer
####
Debouncing is a technique that is used in programming to reduce the function invocation.
It runs with the assumption that rather than invoking the functions on every action, allows the user to complete their thought process and invoke the function only after a certain buffer between two actions.
For example, if the user is typing something in the search box, rather than making a network request on every word that the user types, we should allow the user to finish typing and only when he stops for X amount of time, the function to make a network request should be invoked.
It is one of the classic frontend interview questions, but because the classic debounce has been common, nowadays its variation is asked during interviews like debounce with immediate flag.
This is another variation of debounce in which we have to use the trailing and leading options.
If trailing is enabled, the debounce will invoke after the delay just like classic implementation. If leading is enabled, it will invoke at the beginning. If both are enabled then it will invoke twice at the beginning and after the delay.
```
const debounce = (fn, delay, option = { leading: true, trailing: true}) => {
let timeout;
let isLeadingInvoked = false;
return function (...args) {
const context = this;
//base condition
if(timeout){
clearTimeout(timeout);
}
// handle leading
if(option.leading && !timeout){
fn.apply(context, args);
isLeadingInvoked = true;
}else{
isLeadingInvoked = false;
}
// handle trailing
timeout = setTimeout(() => {
if(option.trailing && !isLeadingInvoked){
fn.apply(context, args);
}
timeout = null;
}, delay);
}
}
```
```
const onChange = (e) => {
console.log(e.target.value);
}
const debouncedSearch = debounce(onChange, 1000);
const input = document.getElementById("search");
input.addEventListener('keyup', debouncedSearch);
```
---
### 83. Implement MapLimit functionality
Answer
####
https://learnersbucket.com/examples/interview/implement-maplimit-async-function/#:~:text=Implement%20a%20mapLimit%20function%20that,can%20occur%20at%20a%20time.
---
### 84. Create a cancelable promise
Answer
####
Promises once fired, cannot be cancelled. So cancelling the promises in our curr