JavaScript is a strong and flexible programming language, yet its peculiar ideas and actions sometimes confuse engineers. The "this" keyword stands out among them as one of the trickiest yet most important to learn. The object that "this" in JavaScript refers to can vary significantly depending on the context in which it is used. We shall examine every scenario in which "this" is used in this post and try to solve the enigma surrounding its behaviour.

1. "this" in the global context(space)

The global object is referred to when the "this" keyword is used in the global space.

global object is different in different javascript runtime environment like js is differrent on smart bulbs,smart watches, node.js, browser etc. It depends on where you run the js code.

console.log(this); // refers to global object i.e. window in a browser or global in node.js

2."this" inside a function

The behavior of "this" inside a function varies based on strict mode and non-strict mode(i.e it works differently in both mode).

function x() {
    console.log(this);
    // In strict mode:o/p is undefined
    // In non-strict mode:o/p is global object
}
x();

When "use strict" is used at the beginning of the script, "this" acts differently inside functions. "this" inside a function is undefined in strict mode, but it points to the global object in non-strict mode.

3."this" Substitution

In non-strict mode, the global object is used(replaced) in place of "this" if the value is null or undefined.

this keyword value depends on how the function is called.

"use strict";
console.log(this);
  function x() {
        console.log(this);
    }
x();
// o/p: window(object)
//      undefined 

//without using strict-mode
console.log(this);
  function x() {
        console.log(this);
    }
x();
// o/p: window(object)
//     window(object)  
//in non strict mode, "this substitution" takes place and "this" points to globalObject

4."this" in the Method of an Object:

"This" refers to the object itself in the context of its method.

const obj = {
    a: 10,
    x: function () {
        console.log(this); // o/p: {a: 10, x: f()}
        console.log(this.a); // o/p: 10
    }
}
obj.x();

Difference between function and method:

When you make a function as a part of of object , then it is know as method.

when you create a function inside an object, then function x will be a method. So, "x" is a method of object "obj".

5.call, apply & bind Methods

The value of "this" can be explicitly set via the call, apply, and bind methods. Basically, they are used to control the value of "this" inside a function.

call, apply & bind are used to share a method with another object (hence,the "this" keyword reference would also change accordingly).

call and applyBoth methods immediately invoke the function.But, bind method does not invoke immediately.

call () takes arguments separately (fixed number of arguments.),whereas apply() takes arguments as an array.

const student = {
    name: 'siddhesh',
    printName: function () {
        console.log(this.name);
    }
}
student.printName(); // o/p: siddhesh

const student2 = {
    name: 'Karan',
}
student.printName.call(student2); 
// o/p: Karan
//In this case, the call method modifies "this" to refer to student2.

6."this" inside arrow function

Arrow functions do not have their own "this" context. Instead, they inherit "this" from the enclosing lexical context. (lexical context: it depends on where it is present).

In short, they take the value of their lexical context which is enclosed.

const student ={
    name: "siddhesh",
    printname:  function() {
        console.log(this);
    }
}
student.printname();
//o/p: { name: 'siddhesh', printname: [Function: printname] }
 //now, using arrow function
const student ={
    name: "siddhesh",
    printname:()=> {
        console.log(this);
    }
}
student.printname();
//o/p: window(object) as it is lexical scope of "this".
//but, actually is is not present/written in global space. "this" in arrow function behaves differently than regular functions.

7."this" Inside the DOM

"this" in DOM refers to the HTML element itself on which it is being used.

<button onclick="alert(this)">Click Me</button>
//o/p: <!-- [object HTMLButtonElement] Button element -->
//here, "this" will be referred to buttons.
//another example:
<button onclick="alert(this.tagName)">Click Me</button>
//o/p: alert box will be displayed with "Buttton" tag.

Conclusion:

JavaScript's "this" keyword behaves differently depending on the context. Writing efficient JavaScript code requires an understanding of how "this" changes depending on where and how it is used. Whether you use "this" in global space, inside functions, methods or arrow functions etc which will improve your JavaScript significantly.

JavaScript asynchronous programming is an essential ability for recent developers. Promises have made it easier to handle asynchronous tasks and reduced the likelihood of errors. With promises, handling callbacks is simplified, improving the readability and maintainability of your code. Four significant Promise API's are Promise.all, Promise.allSettled , Promise.race and Promise.any will be discussed in this article.This promise API's are used basically to make multiple API calls in parallel way. Gaining a knowledge of them will provide you the ability to manage several asynchronous jobs successfully and efficiently.

1.Promise.all()

Promise.all() provides a single promise after accepting an array or iterable of promises. When every promise in the array resolves, this one resolves as well; if any of the promises reject, it rejects.

consider,there are multiple API calls or promises to be fetched. So, it will handle multiple promises together.It will wait for all of them(API calls) to finish and result is displayed at same time in console in resolve case.

But, in reject case, if any one of the promise is reject, then promise.all() will throw an error and it will not wait for other promise results (that can be success or failure).

Use Case:

Promise.all is used when you need to make multiple API calls at once and wait for each one to finish. For example, retrieving information concurrently from several sources.

Promise.all([p1, p2, p3]) -> Lets assume we are making 3 API call to fetch data. Also assume p1 takes 3 seconds, p2 takes 1 second, p3 takes 2 seconds.

In first scenario let's assume all 3 promises are successful. So Promise.all will take 3secs and will give promise value of result like [val1, val2, val3]. It will wait for all of them to finish then it will collect the results and give array as output.

What if any of the promise gets rejected, for eg: Promise.all([p1, p2, p3]). But this time, p2 get rejected after 1 sec. Thus Promise.all will throw same error as p2 immediately as soon as error happened. It will not wait for other promise to either become success or failure.

// First case

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('P1 Success');
  }, 3000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('P2 Success');
  }, 1000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('P3 Success');
  }, 2000);
});

Promise.all([p1, p2, p3]).then((results) => {
  console.log(results); 
});
// o/p: ['P1 Success', 'P2 Success', 'P3 Success'] -> took 3 secs

// Second case
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('P1 Success');
  }, 3000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('P2 Fail');
  }, 1000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('P3 Success');
  }, 2000);
});

Promise.all([p1, p2, p3])
  .then(results => console.log(results))
  .catch(err => console.error(err)); 
//o/p: throws error after 1 sec i.e. 'P2 Fails'

But, Its ok if one of our promise fails.I want other 9 out of 10 promises to be displayed. In this situation, promise.all() will not work. So, promise.allsettled() is introduced.

2.Promise.AllSettled()

Once all of the input promises have settled, either resolved or refused, Promise.allSettled() gives a promise that resolves. It offers a thorough analysis of every promise's performance.

If one of our promise is failed, then Promise.AllSettled() will wait for all other promises to settled.This Promises API is the safest of all.

Promise.all() -> Very Quick Failure(fail fast)
Promise.AllSettled() -> Promise Will await and deliver final outcomes

Use Case:

when you have to wait for every promise—regardless of whether it was accepted or rejected—to be fulfilled.

Promise.allSettled([p1, p2, p3]) -> Lets assume we are making 3 API call to fetch data. Also assume p1 takes 3 seconds, p2 takes 1 second, p3 takes 2 seconds.

In first scenario let's assume all 3 promises are successful. So Promise.allSettled will take 3secs and will give promise value of result like [val1, val2, val3]. It will wait for all of them to finish then it will collect the results and give array as output.

What if any of the promise gets rejected, for eg: Promise.all([p1, p2, p3]). But this time, p2 get rejected after 1 sec. Thus Promise.allSettled will still wait for all promises to get settled. So After 3 secs, it will be [val1, err, val3]

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('P1 Success');
  }, 3000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('P2 Success');
  }, 1000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('P3 Fail');
  }, 2000);
});

Promise.allSettled([p1, p2, p3])
  .then((results) => console.log(results))
  .catch(err => console.error(err));//we can also do (err.errors) for detailed output.

// Over here, it will wait for all promises to be either settled or rejected and then return,
  /*
    [
      {status: 'fulfilled', value: 'P1 Success'},
      {status: 'fulfilled', value: 'P2 Success'},
      {status: 'rejected', reason: 'P3 Fail'}
    ]
  */

3.Promise.race()

As soon as one of the input promises resolves or rejects, Promise.race() returns a promise that does the same. It truly is a race between the promises.It will not wait for other promises to finish because its a race.

It basically give us value of first settled promise.And if the first promise which should be settled is rejected ,then it will throw an error.

Use Case:

When you require the fastest promise's result, no matter how quickly it happens.

Promise.race([p1, p2, p3]) -> Lets assume we are making 3 API call to fetch data. Also assume p1 takes 3 seconds, p2 takes 1 second, p3 takes 2 seconds. So as soon as first promise will resolve or reject, it will give the output.

So in Happy scenario, Promise.race will give (val2) as output after 1sec as p2 got resolved at the earliest. Whereas if it would have been failed Promise.race would have still given output after 1 sec but this time with error.

//First case
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('P1 Success');
  }, 3000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('P2 Success');
  }, 1000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('P3 Fail');
  }, 2000);
});

Promise.race([p1, p2, p3])
  .then((results) => console.log(results))
  .catch(err => console.error(err));

 // It will return as soon as first promise is resolved or rejected.
 // O/P: "P2 Success"

//Second case
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('P1 Success');
  }, 3000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('P2 Success');
  }, 5000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('P3 Fail');
  }, 2000);
});

Promise.race([p1, p2, p3])
  .then((results) => console.log(results))
  .catch(err => console.error(err));

 //After 2 secs O/P: "P3 Fail"

Insights:
As soon as a promise is fulfilled, the outcome is obtained.

Furthermore, settled can be broadly classified into two categories:

1.reject, failure, rejected

2.resolve, success, fulfilled

4.Promise.any()

A promise that resolves as soon as any of the input promises resolves is returned by Promise.any(). An aggregated error is nothing but array of all error like [err1, err2, err3] is returned if every promise/API call is rejected/failed.

