Forem: Nur Muhammadd

Understanding Promises and Promise Chaining in JavaScript

Nur Muhammadd — Tue, 24 Sep 2024 00:20:21 +0000

What is a Promise?

A Promise in JavaScript is like a “promise” you make to do something in the future. It is an object that represents the eventual completion (or failure) of an asynchronous task and its resulting value. Simply put, a Promise acts as a placeholder for a value that isn’t available yet but will be in the future.

Promise States

Promises can exist in one of three states:

Pending: The initial state of a Promise, where it’s still waiting for the async task to complete.
Fulfilled: The state where the Promise successfully completes, and the resulting value is available.
Rejected: The state where the Promise fails, and an error is returned instead of the expected value.

How Does a Promise Work?

A Promise is created using the Promise constructor, which takes two parameters: resolve and reject—both are functions.

If the async operation is successful, you call the resolve function to fulfill the promise.
If something goes wrong, you call the reject function to indicate that the promise was rejected due to an error.
You can handle the result of a Promise using .then() for success and .catch() for error handling.

Example: Creating and Consuming a Promise

const fetchData = new Promise((resolve, reject) => {
  // Simulate an asynchronous task like fetching data from a server
  setTimeout(() => {
    const data = "Some data from the server";

    // Simulate success and resolve the promise
    resolve(data);

    // You can also simulate an error by rejecting the promise
    // reject(new Error("Failed to fetch data"));
  }, 1000);
});

// Consuming the Promise
fetchData
  .then((data) => {
    console.log("Data fetched:", data);
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });

The resolve(data) will return the successful data when the Promise is fulfilled.
If something goes wrong, reject(error) will throw an error that can be handled with .catch().

What is Promise Chaining?

Promise Chaining is the process of executing a sequence of asynchronous tasks, one after another, using Promises. Each .then() method in the chain runs after the previous one has been fulfilled.

Why Use Promise Chaining?

It allows you to write clean, readable code for handling multiple asynchronous operations in a specific order. Each .then() can return a value that is passed to the next .then() in the chain, allowing you to handle tasks step-by-step.

Example: Chaining Multiple Promises

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000); // Initial async task resolves with 1
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;   // Returns 2 to the next .then()
  })
  .then((result) => {
    console.log(result); // Logs: 2
    return result * 3;   // Returns 6 to the next .then()
  })
  .then((result) => {
    console.log(result); // Logs: 6
    return result * 4;   // Returns 24 to the next .then()
  });

In this example:

The Promise starts by resolving with 1 after 1 second.
Each subsequent .then() receives the result from the previous one, doubles or triples it, and passes it to the next .then().
The result is logged step-by-step: 1, 2, 6.
Error Handling in Chaining
You can catch any error in the Promise chain using .catch(). If any .then() fails, the chain stops, and the error is passed to the .catch() block.

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;
  })
  .then((result) => {
    throw new Error("Oops, something went wrong!");
  })
  .catch((error) => {
    console.error("Caught error:", error.message); // Catches the error
  });

Key Benefits of Promises

Avoids Callback Hell: Promises simplify managing multiple async operations, which otherwise leads to deeply nested callbacks (also known as callback hell).
Error Handling: You can handle all errors in a chain with a single .catch() at the end.
Sequential Execution: Promise chaining ensures that asynchronous tasks are executed in order, making code easier to reason about.

Conclusion

Promises are a powerful tool in JavaScript for handling asynchronous tasks. With Promise Chaining, you can manage multiple async operations in a clean, readable, and sequential manner. By understanding how to create and consume Promises, and chaining them together, you’ll be well on your way to mastering asynchronous programming in JavaScript!

How Does the JavaScript Engine Work?

Nur Muhammadd — Mon, 23 Sep 2024 17:16:05 +0000

Every browser has a JavaScript engine that executes JavaScript code and converts it into machine code. Let’s break down the process step-by-step:

1. Parsing the Code

When JavaScript code is executed, the Parser reads the code and produces an Abstract Syntax Tree (AST), which is stored in memory. The AST represents the structure of the code in a tree format.

2. Interpreting the Code

The Interpreter processes the AST and generates bytecode or machine code. This code is then executed by the computer. The interpreter ensures that the code runs efficiently by converting it into a form that the machine can understand.

