Events

addEventListner

Adds a listens to play around with the response of the event and the event itself

removeEventListner

removes the listner

EventBubbling

Inner -> Outer propogation
Use stopPropogation on the event of the element which initialised the event .
The one that initialises the event is also the one that initialises the propogation

setInterval

Takes 2 arguemnts - 1. function 2. ms[milliseconds]
Keeps executing the function after the intervals mentioned

setTimeout

Same as setIntervalbut this only executes once

Callbacks

setTimeout uses callback [ many other functions can also use callbacks]
It just means that a function that is passed as an argument to another function which then invokes the passed function inside itself.....
When you repeatedly call the outside function which calls another outside function it is called callback-hell or pyramid-of-doom

      
function greet(name,callback){
console.log("Hello ",name);
callback();
}
function sayBye(){
console.log("Bye!");
}
greet("Dark Alpha",sayBye); // sayBye is the call back function that I am passing as an argument to greet
      
      

does it happen becuase of hoisting?
wait js doesn't hoist functions?
True and not true !
JS hoists function declaraction like

      
      sayHi();
      function sayHi(){
      console.log("Hi!");
      }
      
      

not function expressions like :

      
sayHi();
let sayHi()= ()=<{
console.log("Hi!");
}
      
      

This happens primarily and descretely becuase -

1. You can pass functions as an argument
2. You can store them in variables
3. You can return them from another function

All these makes function first-class ciitzens in js.
Hoisting helps when you define a callback as a function declaration above the point where it is being used, but it's not the reason callbacks works.
takeaway:

1. callbacks works due to first-class function behavior
2. Hoisting helps with first class function behavior, not expressions
3. callbacks happen regardless of hoisting

Promise

kinda like a function [ my perception might change after making a few projects ]
which could say wether it got fullfilled or rejected! new Promise((resolve,reject)=>{})
You can add resolve or reject values so that you will be notified WITH the value the resolve or reject reason

promise.all([...])

waits for all promises to resolves
fails immediately if any one rejects

promise.allSettled([..])

waits for all promises regardless of resolve/reject.
Returns status + value/reason for each

promise.race([....])

resolves or rejects as soon as first promise settles (whichever comes first )

promise.any([...])

resolves with the first fullfilled promise
ignores reject untill all rejects , then throws aggregateError

promise.resolve([....])

returns a promise already resolved with the given value.

promise.reject([...])

returns a promise already rejected with the given value.

promise.then(func)

when a promise is resolved. - Perform this func

Await

Awaits for a promise - be it resolve or reject
AND you cannot use await in a a function unless it's marked async.

Async

Async functions returns promises - so the returned value can make use of the .then to get its value from the promise functions.
Even if there are no promise functions inside the async function the returned value is treated as a promise fullfilled.
You can also use await for other promises. Which waits for the complete execution of those promises.
Any throw inside a aync is by default considered as a reject so you'd use .catch to get the returned value and not .then

event loop

Ensures smooth handling of js operations without blocks a single thread
It does this by checking if a the call stack and empty .

microtask

This has a queue for function that has immediate execution
Runs immediately after the current call stack is empty and before any macrotask : promise.then,promise.catch(),promise.finally,await,async,mutationObserver,queue.microtask()

macrotask

Runs after microtasks are drained - used for scheduling defered work. setTimeout,setInterval, setImmediate,requestAnimationFrame(),DOMevents,I/O callbacks,fs.readFile()

1. They schedule a call back to be executed later, but no immediately
2. The callback is placed into the macrotask queue [ also known as the task queue ]
3. Once the current code and all microtask are done, it picks up the macrotask and executes the callback.
4. This process repeats for setInterval until you clear it.

GET [READ-ONLY]

Retrieves data - read only

HEAD

Like get but without the body

PUT

Update or replace an entire record in the DB

POST [CREATE]

Submit new data

DELETE

remove data

PATCH

partially updates the data

fetch API

this is the api call that you use to get the response from an endpoint in js has a verbose syntax like:

async function getData() {
  const url = "https://example.org/products.json";
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Response status: ${response.status}`);
    }

    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.error(error.message);
  }
}

OPTIONS

Used to ask the server what methods are allowed on a resource
Commonly used in CORS preflight requests