With call(), an object can use a method belonging to another object.
The apply() method takes arguments as an array while The call() method takes
arguments separately.
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------
Primitives are passed by value (copied), so changes don’t affect the original;
objects are passed by value too,
but the value is a reference — so mutations affect the original.
-----------------------------------------------------------------------------------
---------------------------------------------------------------------------
The rest parameter (...) allows a function to treat an indefinite number of
arguments as an array:
-----------------------------------------------------------------------------------
---------------------------------------------------------------------------
A closure is when a function “remembers” the variables from its surrounding scope,
even after that outer function has finished running.
-----------------------------------------------------------------------------------
------------------------------------------------------------------------
queueMicrotask is always added before .then(),
-----------------------------------------------------------------------------------
----------------------------------------------------------
"Callbacks came first for handling async tasks, but they get messy with nesting and
error handling.
Promises solved that with cleaner syntax and chaining. Then async/await made it
even more readable
by making async code look synchronous. All three can be used, but async/await is
preferred today for clarity."
📊 Comparison Table
Feature Callback Promise async/await
Can handle errors? ✅ Yes ✅ Yes ✅ Yes
Centralized error handling ❌ No ✅ Yes (.catch()) ✅ Yes (try...catch)
Easy to manage ❌ Hard in nesting ✅ Easier ✅ Cleanest
Works across async steps ❌ Manual per step ✅ Yes, chain-wide ✅ Yes, entire
block
-----------------------------------------------------------------------------------
------------------------------------------------------------------------
DOM-"The DOM (Document Object Model) is a tree-like structure created by the
browser when it loads an HTML page.
It represents the structure and content of the web page in memory. Each HTML
element becomes a node in this tree.
JavaScript can be used to interact with the DOM to read, change, add, or remove
elements, which allows developers
to create dynamic and interactive websites."
-----------------------------------------------------------------------------------
----------------------------------------------------------------------
🔍 Key Concept: "Diffing"
Diffing = Comparing the old and new virtual DOM
It helps figure out what exactly changed
React then updates only the affected parts in the real DOM
-----------------------------------------------------------------------------------
---------------------------------------------------------------------------
In bubbling the inner most element's event is handled first and then the outer:
the <p> element's click event is handled first, then the <div> element's click
event.
In capturing the outer most element's event is handled first and then the inner:
the <div> element's click event will be handled first, then the <p> element's click
event.
-----------------------------------------------------------------------------------
------------------------------------------------------------------------
JavaScript has 8 Datatypes
String
Number
Bigint
Boolean
Undefined
Null
Symbol
Object
-----------------------------------------------------------------------------------
----------------------------------------------------------------------
------completeted up to bigint
---js async complete
----js-html-dom
----js-function
-----js-bom
------js query
------js json
------ajax
------object
-------class
-----------------------------------------------------------------------------------
---------------------------------------------------------------------2
//debouncing and throating
Concept Trigger Style Real-world Example
Debounce Wait until the user stops triggering Search input (wait for pause)
Throttle Allow only one trigger per time interval Scroll or resize (limit rate)
Throttling ensures that a function is only executed once per X milliseconds,
no matter how many times it's called during that time.
function debounce(func,delay){
let timeout;
return function(...args){
clearInterval(timeout);
timeout=setTimeout(()=>{
console.log("this is ",this);
func.apply(this,args);
},delay);
}
}
person={
name:"sudhanshu",
message:function(msg){
console.log("hello"+this.name+msg);
}
}
f= debounce(()=>person.message("bro"),500);
f();f();f();
function throttle(func,delay){
last=0;
return function(...args){
current=Date.now();
if(current-last>=delay){
last=current;
func.apply(this,args);
}
}
}
const user = {
name: "Sudhanshu",
speak(msg) {
console.log("Hello from", this.name, msg);
}
};
const throttledSpeak = throttle(user.speak.bind(user), 1000);
document.getElementById("btn").addEventListener("click", () => {
throttledSpeak("clicked");
});
-----------------------------------------------------------------------------------
--------------------------------------------------------------------------
//for of and for in for each loop
The JavaScript for in statement loops through the properties of an Object:
The forEach() method calls a function (a callback function) once for each array
element.func arg-(The item value,The item index,The array itself)
The JavaScript for of statement loops through the values of an iterable object.
//slice and reduce and splice
slice-- Returns a shallow copy of part of an array (or string) without modifying
the original.(array.slice(startIndex, endIndex))
splice() — Modifies the array in place by removing or adding elements.
(array.splice(start, deleteCount, item1, item2, ...)
reduce-🔹 Used to reduce an array to a single value, like a sum or object.(const sum
= nums.reduce((acc, curr) => acc + curr, 0);)
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------
//generator fn
A generator function in JavaScript is a special type of function that can pause
execution (yield)
Defined using function* (note the asterisk).
Uses yield to pause and return a value.
Resumes execution with .next().and later resume from where it left off.
It helps in handling asynchronous data, custom iterators, lazy evaluation, etc.
// Define a generator function
function* myGenerator() {
console.log("Started generator");
yield 1;
console.log("Yielded first value");
yield 2;
console.log("Yielded second value");
yield 3;
console.log("Done");
}
// Create generator object
const gen = myGenerator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }
-----------------------------------------------------------------------------------
-------------------------------------------------------------
//xhr
-- XMLHttpRequest (often called XHR) is the classic way to make API calls before
fetch and axios existed.
-----------------------------------------------------------------------------------
---------------------------------------------------------------------------
//promise.all/any/race
Promise.all Wait for all things (user, data, etc.) ✅
Promise.any Use first success, ignore failures 🔁
Promise.race Use first settled, even if it fails ⚡
-----------------------------------------------------------------------------------
--------------------------------------------------------------------------
//stop propgation and stop immidaite propgation in bubling/capture
e.stopPropagation()- Stops the event from bubbling up or capturing further — but
other handlers on the same element still run.
e.stopImmediatePropagation()-Stops everything:Prevents bubbling AND prevents other
handlers on the same element from running
-----------------------------------------------------------------------------------
------------------------------------------------------------------------
Event delegation is a technique where you attach a single event listener to a
parent element,
and then use it to handle events for all its children — even if the children are
added later.
-----------------------------------------------------------------------------------
-------------------------------------------------------------------------
which property of css donot include in span---propety of block level element like
width height
-----------------------------------------------------------------------------------
----------------------------------------------------------------------------
jQuery was created in 2006 by John Resig. It was designed to handle Browser
Incompatibilities and
to simplify HTML DOM Manipulation, Event Handling, Animations, and Ajax.
For more than 10 years, jQuery has been the most popular JavaScript library in the
world.
However, after JavaScript Version 5 (2009), most of the jQuery utilities can be
solved with a few lines of standard JavaScript:
myElement = $("#id01");
myElement = document.getElementById("id01");
-----------------------------------------------------------------------------------
---------------------------------------------------------------------------------
XML has to be parsed with an XML parser. JSON can be parsed by a standard
JavaScript function.
A common use of JSON is to exchange data to/from a web server.When sending data to
a web server, the data has to be a string.
You can convert any JavaScript datatype into a string with JSON.stringify().
In for...in, x is always a string key of the object, and myObj[x] accesses the
corresponding value.
-----------------------------------------------------------------------------------
--------------------------------------------------------------------------------
AJAX stands for Asynchronous JavaScript And XML (but today, it usually works with
JSON instead of XML).
Read data from a web server - after the page has loaded
Update a web page without reloading the page
Send data to a web server - in the background
AJAX is a technique: loading data in the background (asynchronously), without
reloading the page.
fetch() is a tool that lets you implement AJAX
Before AJAX, any server interaction meant a full page reload — AJAX introduced
background communication and dynamic content updates.
-----------------------------------------------------------------------------------
-------------------------------------------------------------------------------
A web worker is a JavaScript that runs in the background, independently of other
scripts, without affecting the performance of the page.
You can continue to do whatever you want: clicking, selecting things, etc., while
the web worker runs in the background.
-----------------------------------------------------------------------------------
--------------------------------------------------------------------
0,null,undefined,'',-0,0n,NaN---falsy value or give 0 when oassed in boolean
In JS, when comparing objects and booleans (or strings/numbers), JavaScript coerces
both sides into primitives.
Operand Types Coercion Happens Like This
boolean + anything Convert boolean → number → then compare
object + primitive Try converting object to primitive (valueOf, toString)
string + number Convert string → number
-----------------------------------------------------------------------------------
---------------------------------------------------------------------------
spread->Used to expand elements of an array or object.
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
can be used in function call- Math.max(...nums);
rest->Used to collect remaining arguments or properties into an array or object.
Rest in Function Parameters:
Rest in Destructuring:const [first, ...rest] = [10, 20, 30, 40];
-----------------------------------------------------------------------------------
---------------------
react----pagination-button/scroll
-------token--refresh and access token