3. Profiling the Code

The Profiler is a component of the JavaScript engine that monitors the execution of the code. It collects data on how the code is running, which helps in optimizing performance.

4. Just-In-Time (JIT) Compilation

The Optimizing Compiler, also known as the Just-In-Time (JIT) Compiler, uses profiling data to make certain assumptions and produce highly optimized machine code. This process helps in improving the performance of the code by compiling it just before execution.

5. Managing the Call Stack and Memory Heap

During execution, the Call Stack keeps track of the currently executing functions, while the Memory Heap is used for memory allocation. The call stack ensures that functions are executed in the correct order, and the memory heap manages the allocation of memory for variables and objects.

6. Garbage Collection

Finally, the Garbage Collector comes into play to manage memory by reclaiming memory from unused objects. This process helps in preventing memory leaks and ensuring efficient use of memory.

Understanding the JavaScript Event Loop: A Beginner’s Guide

Nur Muhammadd — Mon, 23 Sep 2024 17:07:32 +0000

The Event Loop is a core component of the JavaScript runtime environment, crucial for executing asynchronous tasks. It continuously monitors two main structures: the call stack and the event queues.

The Call Stack

The call stack is a Last In, First Out (LIFO) data structure that stores the functions currently being executed. When a function is called, it’s added to the top of the stack. Once the function completes, it’s removed from the stack.

Web APIs

Web APIs handle asynchronous operations like setTimeout, fetch requests, and promises. These operations are offloaded to the Web APIs environment, allowing the main thread to continue running other code.

The Job Queue (Microtasks)

The job queue, also known as the microtask queue, is a First In, First Out (FIFO) structure. It holds the callbacks of async/await, promises, and process.nextTick() that are ready to be executed. Microtasks are given higher priority and are processed before macrotasks.

The Task Queue (Macrotasks)

The task queue, or macrotask queue, is also a FIFO structure. It holds the callbacks of asynchronous operations like setInterval and setTimeout that are ready to be executed. Macrotasks are processed after microtasks.

How the Event Loop Works

The event loop continuously checks the call stack to see if it’s empty. If the call stack is empty, the event loop looks into the job queue first. If there are any callbacks in the job queue, they are dequeued and pushed onto the call stack for execution. Once the job queue is empty, the event loop then checks the task queue and processes any callbacks there.

Visualizing the Event Loop

Here’s a simple visualization to help you understand the process:

Call Stack: Functions are pushed and popped here.
Web APIs: Asynchronous operations are handled here.
Job Queue (Microtasks): High-priority callbacks are queued here.
Task Queue (Macrotasks): Lower-priority callbacks are queued here.
Event Loop: Monitors the call stack and queues, ensuring smooth execution.

What are the differences between let, var or const?

Nur Muhammadd — Wed, 21 Aug 2024 12:01:57 +0000

Variables declared using the var keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. let and const are block-scoped, meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop).

function foo() {
  // All variables are accessible within functions.
  var bar = 'bar';
  let baz = 'baz';
  const qux = 'qux';

  console.log(bar); // bar
  console.log(baz); // baz
  console.log(qux); // qux
}

console.log(bar); // ReferenceError: bar is not defined
console.log(baz); // ReferenceError: baz is not defined
console.log(qux); // ReferenceError: qux is not defined

if (true) {
  var bar = 'bar';
  let baz = 'baz';
  const qux = 'qux';
}

// var declared variables are accessible anywhere in the function scope.
console.log(bar); // bar
// let and const defined variables are not accessible outside the block they were defined in.
console.log(baz); // ReferenceError: baz is not defined
console.log(qux); // ReferenceError: qux is not defined

var allows variables to be hoisted, meaning they can be referenced in code before they are declared. let and const will not allow this, instead throwing an error.

console.log(foo); // undefined

var foo = 'foo';

console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization

let baz = 'baz';

console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization

const bar = 'bar';

Redeclaring a variable with var will not throw an error, but let and const will.

var foo = 'foo';
var foo = 'bar';
console.log(foo); // "bar"

let baz = 'baz';
let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared

let and const differ in that let allows reassigning the variable's value while const does not.

// This is fine.
let foo = 'foo';
foo = 'bar';

// This causes an exception.
const baz = 'baz';
baz = 'qux';