It is similar to promise.race(). But, it will wait for first success/resolved /fulfilled promise. It is a success seeking promise means it will return result only after/whenever it is successful.

Use case:

when you require the first of multiple promises to be fulfilled successfully.

Promise.any([p1, p2, p3]) -> Lets assume we are making 3 API call to fetch data. Also assume p1 takes 3 seconds, p2 takes 1 second, p3 takes 2 seconds. So as soon as first promise will be successful, it will give the output.

If in above situation what if p2 got rejected, nothing will happen as Promise.any seek for success, so the moment first success will happen that will become the result.

// First case
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('P1 Success');
  }, 3000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('P2 Success');
  }, 5000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('P3 Fail');
  }, 2000);
});

Promise.any([p1, p2, p3])
  .then((results) => console.log(results))
  .catch(err => console.error(err));

// It will wait for first settled **success**
// In above, p3 will settled first, but since it is rejected, 
//so it will wait further and at 3rd second it will print "P1 Success"

// second case
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('P1 Fail');
  }, 3000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('P2 Success');
  }, 5000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('P3 Fail');
  }, 2000);
});

Promise.any([p1, p2, p3])
  .then((results) => console.log(results))
  .catch(err => console.error(err));

// o/p: After 5 secs: 'P2 Success'

//Third case
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('P1 Fail');
  }, 3000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('P2 Fail');
  }, 5000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('P3 Fail');
  }, 2000);
});

Promise.any([p1, p2, p3])
  .then((results) => console.log(results))
  .catch(err => {
    console.error(err);
    console.error(err.errors); 
  });
// o/p: ['P1 Fail', 'P2 Fail', 'P3 Fail']
// Since all are rejected, so it will give "aggregate error" as output
// AggregateError: All promises were rejected
// To get AggregateError array you need to write "err.errors"

Conclusion:

Gain more proficiency managing asynchronous processes in JavaScript by learning and utilising these Promise APIs: Promise.all, Promise.allSettled, Promise.race and Promise.any. Every API has a distinct function, such as Promise.all to concurrently process multiple promises, Promise.allSettled to handle all promise states, Promise.race for executing the fastest promise, and Promise.any for managing the first resolved promise.Making use of these will greatly enhance your asynchronous programming abilities.

Learning asynchronous programming is super important in the fast-paced world of JavaScript development today. Understanding the magic of async and await can make developers write code that's not just elegant but also super productive. Join us on a journey to explore these cool concepts and see how they've totally changed the game in JavaScript development today.

Async: What Is It?

Fundamentally, async is a keyword that comes before a function and makes it an async function. This little change gives the function the ability to run asynchronously, which enables non-blocking JavaScript activities. It always return a promise.

//  async function always returns a promise, 
//even if I return a simple string,boolean or number etc from below function, async keyword will wrap it under Promise and then return.
async function getData() {
  return "Namaste JavaScript";
}
const dataPromise = getData();
console.log(dataPromise); // Promise {<fulfilled>: 'Namaste JavaScript'}

//How to extract data from above promise?? One way is using promise .then
dataPromise.then(res => console.log(res)); // Namaste JavaScript

//One more instance of an async function returning a promise: 
const p = new Promise((resolve, reject) => {
  resolve('Promise resolved value!!');
})

async function getData() {
  return p;
}
// In above case, since we are already returning a promise async function would simply return that instead of wrapping with a new Promise.
const dataPromise = getData();
console.log(dataPromise); // Promise {<fulfilled>: 'Promise resolved value!!'}
dataPromise.then(res => console.log(res)); // Promise resolved value!!

What's Await?

As an addition to async, await is a keyword that works inside async functions to make handling promises easier. Through the usage of await, developers can halt code execution until a promise is fulfilled, making asynchronous programming easier to understand and more linear.

How we can use await along with async function?

async and await combo is used to handle promises. await is a keyword that can only be used inside a async function, otherwise it will throw syntax error.

//old method:
const p = new Promise((resolve, reject) => {
  resolve('Promise resolved value!!');
})

function getData() {
  p.then(res => console.log(res));
}
getData(); // Promise resolved value!!

//Till now, we have been using Promise.then/.catch to handle promise.
//Now let's see, how async await can help us and how it is different
//New method:
// The rule is we have to use keyword await in front of promise.
const p = new Promise((resolve, reject) => {
  resolve('Promise resolved value!!');
})
async function handlePromise() {
  const val = await p;
  console.log(val);
}
handlePromise(); // Promise resolved value!!

Why is async-await unique?

To better understand, let's compare the async-await method of promise resolution with an earlier one using an example.then/catch the trend. To accomplish this, we will modify the promise we made.

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise resolved value!!');
  }, 3000);
})

// Let's now compare with some modification:

//Promise.then/.catch way:
function getData() {
  // JS engine will not wait for promise to be resolved
  p.then(res => console.log(res));
  console.log('Hello There!');
}

getData(); // First `Hello There!` would be printed and then after 3 secs 'Promise resolved value!!' will be printed.
// Above happened as Javascript wait for none, so it will register this promise and take this callback function and register separately then js will move on and execute the following console and later once promise is resolved, following console will be printed.

//Problem: Normally one used to get confused that JS will wait for promise to be resolved before executing following lines.

//async-wait way:
async function handlePromise() {
  // JS Engine will waiting for promise to resolve.
  const val = await p;
  console.log('Hello There!');
  console.log(val);
}
handlePromise(); // This time `Hello There!` won't be printed immediately instead after 3 secs `Hello There!` will be printed followed by 'Promise resolved value!!'
//  So basically code was waiting at `await` line to get the promise resolve before moving on to next line.

// Above is the major difference between Promise.then/.catch vs async-await

// Let's brainstorm more around async-await
async function handlePromise() {
  console.log('Hi');
  const val = await p;
  console.log('Hello There!');
  console.log(val);

  const val2 = await p;
  console.log('Hello There! 2');
  console.log(val2);
}
handlePromise(); 
// In above code example, will our program wait for 2 time or will it execute parallely.
//`Hi` printed instantly -> now code will wait for 3 secs -> After 3 secs both promises will be resolved so ('Hello There!' 'Promise resolved value!!' 'Hello There! 2' 'Promise resolved value!!') 
//will get printed immediately.

// Let's create one promise and then resolve two different promise.
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise resolved value by p2!!');
  }, 2000);
})

async function handlePromise() {
  console.log('Hi');
  const val = await p;
  console.log('Hello There!');
  console.log(val);

  const val2 = await p2;
  console.log('Hello There! 2');
  console.log(val2);
}
handlePromise(); 
//`Hi` printed instantly -> now code will wait for 3 secs -> After 3 secs both promises will be resolved so ('Hello There!' 'Promise resolved value!!' 'Hello There! 2' 'Promise resolved value by p2!!') 
//will get printed immediately. So even though `p2` was resolved after 2 secs it had to wait for `p` to get resolved


// Now let's reverse the order execution of promise and observe response.
async function handlePromise() {
  console.log('Hi');
  const val = await p2;
  console.log('Hello There!');
  console.log(val);

  const val2 = await p;
  console.log('Hello There! 2');
  console.log(val2);
}
handlePromise(); 
// `Hi` printed instantly -> now code will wait for 2 secs -> After 2 secs ('Hello There!' 'Promise resolved value by p2!!') 
//will get printed and in the subsequent second i.e. after 3 secs ('Hello There! 2' 'Promise resolved value!!') will get printed

Is the program genuinely waiting or is something else going on in the background?

Time, tide, and JS, as we all know, wait for no one. That is accurate. Although it looks like the JS engine is waiting over here, it is not. It hasn't taken up any space in the call stack; if it had, our page might have frozen. Thus, the JS engine is not idle. What is it doing in the background if it isn't waiting? Let's explore with the code sample below.

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise resolved value by p1!!');
  }, 5000);
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise resolved value by p2!!');
  }, 10000);
})

async function handlePromise() {
  console.log('Hi');
  debugger;
  const val = await p;
  console.log('Hello There!');
  debugger;
  console.log(val);

  const val2 = await p2;
  console.log('Hello There! 2');
  debugger;
  console.log(val2);
}
handlePromise(); 
// When this function is executed, it will go line by line as JS is synchronous single threaded language. Lets observe what is happening under call-stack. Above you can see we have set the break-points.

// call stack flow -> handlePromise() is pushed -> It will log `Hi` to console -> Next it sees we have await where promise is suppose to be resolved -> So will it wait for promise to resolve and block call stack? 
//No -> thus handlePromise() execution get suspended and moved out of call stack -> So when JS sees await keyword it suspend the execution of function till promise is resolved -> So `p` will get resolved 
//after 5 secs so handlePromise() will be pushed to call-stack again after 5 secs. -> But this time it will start executing from where it had left. -> Now it will log 'Hello There!' and 'Promise resolved value!!' -> then it will check whether `p2` is resolved or not -> It will find since `p2` will take 10 secs to resolve 
//so the same above process will repeat -> execution will be suspended until promise is resolved.

//Thus JS is not waiting, call stack is not getting blocked.

// Moreover in above scenario what if p1 would be taking 10 secs and p2 5 secs -> even though p2 got resolved earlier but JS is synchronous single threaded language so it will first wait for p1 to be resolved and then will immediately execute all.

Real-world Async/Await Example

Imagine a situation in which we asynchronously retrieve data from an external API. We can improve readability and maintainability by streamlining the process with async and await.

fetch() always give us promise and fetch() return a response (It is an response object).

const fetch_url = "any api url";

async function fetchData() {
    const response = await fetch(fetch_url);
    const data = await response.json();
    console.log(data);
  };
fetchData();

Error Handling

In async-await, we would use the try-catch block to handle errors instead of the .catch we used with regular Promise. So Basically, there are 2 methods to handle error in JavaScript : .catch method and try-catch method.

const fetch_url = "any api url";

async function handlePromise() {
  try {
    const data = await fetch(fetch_url);
    const res = await data.json();
    console.log(res);
  } catch (err) {
    console.log(err);
  };
};
handlePromise();
// In above whenever any error will occur the execution will move to catch block. One could try above with bad url which will result in error.
// Other way of handling error:
handlePromise().catch(err => console.log(err)); // this will work as handlePromise will return error promise in case of failure.

Promise versus Async/await :

Which one should you use?

• async/await is nothing more than syntactical sugar.

• In the background, async-await only promises things. Thus, both are the same

• async-await is just a new programming style.

• A few of Promise's shortcomings, such Promise Chaining, are fixed with async-await.

• Additionally, async-await improves readability.

• So in a manner, using async-await is always advised.

Conclusion:

To sum up, any JavaScript developer who wants to fully utilise asynchronous programming must understand async and await. Developers can achieve new heights of efficiency and elegance in their code by grasping their complexities and making the most of their potential.

Asynchronous operations are common in the dynamic field of JavaScript development. Efficiently handling these asynchronous operations is essential to guaranteeing seamless and responsive online applications. Promises are a potent weapon in the JavaScript toolbox for managing asynchronous processes. Promises offer a methodical approach to handling asynchronous operations and their results, whether they are successful or unsuccessful. We'll explore the foundations of making promises, chaining them for smooth operation, and gracefully resolving mistakes in this post. Let's set out to become experts in JavaScript promise construction, chaining, and error management.

Recognizing the Creation of Promises

It's critical to understand the producer-consumer connection when working with promises. A promise object is created by the producer, and the consumer manages whether the promise is eventually fulfilled or not.

Making a Promise

We use the built-in Promise constructor in JavaScript to create a promise. We may handle success and failure scenarios with this constructor, which takes a callback function with resolve and reject parameters.

const cart = ["pen", "bottle", "book"];

const promise = createorder(cart);

promise.then(function (orderid) {
    console.log(orderid);
    // proceedtopayment(orderid);
});   
//here, now if we invoke/call the promise with new keyword and passing the functions 
// with parameters (resolve and reject) and eventually returning it...this is a perfectly valid promise.
function createorder(cart) {
    const pr = new Promise(function (resolve, reject) {
// Logic to validate and process the cart...
        if (!validateorder()) {
            const err = new Error("data not found");
            reject(err);
        }
        const orderid = "12345"; // orderid will be called from database...
        if (orderid) {
//here, we can also use settimeout to delay the output(RESOLVE SECTION)
            resolve(orderid);
        }
    });
    return pr;
}
function validateorder() {
    return true;
}
// o/p: 12345

Enhancing Asynchronous Operations with Promise Chaining

A more efficient method for managing several asynchronous task sequentially is made possible by promise chaining. The resolved value from the previous promise is passed to each .then block, allowing data or actions to flow smoothly.

Promise Chaining :

Promise chaining improves the readability and maintainability of code by using the output of one promise as the input for the next operation.

createOrder(cart)
  .then(function (orderId) {
    // Process the order and return data for chaining
    return proceedToPayment(orderId);
  })
  .then(function (paymentInfo) {
    // Handle payment information
    console.log(paymentInfo);
  })
  .catch(function (err) {
    // Catch any errors during promise execution
    console.log(err);
  })

Managing Errors Truly

A crucial component of promise-based workflows is error handling. We can ensure graceful error management by using .catch to capture any rejections that happen during promise execution.

.catch Error Handling

We may centralise error handling by using the.catch block, which offers a fallback for any promise chain rejections that go unhandled.

createOrder(cart)
  .then(function (orderId) {
    // Process the order and return data for chaining
    return proceedToPayment(orderId);
  })
  .catch(function (err) {
    // Handle errors gracefully
    console.log(err);
  });
// we cannot call resolve twice(i.e promises are resolved once only).

Few key points to understand the topic more efficiently are:

1. The new Promise() constructor method can be used to generate a Promise.
2. A callback function is an argument passed to this constructor function.
3. "Resolve" and "reject" are the two arguments passed to the callback function. JS provides the keywords resolve and reject.
4. Our only option is to resolve or reject a promise. There is nothing more that can be done.
5. You can also use new Error('error message') to produce an error.
6. Another option is to attach a failure callback method, or .catch(), to handle any errors that may arise while the promise chain is being executed.

7. Only .then() errors that are present above it are handled by .catch. Should there be a .then() function behind it, catch will not address any errors related to it, and that .then will always be run.
8. In certain cases, it can be helpful if we wish to identify errors for a certain chain link.
9. Depending on the requirements, we can have numerous catches, with a general catch coming in the end.
10. Never forget to use the promise chain to return a value for the next .then.

Conclusion

Developing reliable and effective JavaScript apps requires a solid understanding of promise formation, chaining, and error management. Developers can improve code stability and speed asynchronous operations by using these concepts and best practices.

Read my previous blog part 19 to get better understanding of promises, before this blog....

Asynchronous operations are vital for creating responsive and effective applications when using JavaScript programming. Dealing with asynchronous code is necessary whether handling user interactions, I/O-bound processes, or retrieving data from an external API. But callback functions were previously a major part of controlling asynchronous operations, which resulted in complicated and difficult-to-maintain code structures.
Promises were proposed as a simpler, more manageable solution to asynchronous operation management in order to overcome these issues. A standardised interface for expressing the eventual success or failure of an asynchronous activity is offered by promises. They make it easier to organise code and handle errors by enabling developers to attach callbacks to handle the outcomes of asynchronous actions.

Before Promises: The Callback function

Let's first review how callbacks were previously used to manage asynchronous actions before delving into Promises. Take into consideration the following hypothetical situation at an online store:

const cart = ['shoes', 'pants', 'kurta'];

// Callback approach
createOrder(cart, function () {
  proceedToPayment(orderId);
});
// here, we are passing the function to createOrder Api(or function).And,we are blindly trusting the Api.

The createOrder function in this callback method runs asynchronously and calls the supplied callback function when it's finished. This method creates layered and difficult-to-maintain code structures because it suffers from inversion of control, where the callback function's execution is dependent on the asynchronous operation.

After introducing Promises:

Callback problems led to the development of Promises as a fix. Promises offer a more organised and controllable approach to working with asynchronous code by representing the eventual success or failure of an asynchronous operation. Let's use Promises to restructure the previous example:

const cart = ['shoes', 'pants', 'kurta'];

const promiseRef = createOrder(cart);// this promiseRef has access to `then`

// {data: undefined}
// Initially it will be undefined so below code won't trigger
// After some time, when execution has finished and promiseRef has the data then automatically the below line will get triggered.
promiseRef.then(function () {
  proceedToPayment(orderId);
});
//here, we attached the function to createOrder Api and we can blindly trust promise.

The createOrder function in this rewritten code instantly returns a Promise object, which stands for the operation's future completion. Using the .then function, we attach a callback that will be triggered after the order creation is finished, which is the fulfilment of the promise.

Advantages of Making Promises

Compared to the typical callback method, promises provide the following advantages:

1. Cleaner Code: Promises provide a more linear and legible code structure, which makes asynchronous code easier for developers to understand and maintain. This helps prevent callback hell.

2. Inversion of Control: Promises help to improve code organisation and maintainability by reading the code more synchronously while maintaining the control flow.

3. Error Handling: By using the catch method, promises incorporate built-in error handling techniques that enable centralised error management for asynchronous processes.

4. Promise Chaining: By enabling the sequential chaining of several asynchronous processes, promises help to minimise nesting and enhance the readability of code.

What is Promise??

-> Promise object is a placeholder which will be filled latter with a value from asynchronous operation.

-> Promise is a container for future value.

-> A Promise is an object representing the eventual completion or failure of an asynchronous operation.

• Promise Objects are immutable (Upon the fulfilment of the promise, we will have data that we can pass on without fear of data tampering or mutating means promises, once resolved are immutable; thus building up immense trust).

• Promise can be resolved only once, either by success or failure.

• Promise has 2 main things:

  ->State of Promise(PromiseState): It tells us in what state promise is. There are three states in Promise which are

1. pending: initial state, neither fulfilled nor rejected.

2. fulfilled: meaning that the operation was completed successfully.

3. rejected: meaning that the operation failed.

As soon as promise is fulfilled/rejected => It updates the empty object which is assigned undefined in pending state.

->Result of Promise(PromiseResult): It will store the data whatever it returns.

Use of Promises in the Real World

Promises are frequently used in conjunction with native browser APIs like fetch, which returns a Promise that represents the response to the HTTP request. They are not simply restricted to asynchronous operations.

As a reference, consider this example:

//We will be calling public github api to fetch data i.e https://api.github.com/users/siddheshshende
const GitHubapi = "https://api.github.com/users/siddheshshende";
const user = fetch(GitHubapi);
// User will be considered as promise.
console.log(user); 
//o/p: Promise {<Pending>}

Fetch(): Fetch() is basically an API given by browsers to us to make external calls.

Now,we can attach callback to above response/promise by using .then only.

//And so, this is how Promise is used by .then method.
//It guarantees that it could be resolved only once, either it could be `success` or `failure`
const GitHubapi = "https://api.github.com/users/siddheshshende";
const user = fetch(GitHubapi);

user.then(function (data) {
  console.log(data);
});
// Using .then(), we can control when we want to call/invoke the cb(callback) function.

Promises are used to solve the problems of callbacks like inversion of control and callback hell (Pyramid of doom).

1. .then solves one issue of callback i.e. Inversion of Control.

2. Promise chaining solves another issue of callback i.e callback hell.

// Callback Hell Example
createOrder(cart, function (orderId) {
  proceedToPayment(orderId, function (paymentInf) {
    showOrderSummary(paymentInf, function (balance) {
      updateWalletBalance(balance);
    });
  });
});
// here,above code is expanding horizontally instead of vertically and this is called pyramid of doom.
//So, Promise fixes this issue too using `Promise Chaining`
// Example Below is of Promise Chaining.
createOrder(cart)
  .then(function (orderId) {
    proceedToPayment(orderId);
  })
  .then(function (paymentInf) {
    showOrderSummary(paymentInf);
  })
  .then(function (balance) {
    updateWalletBalance(balance);
  });

// ⚠️ Common PitFall/mistake many developers make is
// they forget to return promise in Promise Chaining
// The idea is promise/data returned from one .then become data for next .then
// So,
createOrder(cart)
  .then(function (orderId) {
    return proceedToPayment(orderId);
  })
  .then(function (paymentInf) {
    return showOrderSummary(paymentInf);
  })
  .then(function (balance) {
    return updateWalletBalance(balance);
  });
// when we don't return the promise in promise chain, then at that time, we can lose
// some data. Thus, it is recommended to return promise.

// trying to explain the example and show different ways to write Promise.
// here, in the below line, createorder Api was returning us a promise.(promise is a variable in this case)
const promise = createOrder(cart);
// And then, we were attaching a callback function to createorder Api returned promise.
promise.then(function (orderId) {
  proceedToPayment(orderId);
});

//another way to write same code   
createOrder(cart).then(function (orderId) {
    proceedToPayment(orderId);
  });

//another way to write same code is by arrow function.
createOrder(cart)
  .then((orderId) => proceedToPayment(orderId));

Conclusion

JavaScript asynchronous programming has been transformed with promises, which provide a more organised and controllable substitute for conventional callback-based methods. Promises improve code readability, maintainability, and error handling by offering a standardised interface for managing asynchronous processes. Since promises are the basis of many asynchronous patterns and frameworks in the JavaScript ecosystem, understanding them is crucial for current JavaScript developers. Promises make handling asynchronous code easier to understand and less prone to mistakes, enabling programmers to create reliable and effective applications. Thus, utilise Promises in your JavaScript applications to fully utilise asynchronous programming!

In the world of JavaScript programming, callback functions are essential, especially when managing asynchronous operations. They are essential tools that enable the execution of code smoothly and efficiently by carrying out activities without stopping the program as a whole.
We'll examine the dual nature of callback functions in this article, looking at both their advantages and disadvantages. We'll go into details of callback functions and their significance in asynchronous code, as well as how they affect contemporary JavaScript development. We'll also discuss about Callback Hell and Inversion of Control.

Callback Functions: An Overview of the Good and the Bad

The Good Part of Callback Functions

In JavaScript, callback functions are crucial when working with asynchronous programming. They ensure seamless and effective performance by enabling the completion of tasks without waiting for the completion of the preceding one.

JavaScript is a synchronous, single-threaded language. However, callbacks allow us to accomplish async things in JavaScript.It is used with closures and often passed as an argument in functional programming.

callback functions are functions that are included as arguments to other functions and then performed when a specified event occurs or an asynchronous operation is completed. In short, a function passed inside another function as an argument is called as callback function.

How we can create a callback function ??

\=> however, we will first wrap certain statement inside a function and then, we will passed it onto setTimeout or any other function. Now, job of setTimeout will be to execute the function which is passed after some time(interval).

consider the example which is mentioned below to understand it properly.

Here, we are using the callback method of setTimeout in order to delay the execution.

console.log('you');
setTimeout(function () {
  console.log('wealthy');
}, 5000);
console.log('are');
/* o/p: 
you
are
wealthy (it will get printed after 5 sec)*/

The Bad Part of Callback Functions

Callback functions are useful, but they have drawbacks of their own. There are two main problems that come up frequently:

1. Callback Hell:
The code can easily become complicated and challenging to manage when working with nested callback methods, and code grows horizontally instead of vertically, resulting in what is sometimes referred to as "Callback Hell" or the "Pyramid of Doom."

When we have a huge codebase and many apis and have dependency on each other, then we fall into callback hell. Then, the code becomes tough to maintain and read.

//E-commerce website example 
const products =[" shoes", "airpods", "headphones"];

Api.createorder( cart, function(){
    api.paymentprocess(function(){
        api.ordersummary(function(){
            api.checkout()
        })
    })
})
/*
See the pyramid shape and all the }) at the end repeating? This is affectionately known as callback hell.

The cause of callback hell is when people try to write JavaScript in a way where execution happens visually from top to bottom. 
Lots of people make this mistake! In other languages like C, Ruby or Python there is the expectation that whatever happens on line 1 will finish before the code on line 2 starts running and so on down the file. 
As you will learn, JavaScript is different.
*/

2. Inversion of Control:

Because callback functions depend on parent functions to correctly execute them, developers may lose control over the flow of the code as a result of using callback functions. This reliance may result in unexpected mistakes and maintenance issues.

In short, We give authority to the function that calls our callback function; possibly it will never be invoked, or our function may be called twice due to something that is present in their function. Inversion of control is like that you lose the control of code,when we are using callback.

api.createOrder(cart, function () {
  api.proceedToPayment();
});
//here, proceedToPayment function is dependent on createOrder function.
//So,we don't know proceedToPayment function will get invoked or not.

How to Avoid callback hell ??

Developers can use more manageable and cleaner code structures by using alternative tactics like async/await syntax, modularization, or promises to avoid slipping into the hole of Callback Hell.

Conclusion

Although callback functions are necessary for JavaScript asynchronous programming, they have certain drawbacks. It is essential for developers to comprehend callback functions' advantages and disadvantages in order to design effective and manageable code.

Research Further
Visit callbackhell.com to learn more about asynchronous programming and callback functions.

When it comes to developing in JavaScript, knowing higher order functions is like having a magic wand. The three most powerful ones are Map, Filter, and Reduce, which give programmers the most flexibility and efficiency when working with arrays. These functions are more than just iteration; they allow for the elegant and precise alteration, selection, and consolidation of data. Come along on an exploration of the complex inner workings of Map, Filter, and Reduce as we reveal their transformational powers and reveal their secrets.

1.Map Function:

Transformation of Arrays Meticulously
One of the most important JavaScript methods for manipulating arrays is the map() function. It applies a given function to each element iteratively, coordinating the creation of a new array.

for each loop and map() are almost same. But, the difference is map() creates new array and for each loop doesn't create.

examples:

const arr = [5, 1, 3, 2, 6];

// Example 1: Doubling the Array Elements
function double(x) {
  return x * 2;
}
const doubleArr = arr.map(double);
console.log(doubleArr); //o/p: [10, 2, 6, 4, 12]

//Example 2: Tripling the Array Elements
function triple(x) {
  return x * 3;
}
const tripleArr = arr.map(triple);
console.log(tripleArr); // o/p:[15, 3, 9, 6, 18]

//Example 3: Converting array elements to binary
const arr = [5, 1, 3, 2, 6];
// Transformation logic:
function binary(x) {
    return x.toString(2);
}
const binaryArr = arr.map(binary);

// The above code can be rewritten as :
const binaryArr = arr.map(function binary(x) {
    return x.toString(2);
}
//Here,to convert number into string or number array into binary array, we use .toString() method with a radix parameter that must be ranging between 2 and 36.
// OR -> Arrow function
const binaryArr = arr.map((x) => x.toString(2));
// o/p: ["101", "1", "11", "10", "110"]

In simple terms, the map function maps every value and modifies it according to the specified criteria.

2.Filter function:

Carefully Picking Array Elements

The filter() method makes array filtering easy by creating a new array with elements that satisfy certain requirements.Only values that evaluate to true are stored in an array created by the filter function.

const array = [5, 1, 3, 2, 6];
// filtering odd values
function isOdd(x) {
  return x % 2;
}
const oddArr = array.filter(isOdd); // o/p:[5,1,3]

// Other way of writing the above code using arrow function:
const oddArr = arr.filter((x) => x % 2);//o/p: [5,1,3]

//Now,filtering even values
const evenArr = arr.filter((x) => x % 2 === 0);
console.log(evenArr);//o/p: [2,6]

3.Reduce Function:

Combining Arrays to Get a Single value

The reduce() method is a fundamental tool that combines array values into a single output and provides a great deal of processing flexibility. It iterates over each element of array.

const array = [5, 1, 3, 2, 6];
// Calculate sum of elements of array - by Non functional programming way
function findSum(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum = sum + arr[i];
  }
  return sum;
}
console.log(findSum(array)); // o/p:17

// now, by reduce function way
const output= arr.reduce(function (acc, curr) {
  acc = acc + curr;
  return accumulator;
}, 0); 
//In above example sum was initialized with 0, so over here accumulator also needs to be initialized. 
//so,the second argument to reduce function represent the initialization value.
//for iteration, value needed to be passed in accumulator is 0(i.e it will start iteration from 0th index)
//If value is not passed, then index will start from 1.
console.log(output); //o/p: 17

There are 2 parameters in reduce function :

1. current(curr):

   current represent the current value of array. In the above case, curr refers to arr[i].

2. accumulator(acc):

   It accumulates the callback return value or result. acc is just like a label. In the above case, acc refers to sum.

    // Another example
    // find max inside array: Non functional programming way:
    const array = [5, 1, 3, 2, 6];
    function findMax(arr) {
        let max = 0;
        for(let i = 0; i < arr.length; i++ {
            if (arr[i] > max) {
                max = arr[i]
            }
        }
        return max;
    }
    console.log(findMax(array)); //o/p: 6
   
    // using reduce
    const output = arr.reduce((acc, current) => {
        if (current > acc ) {
            acc = current;
        }
        return acc;
    }, 0);
    console.log(output); // o/p:6
   
    // acc is just a label which represent the accumulated value till now,
    // so we can also label it as max in this case
    const output = arr.reduce((max, current) => {
        if (current > max) {
            max= current;
        }
        return max;
    }, 0);
    console.log(output); //o/p: 6
   

Tricky Map question for Practice:

Acquiring Expertise in Advanced Approaches

The map function opens up complex functionalities and crosses traditional barriers to allow for complex data transformations.

const users = [
    { firstName: "Alok", lastName: "Raj", age: 23 },
    { firstName: "Ashish", lastName: "Kumar", age: 29 },
    { firstName: "Ankit", lastName: "Roy", age: 29 },
    { firstName: "Pranav", lastName: "Mukherjee", age: 50 },
];
// Get array of full name : ["Alok Raj", "Ashish Kumar", ...]
const fullNameArr = users.map((user) => user.firstName + " " + user.lastName);
console.log(fullNameArr); // o/p: ["Alok Raj", "Ashish Kumar", ...]

-------------------------------------------------------------------------------

// Get the count/report of how many unique people with unique age are there
// like: {29 : 2, 75 : 1, 50 : 1}
// We should use reduce, why? we want to deduce some information from the array. Basically we want to get a single object as output
const report = users.reduce((acc, curr) => {
    if(acc[curr.age]) {
        acc[curr.age] = ++ acc[curr.age] ;
    } else {
        acc[curr.age] = 1;
    }

    return acc;  //to every time return update object
}, {})
console.log(report) // o/p: {29 : 2, 75 : 1, 50 : 1}

Function Chaining:

Smooth Integration for Increased Productivity

JavaScript's function chaining feature enables programmers to create solutions that promote readability and efficiency in code.

Example:

// First name of all people whose age is less than 30
const users = [
  { firstName: 'siddhesh', lastName: 'Raj', age: 23 },
  { firstName: 'joy', lastName: 'Kumar', age: 29 },
  { firstName: 'pari', lastName: 'Roy', age: 29 },
  { firstName: 'Pankaj', lastName: 'Mukherjee', age: 50 },
];

// Function chaining
const output = users
  .filter((user) => user.age < 30)
  .map((user) => user.firstName);
console.log(output); //o/p: ["siddhesh", "joy", "pari"]

// Now,Implementing the same logic using reduce() function.
const outputReduce = users.reduce((acc, curr) => {
  if (curr.age < 30) {
    acc.push(curr.firstName);
  }
  return acc;
}, []);
console.log(outputReduce); //o/p: ["siddhesh", "joy", "pari"]

conclusion:

JavaScript's Map, Filter, and Reduce methods provide effective array manipulation. Reduce shrinks values, Filter chooses based on criteria, and Map transforms elements. Function chaining, when used with these functions, simplifies the code and improves its readability and scalability. Gaining proficiency with these tools enables developers to take on challenging projects with ease and guarantees beautiful and effective JavaScript programming.

Functional programming stands out as a shining example of efficiency and elegance in the ever-changing field of software development. The fundamental idea behind higher-order functions is to provide programmers with an extensive toolkit to write clear, modular code. Stay with us, as we explore the world of higher-order functions and how they may transform modern development approaches.

What's a Higher Order Function, Exactly?

Higher-order functions are an essential component of functional programming; they are not just theoretical ideas. However, what sets a higher-order function apart from what it resembles precisely?

Higher-order functions are essentially regular functions with an additional feature: they can return functions as results or accept other functions as arguments.

This adaptability gives programmers a strong tool for composition and abstraction, enabling flexible and reusable programmes.

1. Higher-order functions are basically functions which takes/accepts other functions as arguments and/or returns a function as a result.

2. The function which is passed into Higher-order function is called as callback function, which is called latter in program.

3. And all this is possible only due to First class citizens, functions are first class citizens in js.

To give an example, think about this one:

function greet() {
  console.log('Hi');
}
function caller(func) {
  func();
}
caller(greet); // Outputs: Hi

This sample shows how caller is a higher-order function, can be used by passing in greet as an argument and using it within its body. The fact that greet is called a callback function in turn illustrates how dynamic higher-order functions are.

Handling Higher-Order Function Problems

Let's attempt to understand the proper way to approach a solution during an interview. I have to find the area, circumference, and diameter using an array of radius values and store the results in an array.

const radius = [3,6,5,2,];
//code to calculate area of a circle.
const calculatearea = function(radius){
    const output =[];
    for (let i = 0; i <radius.length; i++)  {
output.push(Math.PI* radius[i] * radius[i]);
    }
    return output;
}
console.log(calculatearea(radius));
//code to calculate circumference of a circle.
const calculatecircumference = function(radius){
    const output =[];
    for (let i = 0; i <radius.length; i++)  {
output.push( 2 * Math.PI* radius[i]);
    }
    return output;
}
console.log(calculatecircumference(radius));
//code to calculate diameter of a circle.
const calculatediameter = function(radius){
    const output=[];
    for (let i = 0; i <radius.length; i++)  {
output.push( 2 * radius[i]);
    }
    return output;
}
console.log(calculatediameter(radius));
//output: 
//[28.274333882308138,113.09733552923255, 78.53981633974483,12.566370614359172]
//[18.84955592153876,37.69911184307752,31.41592653589793,12.566370614359172]
//[ 6, 12, 10, 4 ]

This solution behaves flawlessly. But what if our specifications also included the need to calculate anything else? If we kept going in the same direction, we would have redundant code.
However, this is where the problem lies: repetition conflicts with the DRY (Don't Repeat Yourself) Principle.

we have to make our code more modular and less repetitive. So, we need to abstract our code/logic due to which we don't require to write the whole code or copy the whole code/function again and again.
So, Let's evaluate a more effective and efficient alternatives,now:

const radius = [3,6,5,2,];

const area = function (radius){
    return Math.PI * radius * radius;
}
const circumference = function (radius){
    return 2 * Math.PI * radius;
}
const diameter = function (radius){
    return 2 * radius;
}

const calculate = function(radius, logic ){
    const output=[];
    for (let i = 0; i <radius.length; i++)  {
output.push(logic(radius[i]));
    }
    return output;
}
console.log(calculate(radius, area));
console.log(calculate(radius, circumference));
console.log(calculate(radius, diameter));
//output will be same as mentioned in above code.

Calculate occurs as a Higher-Order Function in this case. CalculateArea , CalculateCircumference and calculatediameter are some separate functions that we might pass in order to reuse the same logic for different calculations.

Making the Most of Functional Programming's Power :

Furthermore, this method effectively captures the principles of functional programming. We promote modularity and maintainability in our program's code by abstracting logic into distinct functions.

Expanding the map function :

Let's continue with our functional approach by turning our calculate function into a polyfill for the native map function:

Let's try using the above calculate function changed to a map function. Thus,

Array.prototype.calculate = function(logic) {
    const output = [];
    for (let i = 0; i < this.length; i++) {
        output.push(logic(this[i]));
    }
    return output;
}
console.log(radius.calculate(area))
console.log(radius.map(area))// another way
//calculate will be available for all arrays in code. 
//prototype: when we put something on prototype, it appears on all arrays. 
//Here,calculate is nothing but polyfill of map function.
//console.log(radiusArr.map(area)) == console.log(calculate(radiusArr, area));

Polyfills is used to fill the gap between older browers and modern features in js.

polyfills are a piece of code that provides functionality which is not not support by some browers.Popular polyfills exist for features like promises, fetch API , object.assign() etc.....

conclusion:

Finally, the key to maximising the potential of functional programming is to become proficient with higher-order functions. We may unleash a world of efficiency, scalability, and elegance in our code by adopting these ideas.

JavaScript is a fundamental component in the large field of web development, enabling dynamic and interactive experiences on the internet. The setTimeout() method, which is valued for its capacity to run code asynchronously, is essential to its operation. But beyond the surface simplicity of it all is a hidden problem: trust issues with timing accuracy.

The complexities of JavaScript's asynchronous actions get increasingly complex, and developers must grasp the fundamental workings of setTimeout(). In this article, we attempt to solve the puzzles connected to its behaviour and clarify why this so-called dependable function doesn't always perform up to mark.

Come along as we explore the inner workings of JavaScript concurrency, examining the nuances of setTimeout() and revealing practical solutions to address its trust issues.

The lack of clarity of SetTimeout():

The root of the difficulty is the confusion around the execution timing of the callback function passed to setTimeout(). Consider this code snippet:

console.log('Start');
setTimeout(function cb() {
  console.log('Callback');
}, 5000);
console.log('End');

In this case, one may anticipate the callback code to execute exactly after 5 seconds. However, reality sometimes deviates from this notion.

figuring out what's Happening in code:

1. Initialization: When setTimeout() is called, JavaScript starts a timer for the specified duration.

2. Continuation: Meanwhile, the main thread of execution continues without waiting for the timer to expire.

3. Execution Flow: Code execution proceeds, and some extra tasks are completed, such as printing "Start" and "End".

4. Callback Queuing: While the main thread is still active, the timer quietly counts down in the background.

5. Concurrency Model: JavaScript's execution model is single-threaded, which means it can only handle one task at a time.

6. Delayed execution:Despite the timeout, the callback function waits for its turn in the callback queue until the call stack is cleared.

consequences :

1. Timing Discrepancy: Because setTimeout() is asynchronous, the callback may run with a delay longer than the provided duration.

2. Dependence on the Call Stack: Until the call stack is cleared, the callback stays in limbo(confusion), potentially leading to delays.

3. Concurrency Issues: The JavaScript event loop meticulously supervises task execution, but it cannot overcome the fundamental limits of a single-threaded system.

The core of JavaScript's concurrency model

JavaScript prioritizes non-blocking activities to ensure responsiveness and efficiency. This requires extreme caution when using asynchronous operations such as setTimeout().

JavaScript was not designed for concurrency,as js is single threaded and synchronous.But, with the help of js Event Loop, it can perform server-side and client-side concurrency.

concurrency model tells us how exactly js handles multiple tasks happening at same time.

Practical views:

• Avoid blocking: Use non-blocking paradigms to avoid stopping the main thread, resulting in smooth application performance.

• Optimise responsiveness: Use asynchronous actions wisely to establish a balance between functionality and user experience.

In the following example, we are blocking the main thread.Though, first rule of JavaScript is to not block the main thread (because JS is a single threaded language with only one callstack).

we are simulating blocking kind of environment (by suppose million lines of code) by using while loop to create it.

New Date() is a constructor function that returns a specified or current date and time.

getTime() is a method which is used to get timestamp in milliseconds of 'date' object.

Using the Power of setTimeout():

While setTimeout() remains a useful tool in JavaScript programming, understanding it's oddities is critical for effective use. Understanding the complexities of timing disparities allows developers to use this function with precision and planning.

Fine-Tuning Execution

Strategic Delay: Carefully setting timeouts allows you to prioritise vital tasks while deferring less urgent ones.

Mitigating Risks: Anticipate timing variances and create code to elegantly handle potential delays.

What if timeout = 0sec?

When setTimeout()'s timeout option is set to 0 seconds, it may appear natural to anticipate the callback function to be executed immediately. However, JavaScript behaves differently as setTimeout() is registered, though it is zero.

console.log('Start');
setTimeout(function cb() {
  console.log('Callback');
}, 0);
console.log('End');
// o/p: Start End callback

This use of setTimeout() with a timeout of 0 seconds can help to prioritise crucial tasks while delaying less important ones slightly. Developers can use this technique deliberately to optimise the execution flow of their JavaScript apps, improving overall performance and responsiveness.

conclusion

While setTimeout() may have trust issues with timing precision, understanding how it works enables developers to traverse JavaScript's concurrent world effectively. Programmers can maximise the benefits of asynchronous programming by adopting an adaptable and anticipation attitude.

In the ever-changing world of web development, understanding the complexities of Javascript (JS) and its engines is essential. Today, we'll look at the Javascript Runtime Environment (JRE), which is at the heart of JS execution, as well as Google's extraordinary V8 architecture, which powers everything from smart watches to web browsers. Join us as we deconstruct the JS engine's key components, including its parsing, compilation, and execution processes, and learn about the powerful V8 architecture. Let us begin on a mission to discover the inner workings of the code that governs the digital universe.

JS Engine: The Heart of Javascript Runtime Environment (JRE)

Javascript (JS) is already widespread, powering devices ranging from smartwatches to robots to web browsers, thanks to its Javascript Runtime Environment (JRE). The JRE functions as a comprehensive container, containing everything required to run Javascript code.

Figuring out JRE Components: The Core Element (JS Engine)

The JS Engine, often known as the environment's heart, is located at the centre of JRE. It includes critical components like as APIs for interacting with the external environment, event loops, callback queues, microtask queues, and more.

ECMAScript: Controlling JavaScript Rules

JS is governed by ECMAScript and follows a set of standards that are obeyed by all JS engines, including Chakra (Edge), Spidermonkey (Firefox), and the focus of our talk, Google's V8 in Chrome.

Understanding the JavaScript Engine

JS Engine is not a physical engine, but rather software written in low-level languages such as C++. It converts high-level JavaScript code into low-level machine code in three steps:

1. parsing

2. compilation

3. execution.

• Parsing: Breaking down the code. During parsing, the code is broken down into tokens. For example, in the sentence "let a = 7," the words "let," "a," "=," and "7" are tokens. A syntax parser also turns the code into an abstract syntax tree (AST), which is similar to a JSON structure.

You can use the AST Explorer tool to see how code written by you gets parsed into an Abstract Syntax Tree(AST).

• JS uses Just-in-Time (JIT) compilation, which combines interpreter and compiler functionality. The AST passes to the interpreter, which converts high-level code to bytecode, while the compiler optimises the code at runtime. JavaScript, a JIT-compiled language, provides the best of both worlds.

• Execution: memory and call stack dynamics Execution consists of two important components: Memory Heap (storage for all memory) and Call Stack. A garbage collector implements the Mark and Sweep method to perform memory cleanup.

Knowing Google's V8 Architecture.

Google's V8 stands out for its Interpreter (Ignition), Compiler (Turbo Fan), and Garbage Collector (Orinoco). This architecture promotes V8 as a powerful JavaScript engine that can be used on a variety of platforms.

Companies are embracing JS engines.

Diverse firms choose different JS engines, each attempting to perfect its implementation. Google's V8, with its unique components, remains a key participant in this competitive landscape.

The Basics: Call Stack and JavaScript Engine.

Time, tide, and JS(JavaScript) do not wait for anyone. The Call Stack, a key component of the JS Engine, runs any execution context that enters it. But what about the other superpowers the browser has?

Web APIs: Bringing Call Stack to Superpowers

The browser provides a variety of superpowers, like local storage, timers, geolocation access, fetch and more. Web APIs can help bridge the gap between the call stack and these capabilities.

Understanding web APIs

Web APIs, which are not inbuilt in JavaScript, enable the call stack to exploit browser superpowers. Examples include setTimeout(), DOM APIs, get(), and localStorage. These functions are accessed via the global object "window".

console.log("Start");
setTimeout(function cb() {
  console.log("Timer");
}, 5000);
console.log("End");
// Output: Start, End, Timer (after 5 seconds)

The Event Loop Is Introduced

How can we ensure that callbacks are executed on time now that we have Web APIs in place? Enter the Event Loop, a gatekeeper that monitors the Callback Queue for pending jobs and moves them to the call stack.

// Accessing superpowers through the global object(window)
window.setTimeout(function cbT() {
  console.log("Callback Timeout");
}, 5000);

window.fetch("https://api.netflix.com").then(function cbF() {
  console.log("Callback Netflix");
});

Demonstrating the Event Loop

Let us deconstruct a code excerpt to see the Event Loop in action. Every step, from creating the Global Execution Context to executing callbacks, is critical to understanding JavaScript's asynchronous behaviour.

console.log("Start");
document.getElementById("btn").addEventListener("click", function cb() {
  console.log("Callback");
});
console.log("End");

Callback Queue and Its Importance

Why does the callback queue exist? Consider this scenario: a user clicks a button many times. The Event Loop guarantees that all callbacks from those clicks are executed efficiently, avoiding potential delays.

Microtask Queue: Priority System

Not all tasks are created equally. The Microtask Queue, which has a higher priority than the Callback Queue, handles callback functions from Promises and Mutation Observers quickly. Understanding this priority scheme is critical for efficient code execution.

Fetch Behaviour and Microtask Priority

Analyse the behaviour of fetch together with the Microtask Queue. Asynchronous processes, such as waiting for data from external services, show the complex interaction between the Callback Queue and the Microtask Queue.

console.log("Start");
setTimeout(function cbT() {
  console.log("CB Timeout");
}, 5000);
fetch("https://api.netflix.com").then(function cbF() {
  console.log("CB Netflix");
}); // take 2 seconds to bring response
// millions lines of code
console.log("End");

Observing Event Loop, Callback Queue, and Microtask Queue [GiF]:

A mesmerising GIF depicts the complicated dance of the Event Loop, Callback Queue, and Microtask Queue. Gain a better knowledge of how these components interact naturally.

Conclusion: Knowing Asynchronous JavaScript.

It is critical for developers to understand the complications of Callback and Microtask Queues, as well as the Event Loop. This post attempted to clarify these ideas and lay a solid foundation for understanding JavaScript's asynchronous ecosystem.

In the fast-paced world of web development, understanding the complexities of JavaScript is essential for creating cutting-edge and responsive applications. This blog post will look into the symbiotic relationship between two essential JavaScript concepts: callback functions and event listeners. As we delve deeper into these notions, we will discover the transformational powers they provide to developers, enabling a seamless merger of synchronous and asynchronous activities. Join us on this adventure as we explore the potential of callback functions and the efficiency of event listeners, opening up new possibilities in the world of web programming.

Callback Functions: Exploring Asynchronous Possibilities

Functions are more than just lines of code in JavaScript; they are treated as first-class citizens. Consider this: taking a function A and handing it to another function B, where A becomes a callback function. This seemingly simple act allows function B to call function A, opening the door to a world of asynchronous possibilities within a synchronous environment.

setTimeout(function () {
  console.log("Timer");
}, 1000);

The first argument is a callback function, while the second is a timer. Callbacks allow JavaScript, which is essentially synchronous and single-threaded, to ignore its nature and perform asynchronous activities.

setTimeout(function () {
  console.log("timer");
}, 5000);

function x(y) {
  console.log("x");
  y();
}

x(function y() {
  console.log("y");
});
// o/p: x y timer

x and y are the first functions to appear on the call stack. After execution, they clear the stack. The anonymous function then appears in the stack 5 seconds later, due to setTimeout.

Understanding the consequences is critical; any operation that blocks the call stack is referred to as blocking the main thread. For example, if x() takes 30 seconds, JavaScript must wait for it to complete because it only has one call stack and one main thread. Always use async for time-consuming operations like setTimeout.

Understanding Callbacks: Another Example

Let's look at another example to further understand the callback concept:

function printStr(str, cb) {
    setTimeout(() => {
        console.log(str);
        cb();
    }, Math.floor(Math.random() * 100) + 1)
}

function printAll() {
    printStr("A", () => {
        printStr("B", () => {
            printStr("C", () => {})
        })
    })
}

printAll(); 
// o/p: A B C // in order

Using the Power of Event Listeners

Implementing a Basic Event Listener.

Moving beyond callbacks, let's look at Event Listeners. Consider building a button in HTML and assigning an event to it.

<!-- index.html -->
<button id="clickMe">Click Me!</button>

In your JavaScript file:

// in index.js
document.getElementById("clickMe").addEventListener("click", function xyz(){
      console.log("Button clicked");
});

Taking it Up a Peak: Increase Counter Button

To improve user involvement, let's build an increment counter button:

let count = 0;
document.getElementById("clickMe").addEventListener("click", function xyz(){ 
    console.log("Button clicked", ++count);
});

Using Closures for Data Abstraction,now.

Closures are a cleaner way to abstract data.

function attachEventList() {
    let count = 0;
    document.getElementById("clickMe")
     .addEventListener("click", function xyz(){ 
     console.log("Button clicked", ++count);
    });
}
attachEventList();

Event Listener Demo: Efficient Resource Management.

Event listeners, while effective, might be resource-intensive owing to closures. Even if the call stack is empty, the EventListener may not free the memory allocated to count. To optimize, event listeners should be removed when they are no longer required, avoiding excessive memory usage.

Garbage Collection and removeEventListeners is performed.

onClick, onHover, onScroll etc all in a page can slow it down heavily.

Conclusion: Understanding the System of Callbacks and Event Listeners

Finally, knowing the interaction of callback functions and event listeners not only unlocks JavaScript's full capabilities, but also assures efficient resource management. Mastering these concepts allows developers to create flawless and responsive online apps, which is a huge step forward in the pursuit of web development excellence.

JavaScript, the language that gives life to the web, is a domain where functions reign supreme. These functions, known as the "heartbeat" of JavaScript, significantly impact code dynamics. In this adventure across the code cosmos, let us discover the enchantment hidden inside First Class Functions and Anonymous Functions.

Understanding Functional Statements:

Function statements serve as the core building blocks of JavaScript. Consider the following example.

function a() {
  console.log("Hello");
}
a(); // Hello

a() is a function statement that produces the intended output when invoked.

Understanding Function Expressions:

Function expressions involve applying a function to a variable while treating functions as values.

var b = function() {
  console.log("Hello");
}
b();

In this case, b() is a function expression that provides flexibility and serves as a value.

Addressing the Hoisting Dilemma

The notion of Hoisting helps you understand the difference between function statements and expressions. Consider this specific example

a(); // "Hello A"
b(); // TypeError
function a() {
  console.log("Hello A");
}
var b = function() {
  console.log("Hello B");
}
// Why? During memory creation phase a is created in memory and function assigned to a. 
//But b is created like a variable (b:undefined) and until code reaches the function()  part, it is still undefined. So it cannot be called.

Hoisting treats function statements uniquely than expressions, which affects their accessibility.

Understanding Function Declarations :

Function declarations are an alternate name for function statements, which expands your coding vocabulary.

Enigma of Anonymous Functions:

A function without name is anonymous function. They don't have their identity and they are used in place where functions are used as values.

function () {

}
// this is going to throw Syntax Error - Function Statement requires function name.

An anonymous function without code returns an error due to a lack of identity. They find benefit when functions are used as values, as in function expressions.

Named Function Expressions: Balancing Identity.

Same as Function Expression but function has a name instead of being anonymous.

var b = function xyz() {
  console.log('b called');
};
b(); // "b called"
xyz(); // Throws ReferenceError:xyz is not defined.
// xyz function is not created in global scope. So it can't be called.

Named functions, on the other hand, have a limited scope, which limits their global accessibility.

Learning Parameters and Arguments

Understanding the distinction between parameters and arguments is crucial.

 function info(name, age){ // labels/identifiers are like parameters
    console.log ("Hi "+ name + ",you are " + age +" years old now.");
}
info("Siddhesh", 20);// arguments are values passed inside function call
// output: Hi Siddhesh,you are 20 years old now.

Here, name and age are parameters and Siddhesh and 20 are arguments, which represent values in a function call.

Understanding first class functions or First Class Citizens:

Functions can be passed as arguments or returned from a function. The ability to utilise functions as values is known as first-class function. It is a programming idea that is also accessible in a few other languages.

var b = function (param1) {
  console.log(param1); 
};
b(function () {
});// output: f() {}

// Other way of doing the same thing.But, it is named.
var b = function (param1) {
  console.log(param1);
};
function xyz() {}
b(xyz); // output: f xyz() {} 


// again doing the same thing. we can return a function from a function:
var b = function (param1) {
  return function xyz() {
};
};
console.log(b()); //we log the entire fun within b. output: f xyz() {}

Conclusion: Improving Your JavaScript Understanding

In the complex world of JavaScript, understanding every aspect of functions, from statements to expressions, and embracing the power of First Class Functions is critical. These notions not only improve code readability, but they also pave the way for new development approaches.

In the fast-paced world of JavaScript, knowing the idea of closures is similar to discovering a hidden treasure vault of programming skill. Closures, an essential component of JavaScript's lexical scope environment, are the key to efficient code structuring and sophisticated functionality.

Learning Lexical Scopes and Closures in JavaScript.

JavaScript's lexical scope environment opens the way for a unique approach for variable access within functions. When a function seeks a variable, it searches its local memory. If the variable cannot be found, the function searches the lexical parent's memory. This complex procedure produces closures, as shown in the code sample below.

function x() {
    var a = 7;
    function y() {
        console.log(a);
    }
    return y;
}

var z = x();
console.log(z);  // The value of z is the entire code of function y.

This code not only returns the function y, but also encapsulates the whole closure, including function y and its lexical scope, in the variable z. As a result, when z is used elsewhere in the code, it keeps the memory of var a within x().

Studying Closure with Another Example.

To further understand the notion, consider the following example:

function z() {
    var b = 900;
    function x() {
        var a = 7;
        function y() {
            console.log(a, b);
        }
        y();
    }
    x();
}

z();  
// Outputs: 
7 
900

In simple terms, a closure is a function that has access to its outside function scope even after the function has completed. This inherent characteristic enables closures to retrieve and access variables and argument references from their outer function even after the function has returned.

Advantages of Closures:

• Module Design Pattern.

• Currying.

• Memorization.

• Data Hiding and Encapsulation.

• setTimeouts, etc.

Disadvantages of closures:

• excessive memory consumption.

• Possible issues include memory leaks and browser freezing.

  

JavaScript's dynamic capabilities keep developers on their toes. Two key aspects demand our attention as we work to understand the complexities of JavaScript: Block Scope and Shadowing. Understanding these ideas is essential for not only producing better code, but also reaching JavaScript's full potential. So, let's dig deep into the world of Block Scope and Shadowing to improve our coding abilities.

Understanding the Basics: What is a Block in JavaScript?

In JavaScript, a block, also known as a compound statement, is a powerful tool for grouping statements together. These statements are enclosed in curly braces {...}.

{
    var a = 10;
    let b = 20;
    const c = 30;
    // Let and const are hoisted in Block scope,
    // While var is hoisted in Global scope.
}

Exploring Block Scope and Accessibility.

{
    var a = 10;
    let b = 20;
    const c = 30;
}
console.log(a); // 10
console.log(b); // Uncaught ReferenceError: b is not defined

Learning the Reason behind It

Variables b and c in the BLOCK SCOPE field are initialised as undefined due to hoisting, and they exist in a separate memory area known as a block. Meanwhile, variable an is stored in the global scope. This basic difference means that let and const are BLOCK SCOPED, meaning they are only available within the block in which they are defined, but var is global and accessible elsewhere.

Figuring out the Secret: What is Shadowing???

var a = 100;
{
    var a = 10; // Same name as global var
    let b = 20;
    const c = 30;
    console.log(a); // 10
    console.log(b); // 20
    console.log(c); // 30 
}
console.log(a); // 10, modifying the value of the global "a"

When using var, if another variable with the same name exists outside the block, the variable inside the block takes place of the external one. This problem does not occur with let or const.

Understanding the Behavior of Let and Const.

let b = 100;
{
    var a = 10;
    let b = 20;
    const c = 30;
    console.log(b); // 20
}
console.log(b); // 100, separate spaces for both b's (Block: 20, Script: 100)

Understanding Function's Block Scope.

const c = 100;
function x() {
    const c = 10;
    console.log(c); // 10
}
x();
console.log(c); // 100

Take precautions of Illegal Shadowing.

let a = 20;
{
    var a = 20;
}
// Uncaught SyntaxError: Identifier 'a' has already been declared

Remember that it is not OK to use shadow let with var, but the converse is true. In addition, let can shadow another let, whereas var cannot.

Understanding Block Scope and Shadowing is critical in JavaScript, where correctness is everything. Understanding these notions enables developers to design strong, error-free programs.

Stay Tuned!! Happy Learning!!

Developers frequently face issues due to JavaScript's dynamic and adaptable nature. Some of the complexities include the distinctions between let and const declarations, as well as the Temporal Dead Zone (TDZ). In this guide, we'll look at the intricacies, like hoisting mechanisms, TDZ, and typical problems. Let's go on our journey to improve our JavaScript skills.

Understanding Hoisting in Declarations.

Understanding the differences between let, const and var is critical in the ever-changing JavaScript ecosystem. Let's go into the minute details of hoisting, with a special emphasis on let and const.

Hoisting basic concepts:

console.log(a); // ReferenceError: Cannot access 'a' before initialization
console.log(b); // prints undefined as expected
let a = 10;
var b = 15;
console.log(a); // 10
console.log(window.a); // undefined
console.log(window.b); // 15

Despite appearances, let is hoisted; however, understanding its behaviour needs going into the initialization process. During the hoisting stage, both a and b are initially set to undefined. However, key difference emerges: var b is in the GLOBAL storage space, whereas let an is in a separate memory object called script.

Temporal Dead Zone Exposed

The Temporal Dead Zone (TDZ) occurs between hoisting and initialising a let variable. Any line preceding "let a = 10" denotes the TDZ of variable 'a'.

console.log(window.a); // undefined
console.log(window.b); // 15

Because 'a' is not globally accessible, attempting to access it in window or this context returns undefined, much like accessing an undeclared variable like 'window.x'

Syntax and Type Errors

let a = 10;
let a = 100;  // SyntaxError: Duplicate declaration

A SyntaxError is raised when let variable is attempted to be redeclared inside of the same scope. This also applies to combining declarations of the same name i.e let and var.

Constant(Const): The Strict Guardian.

const b;
b = 10; // SyntaxError: Missing initializer in const declaration

Unlike let, const requires initialization during declaration. Attempting to assign a value later to a const variable results in a TypeError.

const b = 100;
b = 1000; // TypeError: Assignment to constant variable

Types of JavaScript Errors:

JavaScript errors come in three flavours: syntax, reference, and type.

Understanding these errors is critical for creating reliable programming.

Guidelines for Declarations:

In your coding journey, consider the following practices.

1. Use const wherever possible to ensure immutability.

2. If not, use let over var for better scope.

3. Declare and initialise all variables with let at the top to reduce the Temporal Dead Zone window.

Conclusion:

Finally, understanding the aspects of let and const declarations, as well as the Temporal Dead Zone, helps you write cleaner and more error-resistant JavaScript code.

JavaScript, the driving force behind dynamic web pages, contains an interesting interplay between scope, the scope chain, and the lexical environment. Understanding these notions is critical for mastering the language and writing efficient, error-free code. In this investigation, we will unravel the mysteries of the Scope Chain, Scope, and Lexical Environment, figuring out the complexities that regulate variable access and execution context.

Understanding the Basics: Scope and Lexical Environment.

In the world of Javascript, scope is tightly tied to the Lexical Environment. Let's look at some examples to shed light on this link.

Case 1: Accessing the Global Scope.

function a() {
  console.log(b); // 10
  // Instead of printing undefined, it prints 10. This function can access the variable b outside its scope.
}
var b = 10;
a();

Case 2: Nesting and Global Scope Access.

function a() {
  c();
  function c() {
    console.log(b); // 10
  }
}
var b = 10;
a();

Case 3: Local Priority Over Global

function a() {
  c();
  function c() {
    var b = 100;
    console.log(b); // 100
  }
}
var b = 10;
a();

Case 4: Global vs. Local Scopes

function a() {
  var b = 10;
  c();
  function c() {
    console.log(b); // 10
  }
}
a();
console.log(b); // Error, Not Defined

Understanding the output:

In Case 1, the function 'a' has access to the variable 'b' from the global scope. Case 2 demonstrates that the global scope variable can be accessed from within nested functions. Moving on to Case 3, a local variable takes precedence over a global one, yielding a value of 100. Case 4 shows that a function can access a global variable, but the global execution context cannot access any local variables.

Understanding the Execution Context

To summarize the points in terms of execution context, look at the call stack:

[GEC, a(), c()].

Let us allocate memory portions to each execution context in the call stack.

• c(): [lexical environment pointer pointing to a()]

• a(): [b:10, c:{}, [lexical environment pointer pointing to GEC]]

• GEC: [a:{}, [lexical environment pointer pointing to null]]

simplifying the Lexical Environment:

The lexical environment is a combination of local memory and the lexical environment of the parent. It follows a hierarchical structure, progressing from one parent to the next, establishing the scope chain or Lexical Environment chain.

function a() {
  function c() {
    // logic here
  }
  c(); // 'c' is lexically inside 'a'
} // 'a' is lexically inside the global execution

The accessibility of variables, functions, and objects is determined by their physical position in the source code, also known as lexical or static scope. It's a hierarchical structure, with the inner encircled by the outer's lexical scope.

TLDR: Understanding Lexical Scope

In simple terms, an inner function can access variables in outer functions, no matter how deeply nested they are. In all other cases, a function cannot access variables outside of its scope.

As developers, we frequently find ourselves navigating the complexities of JavaScript, where even little errors can lead to bewilderment. In this digital dance, the first act begins with memory allocation, which is the process by which JavaScript reserves space for variables and functions. Within this unknown environment, two major players emerge: Undefined and Not Defined.

In this exploration, we'll delve into the complexities of these concepts, revealing the details that describes JavaScript's memory landscape. From Undefined's placeholder nature to Not Defined's unclear absence, each phrase is critical to the code execution script.

Memory Allocation: The Beginning of the Code Execution.

JavaScript, the language of dynamic possibilities, does not jump right into code execution. Before any line of code is displayed, a background procedure known as memory allocation takes place. It's similar to laying out the stage for a major performance, with each variable and function allocated the placeholder "Undefined."

Undefined: A placeholder in the Memory Area.

The anticipation preceding revelation is undefined in terms of memory allocation. It is the state in which memory is allocated for a variable but no value is assigned to it. It's the beginning of a variable's journey, stating, "I'm here, but I'm waiting."

But what happens if a variable does not appear during the memory allocation phase? This is where Not Defined comes into the forefront.

Not Defined: The Puzzle Beyond Memory.

Not Defined is more than just a synonym for Undefined; it describes a situation in which an object or variable is not declared or found during memory allocation. If you try to access this mysterious entity, you will be greeted with the harsh message Uncaught Reference Error.

console.log(a); // Uncaught ReferenceError: a is not defined

Here, the variable 'a' isn't simply undefined; it's completely missing from the memory landscape.

Decoding the Differences Undefined vs. Empty: An Important Difference

It is critical to distinguish between undefined and empty. Undefined is not simply a void; it is a keyword with its own reserved memory area. It acts as a placeholder until a variable accepts a specific value.

Examples of Undefined:

// Example 1
var a; // Memory is allocated for 'a', but no value is assigned yet
console.log(a); // Output: undefined

// Example 2
var x;
console.log(x); // Output: undefined

// Example 3
console.log(y); // Output: ReferenceError: y is not defined

JavaScript is loosely typed language.

JavaScript, a flexible language, embraces loose typing. Variables are not restricted to specific data types. Declare 'var a = 5,' then translate it into a boolean or string. It's a playground for flexibility.

conclusion...

Understanding the complexity of undefined vs. not defined in JavaScript is like reading the language's mental state. Memory allocation sets the scene, and these concepts play important roles in the developing drama of code execution. Accept the undefined as a placeholder, and take note of the absence indicated by not defined. JavaScript, with its flexibly typed syntax, thrives on this dynamic interaction. So, let the variables dance while the code unfolds naturally and professionally.

Embark on a journey into the core of JavaScript, where the seemingly simple programme hides a world of complexity. In this research, we will uncover the mysteries of the smallest JavaScript programme, the formation of the "Window" object, and the importance of the cryptic "this" keyword.

Introducing the shortest JavaScript programme.

The shortest JavaScript programme may surprise you: it is an empty file. Despite the lack of explicit code, the JavaScript engine is hard at work, performing numerous functions behind the scenes.

Global Execution Context Setup

When the JavaScript engine encounters an empty file, it commences the establishment of a global execution context. Simultaneously, the global memory component, which stores the variable environment, is created.

Role of the Global Object: "Window"

In the browser environment, the JavaScript engine creates a global object called "Window." This object stores many functions and variables. One intriguing aspect is that it may be accessed from anywhere in the programme, making it a formidable force.

Understanding the "this" keyword in short.

Along with global object generation, the engine creates a critical element: the "this" keyword. This keyword refers to the window object at the global level. To put it simply, the Global Execution Context, global object (window), and "this" variable are created.

Global Object Variation Across JavaScript Runtimes.

While the name "Window" is common in browsers, it takes on a different meaning in Node.js. Notably, at the global level, the equivalency is valid: this === window.

Variable Attachment to the Global Object

When we declare a variable in the global scope, we observe an interesting behaviour. Such variables are attached to the global object, creating a direct relationship.

var x = 10;
console.log(x);        // 10
console.log(this.x);   // 10
console.log(window.x); // 10

Extra Knowledge (Gyaan): Global and Local Objects

The global object is a unique and shared entity across all execution contexts in a JavaScript environment, whether it is a browser or Node.js. However, within a function's execution environment, a local object known as the variable object or activation object takes precedence. This localised object contains variables, function parameters, and declarations unique to the function's scope. It is important to note that the activation context (variable object) cannot be accessed directly or explicitly from outside the execution context.

Embark on this tour of JavaScript complexities, where even the smallest programme reveals a world of behind-the-scenes processes.

Decoding JavaScript functions ❤️

JavaScript functions are more than simply code snippets; they are dynamic entities that generate their own execution contexts when called. Let's look at the essential elements that make functions in JavaScript truly unique:

1. Local Variables and Functional Scope

Functions define their area, known as the variable environment or Memory Component. This distinct space enables for the use of local variables that are restricted to the function's limits. These local variables are secret and only accessible within the function unless expressly shared via closures—a topic we'll discuss later.

2.Variable Hoisting in JavaScript

JavaScript has a unique method called variable hoisting. This approach enables functions to be called before they are defined because variable definitions are relocated to the top of their appropriate scopes during the compilation phase. This ensures that functions can be called effortlessly, hence increasing the flexibility of your code.

The Role of Variable Environment in Execution Context

3.Memory component in the execution context.

The variable environment, often known as the memory component, is where variables and functions reside during runtime. Key items to consider:

• Each execution context has its own variable environment, which guarantees isolation.

• When a variable is accessed, JavaScript first looks within the local variable environment before moving on to the outer environments and finally the global variable environment.

  4.Lexical Scoping for Variable Resolution.

  Lexical scoping is made easier by JavaScript's hierarchical variable environment structure. Variables are resolved depending on their closeness to the current execution context, resulting in a reliable and predictable scoping method.

Deep Dive into JavaScript Code Flow

Let's look at a code snippet to visualize the flow of execution context and variable environments:

var x = 1;
a();
b();
console.log(x);

function a() {
  var x = 10;
  console.log(x);
}

function b() {
  var x = 100;
  console.log(x);
}

5.Step by Step Execution

• The Global Execution Context (GEC) is constructed, and 'x' is initialised to 1.

• Function a() is called, which generates a new execution context. Local 'x' within a() is set to ten, and console.log(x) returns 10.

• After executing a(), the context is removed from the call stack and returned to GEC.

• The function b() is invoked to create a new context. Local 'x' in b() is set to 100, and console.log(x) returns 100.

• After executing b(), the context is removed from the call stack and returned to GEC.

• Console.log(x) in the global scope returns the global 'x' value of 1.

6.Code Flow Visualization

As we unravel the mystery, visualize the code flow, demonstrating the delicate dance between functions and variable contexts in the JavaScript world.

Conclusion: Harness the Power of JavaScript Functions and Environments

Finally, this guide will help you navigate the ever-changing terrain of JavaScript functions and variable environments. With this understanding, you'll be better able to write code that is both functional and elegant. As you progress through your coding journey, continue to explore the depths of JavaScript in order to master the art of web development.

Stay Tuned!! Happy Learning!!