DEV Community: Raju Saha

Level Up Your JavaScript: The Power of Higher-Order Functions

Raju Saha — Wed, 10 Jul 2024 13:04:41 +0000

JavaScript's functions are more than just blocks of code that execute tasks. They can be treated like first-class citizens, meaning they can be assigned to variables, passed as arguments, and even returned from other functions. This superpower unlocks the world of higher-order functions (HOFs) – functions that deal with other functions in a profound way.

What are Higher-Order Functions?

HOFs are functions that take one or more functions as arguments, or return a function as their result (or even both!). This allows for a powerful and flexible programming style. Here's how HOFs can elevate your JavaScript code:

Accepting Functions as Arguments:
Imagine a function performOperationOnArray that takes an array and another function (operation) as arguments. performOperationOnArray can then iterate over the array and apply the provided operation function to each element. This promotes code reusability – you can define different operations without rewriting the iteration logic.
Returning Functions:
HOFs can also generate and return new functions based on the provided arguments. This pattern is commonly used with design paradigms like closures.

Benefits of HOFs:

Readability and Maintainability
HOFs often lead to cleaner and more concise code. By encapsulating common operations within HOFs, you avoid code duplication and improve readability.
Modularity and Reusability
HOFs promote modularity by separating core functionalities into reusable functions. This makes your code more organized and easier to maintain.
Abstraction
HOFs allow you to abstract away low-level details, focusing on the bigger picture. You can write code that works on different data structures or performs various operations without rewriting the core logic.

Popular HOFs in JavaScript

JavaScript provides a rich set of built-in HOFs, including:

map(): Creates a new array with the results of calling a provided function on every element in an array.
filter(): Creates a new array with elements that pass a test implemented by the provided function.
reduce(): Applies a function against an accumulator and each element in an array to reduce it to a single value.
forEach(): Executes a provided function once for each array element.
sort(): Sorts an array in place or returns a new sorted array, optionally using a provided compare function.

Examples

Let's see some practical examples of HOFs in action:

// Using map() to double the values in an array
const numbers = [1, 2, 3];
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // Output: [2, 4, 6]

// Using filter() to get only even numbers
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2]

// Using reduce() to sum the elements in an array
const sum = numbers.reduce((accumulator, number) => accumulator + number, 0);
console.log(sum); // Output: 6

Remember

HOFs are a cornerstone of functional programming and can significantly improve your JavaScript code. By leveraging their power, you can write cleaner, more maintainable, and expressive code. So, dive deeper into HOFs, explore their potential, and unleash the functional programmer within you!

Unveiling the Magic of Generator Functions in JavaScript

Raju Saha — Sun, 07 Jul 2024 17:52:27 +0000

In the realm of JavaScript, generator functions reign supreme when it comes to wielding control over the flow of your code. Let's delve into their essence and explore how they can elevate your programming prowess.

What are Generator Functions?

Imagine a function that can pause its execution mid-air, yield a value, and then resume when prompted. This fantastical entity is precisely what a generator function is! Defined using the function* syntax, it employs the yieldkeyword to produce a sequence of values, one at a time.

Syntax Breakdown:

function* generatorName() {
  yield value1;
  yield value2;
  // ... more yields
}

When you call a generator function, it doesn't return a single value like a traditional function. Instead, it crafts an iterator, an object that remembers where it left off in the function's execution.

Controlling the Flow: The `.next()` Method

The .next() method is the key to interacting with the iterator generated by a generator function. Each time you call .next(), the function resumes execution from the last yield statement and delivers the yielded value along with a done property. This done property indicates whether the generator has finished its task.

When done is false, the generator has yielded another value and is ready to be resumed.
When done is true, the generator has exhausted all its yield statements and has no more values to produce.

Applications of Generator Functions:

Lazy Evaluation: Generator functions excel at lazy evaluation, meaning they only calculate a value when it's truly required. This is particularly beneficial for dealing with infinite or massive datasets as it reduces memory consumption.

Asynchronous Programming: Generator functions, when coupled with Promises, provide a cleaner and more readable way to handle asynchronous operations. This paves the way for a more synchronous-like coding style.

Iterable Sequences: Generator functions can effortlessly create iterable sequences, which are essential for using constructs like for...of loops. This allows you to process elements one by one without having to build a large data structure upfront.

Example 1: Power Up with Generator Functions

Let's create a generator function to calculate the powers of a number up to a certain limit:

function* powers(num) {
  for (let current = num; ; current *= num) {
    yield current;
  }
}

for (const power of powers(2)) {
  if (power > 32) {
    break;
  }
  console.log(power);
}

In this example, the powers function yields the powers of 2 (2, 4, 8, 16, 32) using a loop that continuously multiplies the current value by num. The for...of loop iterates over the generated sequence, stopping when the power exceeds 32.

Example 2: Building a Delightful Food Ordering System

Here's a generator function that simulates a food ordering system:

function* orderFood() {
  const starter = yield "Choose your starter or type 'skip'";
  if (starter !== 'skip') {
    console.log(`Great choice! Your starter is ${starter}`);
  }

  const mainCourse = yield "Now select your main course";
  console.log(`Excellent! You've chosen ${mainCourse}`);

  const dessert = yield "Would you like dessert (or type 'no')?";
  if (dessert !== 'no') {
    console.log(`Perfect enjoy ${dessert} for dessert`);
  }
  console.log('Order Complete');
}

const order = orderFood();

const starter = order.next();
console.log(starter.value);
const nextItem = order.next('Soup');
console.log(nextItem.value);
const lastItem = order.next('Pasta');
console.log(lastItem.value);
order.next('Ice Cream');

This example demonstrates how a generator function can be used to create a step-by-step ordering process. The yield statements prompt the user for input, and the .next() method retrieves the selections, guiding the user through the ordering flow.

By incorporating generator functions into your JavaScript repertoire, you'll unlock a world of possibilities for crafting more efficient, elegant, and manageable code. So, experiment, explore, and unleash the power of generator functions in your next project!

Exciting New Features in ECMAScript 2024 : In-Place Resizable ArrayBuffers and Enhanced SharedArrayBuffers 🚀

Raju Saha — Sat, 06 Jul 2024 12:13:16 +0000

ECMAScript 2024 brings several exciting enhancements to ArrayBuffer and SharedArrayBuffer, making memory management in JavaScript more efficient and flexible. In this post, we’ll dive into these new features and provide examples to help you get started.

In-Place Resizable ArrayBuffers

Previously, ArrayBuffers had fixed sizes. Resizing required allocating a new buffer and copying data, which was inefficient and could fragment the address space on 32-bit systems. ECMAScript 2024 introduces in-place resizable ArrayBuffers, allowing dynamic resizing without creating new buffers or copying data.

New Constructor and Methods

The ArrayBuffer constructor now accepts an additional parameter for maxByteLength. Here’s the updated constructor and new methods:

new ArrayBuffer(byteLength: number, options?: {maxByteLength?: number})
ArrayBuffer.prototype.resize(newByteLength: number)
ArrayBuffer.prototype.resizable()
ArrayBuffer.prototype.maxByteLength()

Example: Resizing an ArrayBuffer 🖊️

// Create a resizable ArrayBuffer with an initial size of 10 bytes and a max size of 20 bytes
let buffer = new ArrayBuffer(10, { maxByteLength: 20 });
console.log(buffer.byteLength); // 10

// Resize the ArrayBuffer to 15 bytes
buffer.resize(15);
console.log(buffer.byteLength); // 15

// Attempting to resize beyond the max size throws an error
try {
  buffer.resize(25);
} catch (e) {
  console.error(e); // RangeError: ArrayBuffer length exceeds max length
}

ArrayBuffer.prototype.transfer

The new transfermethods allow efficient data transfer between ArrayBuffers. This is particularly useful for transferring data via structuredClone() or within the same agent (e.g., main thread or web worker).
Example

let buffer1 = new ArrayBuffer(8);
let buffer2 = buffer1.transfer();
console.log(buffer1.byteLength); // 0 (buffer1 is now detached)
console.log(buffer2.byteLength); // 8

SharedArrayBuffer Enhancements

SharedArrayBuffer allows multiple JavaScript contexts (threads or processes) to share the same memory. This is crucial for applications that need efficient memory sharing for large data across different agents. With ECMAScript 2024, SharedArrayBuffers can also be resized, but with some limitations:

SharedArrayBuffers can only grow; they cannot shrink.
SharedArrayBuffers are not transferrable and therefore do not have the .transfer() method that ArrayBuffers have.

New Constructor and Methods

The SharedArrayBuffer constructor now accepts an additional parameter for maxByteLength. Here’s the updated constructor and new method:

new SharedArrayBuffer(byteLength: number, options?: {maxByteLength?: number})
SharedArrayBuffer.prototype.grow(newByteLength: number)

Example 🖊️

const buffer = new SharedArrayBuffer(8, { maxByteLength: 16 });

if (buffer.growable) {
  buffer.grow(12);
  console.log(buffer.byteLength); // 12
}

The new features in ECMAScript 2024 make ArrayBufferand SharedArrayBuffermore powerful and flexible. In-place resizing eliminates the need for costly buffer reallocations, and the new transfer methods facilitate efficient data movement. Enhanced SharedArrayBuffer capabilities continue to support efficient memory sharing across JavaScript contexts, with the added ability to resize (though only to grow and not shrink).

Reference Link : Ecma International approves ECMAScript 2024: What’s new?

New Feature in ECMAScript 2024 - New Regular Expression Flag /v (.unicodeSets) 👨‍🎨

Raju Saha — Sat, 06 Jul 2024 07:40:49 +0000

JavaScript’s regular expression capabilities have just received a powerful upgrade with the introduction of the /v flag, also known as .unicodeSets. This new flag enables more advanced and flexible pattern matching with Unicode properties, string literals in character classes, and set operations. Let's dive into what /v brings to the table and explore some practical examples.

Unicode String Properties

With the /v flag, you can now use Unicode string properties to match more complex characters. For instance, the character 🧑‍💻 consists of three code points, making it challenging to match with traditional Unicode code point properties.

Example:

//Previously, using the Unicode code point property Emoji via /u
console.log(/^\p{Emoji}$/u.test('🧑‍💻'));  //false

//Now, with the Unicode string property RGI_Emoji via /v
console.log(/^\p{RGI_Emoji}$/v.test('🧑‍💻')); //true

String Literals in Character Classes

The /v flag allows string literals to be used within character classes using the \q{} escape sequence. This makes it easier to match specific sequences directly.

Examples:

//Matching the string literal 🧑‍💻
console.log(/^[\q{🧑‍💻}]$/v.test('🧑‍💻')); // true

//Matching the string literal "abc" or "def"
console.log(/^[\q{abc|def}]$/v.test('abc')); //true

Set Operations for Character Classes

Set operations within character classes are now possible with /v, allowing for more complex matching patterns.

Examples:

//Excluding specific characters
console.log(/^[\w--[a-g]]$/v.test('a')); // false

//Excluding specific digits
console.log(/^[\p{Number}--[0-9]]$/v.test('٣')); // true

//Excluding a specific emoji
console.log(/^[\p{RGI_Emoji}--\q{🧑‍💻}]$/v.test('🧑‍💻')); // false

Improved Matching with `/i` and Negated Unicode Property Escapes

The /v flag also improves matching when using the /i flag and negated Unicode property escapes.

Conclusion

The introduction of the /v (.unicodeSets) flag in JavaScript’s regular expressions marks a significant improvement in handling Unicode characters, string literals, and set operations. Whether you're dealing with complex emoji sequences or need more precise pattern matching, /v opens up new possibilities.

Have you tried out the new /v flag yet? Share your experiences and let us know how it's helped you in your projects!

Reference Link : Ecma International approves ECMAScript 2024: What’s new?

Happy coding!

New Feature in ECMAScript 2024 - Promise.withResolvers()

Raju Saha — Sat, 06 Jul 2024 07:40:14 +0000

Promise.withResolvers()

Regular Promise

A JavaScript Promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason.

We create a Promise using the Promise constructor, which takes a function (executor) with two arguments: resolve and reject. Below is the boilerplate code

const promise = new Promise((resolve, reject) => {
    // Asynchronous operation
    if (/* operation is successful */) {
        resolve('Success!');
    } else {
        reject('Failure.');
    }
});

promise
    .then(result => console.log(result))
    .catch(error => console.error(error));

Check the example in codepen Regular Promises

Introducing `Promise.withResolvers()`

The Promise.withResolvers() method simplifies the creation of promises by returning an object containing a new promise along with its resolve and reject functions. This avoids the need for additional boilerplate code and makes the promise handling more concise.

Here's the syntax for using Promise.withResolvers():

const { promise, resolve, reject } = Promise.withResolvers();

Example: Waiting for a Button Click with Cancel Option using Promise.withResolvers()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise.withResolvers() Example</title>
</head>
<body>
    <button id="myButton">Click me</button>
    <button id="cancelButton">Cancel</button>

    <script>
        function waitForButtonClick(buttonId, cancelButtonId) {
            const { promise, resolve, reject } = Promise.withResolvers();
            const button = document.getElementById(buttonId);
            const cancelButton = document.getElementById(cancelButtonId);

            button.addEventListener('click', () => resolve('Button clicked!'));
            cancelButton.addEventListener('click', () => reject('Action cancelled!'));

            return promise;
        }

        async function main() {
            try {
                console.log('Waiting for button click or cancellation...');
                const result = await waitForButtonClick('myButton', 'cancelButton');
                console.log(result);
            } catch (error) {
                console.error(error);
            }
        }

        main();
    </script>
</body>
</html>

CodePen for the above example Promise with Promise.withResolvers()

Key Differences and Benefits

Conciseness
Promise.withResolvers() reduces boilerplate code by directly providing the resolve and reject functions along with the promise object. This can make the code cleaner and easier to read.
Scope Management
With Promise.withResolvers(), the resolve and reject functions are within the same scope as the promise itself, which can simplify the logic for resolving or rejecting the promise based on asynchronous events.
Use Case Flexibility
Promise.withResolvers() is particularly useful in scenarios where the resolution or rejection needs to happen outside of the initial executor function, such as event listeners, timeouts, or other asynchronous callbacks.

Conclusion

Both JavaScript promisesand Promise.withResolvers() are powerful tools for managing asynchronous operations. While traditional promisesprovide robust functionality, Promise.withResolvers() offers a more concise and convenient way to handle promises, especially in complex asynchronous workflows.

Checkout next Post for other features

Reference Ecma International approves ECMAScript 2024: What’s new?

Happy Coding !!

Exciting New Features in ECMAScript 2024 - groupBy() 🎗️

Raju Saha — Sat, 06 Jul 2024 07:39:14 +0000

The latest version of JavaScript, ECMAScript 2024, became an official standard on June 26, 2024, thanks to the 127th ECMA General Assembly.

It has included six new features

Grouping synchronous iterable
Promise.withResolvers()
Regular expression flag /v
New features for ArrayBuffers and SharedArrayBuffers
Ensuring that strings are well-formed
Atomics.waitAsync()

Grouping synchronously iterable

groupBy() : Object.groupBy() Map.groupBy()
The Object.groupBy() method takes an object and a callback function. It groups the object's elements into a new object based on the strings returned by the callback function for each element. The original object remains unchanged.

const stationary=[
  {name:'Pencil',qty:100},
  {name:'Pen',qty:50},
  {name:'Rubber',qty:300},
  {name:'Notebook',qty:150},
  {name:'Scale',qty:0},
  {name:'Color Pencil',qty:0},
]
function callbackFun({qty}){
  return qty>0?'available':'notAvailable'
}
const result=Object.groupBy(stationary,callbackFun);
console.log(result);

//output
/*
{
  available: [
    { name: 'Pencil', qty: 100 },
    { name: 'Pen', qty: 50 },
    { name: 'Rubber', qty: 300 },
    { name: 'Notebook', qty: 150 }
  ],
  notAvailable: [
    { name: 'Scale', qty: 0 },
    { name: 'Color Pencil', qty: 0 }
  ]
}
*/

The Map.groupBy() method groups elements from an object based on strings returned by a callback function. It creates a new Map object with these groups, leaving the original object unchanged.

//...
const result=Map.groupBy(stationary,callbackFun);
console.log(result);

//output
/*
Map(2) {
  'available' => [
    { name: 'Pencil', qty: 100 },
    { name: 'Pen', qty: 50 },
    { name: 'Rubber', qty: 300 },
    { name: 'Notebook', qty: 150 }
  ],
  'notAvailable' => [
    { name: 'Scale', qty: 0 },
    { name: 'Color Pencil', qty: 0 }
  ]
}
*/

Checkout next Post for other features

Reference Ecma International approves ECMAScript 2024: What’s new?

Happy Coding !!

Demystifying the Ellipsis (...): Spread Operator vs Rest Operator in JavaScript

Raju Saha — Wed, 03 Jul 2024 04:35:47 +0000

The ellipsis (...) in JavaScript might seem like a simple punctuation mark, but it unlocks two powerful operators: the Spread Operator and the Rest Operator. Both utilize the ellipsis but serve distinct purposes. Let's delve into their functionalities and explore how they can elevate your code!

1. Spread Operator (...): The Art of Scattering

Imagine you have an array of tasty ingredients and want to share them across multiple recipes. The Spread Operator allows you to unpack the elements of an iterable (like arrays, strings, or objects) and scatter them into individual elements within another expression.

Common Use Cases:

Merging Arrays:

const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'potato'];
const allIngredients = [...fruits, ...vegetables]; // allIngredients = ['apple', 'banana', 'carrot', 'potato']

Copying Arrays (to avoid accidental modification):

const originalArray = [1, 2, 3];
const copyArray = [...originalArray]; // copyArray = [1, 2, 3] (independent copy)

Spreading Function Arguments:

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
const result = sum(...numbers); // result = 6 (spreads numbers array as individual arguments)

2. Rest Operator (...): The Art of Gathering

Think of the Rest Operator as the opposite of the Spread Operator. It gathers the remaining elements from an iterable into a single array. Imagine collecting leftover ingredients after preparing a dish.

Common Use Cases:
Creating Functions with Variable Arguments:

function logNumbers(...numbers) {
  console.log(numbers); // logs all passed arguments as an array
}

logNumbers(1, 2, 3, 4); // logs [1, 2, 3, 4]

Destructuring Arrays:

const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4] (rest captures remaining elements)

Choosing the Operator:

The choice between Spread and Rest depends on your intention. Use Spread to unpack iterables and distribute elements, while Rest gathers the remaining elements into a single array.

Remember, the Spread Operator can also be used to spread object properties when creating new objects or merging existing ones.

Embrace the Ellipsis!

By mastering the Spread and Rest Operators, you'll enhance your ability to manipulate data structures, write concise code, and improve code readability. So, the next time you encounter the ellipsis (...), wield its power with confidence!

Mastering Binary Search in JavaScript Part I: Iterative, Recursive. 🚀🦾

Raju Saha — Tue, 02 Jul 2024 03:45:12 +0000

Introduction

Binary search is a powerful search algorithm that excels in finding elements within sorted arrays. It leverages the "divide and conquer" approach, repeatedly dividing the search space in half until the target element is located or determined to be absent. This post delves into implementing binary search in JavaScript using iterative and recursive techniques, along with exploring its application for element insertion.

Understanding Binary Search

 Assumptions: The input array is sorted in ascending order.
 Logic:
      1. Initialize start and end indices to point to the beginning and end of the array, respectively.
      2. While start is less than or equal to end:
         - Calculate the middle index using Math.floor((start + end) / 2).
         - If the target element is found at arr[middle]:
           - Return the middle index as the element's position.
         - If the target element is less than arr[middle]:
           - Recalculate end to exclude the right half of the search space (since the array is sorted).
         - If the target element is greater than arr[middle]:
           - Recalculate start to exclude the left half of the search space.
     3. If the loop completes without finding the element, return null (or an appropriate indication of element not found).

Implementation: Iterative Approach

function binaryIterative(arr, target) {
  let start = 0;
  let end = arr.length - 1;

  while (start <= end) {
    let middle = Math.floor((start + end) / 2);

    if (arr[middle] === target) {
      return middle;
    } else if (target < arr[middle]) {
      end = middle - 1;
    } else {
      start = middle + 1;
    }
  }

  return 'Not found; 
}
console.log(binaryIterative([2, 7, 9, 11, 25], 10)); // Output: Not found

Implementation: Recursive Approach

function binaryRecursive(arr, start, end, target) {
  if (start > end) {
    return 'Element Not Found'; // Or any appropriate indication
  }

  let middle = Math.floor((start + end) / 2);

  if (arr[middle] === target) {
    return middle;
  } else if (target < arr[middle]) {
    return binaryRecursive(arr, start, middle - 1, target);
  } else {
    return binaryRecursive(arr, middle + 1, end, target);
  }
}

function findElement(arr, target) {
  let start = 0;
  let end = arr.length - 1;
  return binaryRecursive(arr, start, end, target);
}

console.log(findElement([2, 7, 9, 11, 25], 9));   // Output: 2

Choosing the Approach

Iterative: Generally preferred for larger arrays, as it avoids the overhead of function calls associated with recursion.
Recursive: Can be more concise and easier to understand.

Problem I: Finding or Inserting an Element

The provided searchInsertKfunction demonstrates how to modify the binary search to find the appropriate insertion point for an element in a sorted array:

function searchInsertK(arr, N, K) {
  let start = 0;
  let end = N - 1;

  while (start <= end) {
    let mid = Math.floor((start + end) / 2);

    if (K === arr[mid]) {
      return mid; // Element found
    } else if (K < arr[mid]) {
      end = mid - 1;
    } else {
      start = mid + 1;
    }
  }

  // If not found, return the insertion index (after the last element where K is greater)
  return end + 1;
}

Binary search is an essential algorithm for efficient searching in sorted arrays. Understanding its iterative and recursive implementations provides valuable tools.

Leet Code Problem: Finding index that sums to a target Using Javascript

Raju Saha — Mon, 01 Jul 2024 04:54:07 +0000

Title: Finding index that sums to a target in JavaScript (Four Method)

Introduction

This post explains four approaches for solving the classic algorithm problem: finding two indexes in an array that add up to a given target. We'll cover methods for both unsorted and sorted arrays:

Brute Force (Unsorted)
Hash Map (Unsorted)
Binary Search (Sorted)
Two Pointers (Sorted)

We'll analyze their time complexities and discuss their suitability for different scenarios.

The Problem:

Given an array of numbers (numberList) and a target sum (target), write a function that returns the indices of two numbers within the array that add up totarget. There should be only one such pair, and the first index (index1) must be less than the second index (index2).

Method 1: Brute Force (Unsorted - O(n^2) Time Complexity)

The brute force approach iterates through each element in the array and compares it with every subsequent element. If the sum matches the target, we return the corresponding indices.

function SumOfTwo(numberList, target) {
  for (let i = 0; i < numberList.length - 1; i++) {
    for (let j = i + 1; j < numberList.length; j++) {
      if (numberList[i] + numberList[j] === target) {
        return [i, j];
      }
    }
  }
  return null; // No pair found
}

Time Complexity: O(n^2) The nested loop results in quadratic time complexity. This approach can be slow for larger datasets.

Method 2: Hash Map (Unsorted - O(n) Time Complexity)

The hash map approach leverages a Map object to store seen numbers and their indices efficiently. We iterate through the array, calculating the complement (x)for each element (the number needed to reach the target). If the complement exists in the map (meaning we've seen its pair already), we return the indices of that pair. Otherwise, we add the current element and its index to the map.

function SumOfTwoMap(numberList, target) {
  const mapObj = new Map();
  for (let i = 0; i < numberList.length; i++) {
    const x = target - numberList[i];
    if (mapObj.has(x)) {
      return [mapObj.get(x), i];
    }
    mapObj.set(numberList[i], i);
  }
  return null; // No pair found
}

Time Complexity: O(n). The loop iterates through the array once, and accessing/updating the map is typically constant time with a good implementation. This makes the hash map approach significantly faster for larger arrays.

Method 3: Binary Search (Sorted - O(n log n) Time Complexity)

This approach leverages binary search to efficiently find the complement (x) of the current element that would add up to the target. However, it requires the array to be sorted beforehand. Here's the implementation:

function binarySearch(arr, target, startIndex) {
    let left = startIndex;
    let right = arr.length - 1;
    while (left <= right) {
      const mid = Math.floor((left + right) / 2);
      if (arr[mid] === target) {
        return mid;
      } else if (arr[mid] < target) {
        left = mid + 1;
      } else {
        right = mid - 1;
      }
    }
    return -1; 
  }
function twoSumBinarySearch(numberList, target) {
    numberList.sort((a, b) => a - b); // Sort the array
    for (let i = 0; i < numberList.length; i++) {
      const num2 = target - numberList[i];
      const complementIndex = binarySearch(numberList, num2, i + 1); //to avoid the duplicate pass it one increment
      if (complementIndex !== -1) {
        return [i, complementIndex];
      }
    }
    return null; // No pair found
}

Time Complexity: O(n log n) due to the binary search This can be efficient for large sorted arrays, else it adds the cost of sorting.

Method 4: Two Pointers (Sorted - O(n) Time Complexity)

This method exploits the sorted nature of the array by using two pointers, one at the beginning (i) and another at the end (j). We iterate while i is less than j:

If numberList[i] + numberList[j] is equal to target, we return the indices.
If the sum is less than target, we move the left pointer (i) forward to increase the sum.
If the sum is greater than target, we move the right pointer (j) backward to decrease the sum.

function twoSumPointers(numberList, target) {
  let i = 0;
  let j = numberList.length - 1;
  while (i < j) {
    const sum = numberList[i] + numberList[j];
    if (sum === target) {
      return [i, j];
    } else if (sum < target) {
      i++;
    } else {
      j--;
    }
  }
  return null; // No pair found
}

Time Complexity: O(n). This approach leverages the sorted nature of the array and has a linear time complexity, making it very efficient for sorted arrays.

Example :

console.log(SumOfTwo([3, 9, 10, 12], 12)); // Output: [0, 1]
console.log(SumOfTwoMap([2, 11, 31, 50], 42)); // Output: [1, 2]
console.log(twoSumBinarySearch([2,7,11,15],22)) // Output : [1,3]
console.log(twoSumPointers([2,7,11,15],22)) // Output : [1,3]

Additional Considerations:

Error handling: You can add checks to handle cases where no pair is found or the input is invalid.
Optimization: For specific use cases, you might consider more advanced data structures or algorithms.

function declarations vs function expressions in Javascript 🤔✌️

Raju Saha — Sun, 30 Jun 2024 05:22:13 +0000

When it comes to defining functions in JavaScript, there are two primary ways to do so: function declarations and function expressions. While they may seem similar, there are key differences between them that can impact the behavior of your code. Let’s explore these differences in detail.

Function Declaration

A function declaration is a standard way of defining a function using the function keyword, followed by the name of the function.

Characteristics of Function Declarations:

Named Functions: They are declared with a specific name.
Not Assignable to Variables: Function declarations stand alone and are not typically assigned to variables.
Hoisted: Function declarations are hoisted, meaning they are available before any other code execution. You can call a function declared this way before its definition in the code.

// Calling the function before its definition due to hoisting
Declaration();

function Declaration(){
    console.log('function declaration is called');
}

// Calling the function after its definition
Declaration();

Function Expression

A function expression involves defining a function as part of an expression. This usually means assigning a function to a variable.

Characteristics of Function Expressions:

Assigned to Variables: Function expressions are typically assigned to a variable.
Not Hoisted: Function expressions are not hoisted, meaning they can only be accessed after their definition.
Use Cases: Function expressions are often used when you need to pass a function as an argument to another function or when you want to define functions conditionally.

// Trying to call the function before its definition will result in an error
expression(); // Will give an error

// Defining the function as a function expression
const expression = function(){
    console.log('function expression');
};

// Calling the function after its definition
expression();

Key Differences

Syntax and Structure:

Function Declaration:function Declaration() { // code }
Function Expression: const expression = function() { // code };

Hoisting

Function Declaration: Hoisted to the top of the scope.
Function Expression: Not hoisted; must be defined before use.

Naming:

Function Declaration: Named functions.
Function Expression: Can be anonymous or named, but usually assigned to variables.

Use Cases

Function Declaration: Best for defining standard, reusable functions.
Function Expression: Useful for conditional definitions and passing functions as arguments.

⏰🚀Understanding setTimeout, setImmediate, process.nextTick, and setInterval in Node.js ⏳⏰👨‍💻

Raju Saha — Sat, 29 Jun 2024 05:39:43 +0000

Asynchronous programming is a core concept in Node.js, enabling it to handle I/O-bound tasks efficiently. Understanding the timing functions setTimeout, setImmediate, process.nextTick, and setInterval is crucial for writing performant and bug-free Node.js applications. In this post, we'll explore how these functions work and when to use them.

setTimeout
setTimeout() function in node.js or javascript is used
i. if you want to call it after a certain delay of time or simulate the function for a certain time.
Points to remember:
i. Minimum Delay is One milliseconds
ii. Delay are not guaranteed coz of the events loop

(()=>{
    let stockPrice=1000;
    console.log(`Stock Price: ${stockPrice}`);
    setTimeout(()=>{
        console.log(`Stock Price: ${stockPrice+10} after 5 seconds`)
    },5000)
})();

/*Output
Stock Price: 1000
Stock Price: 1010 after 5 seconds
*/

setImmediate
setImmediateexecutes a callback on the next iteration of the event loop after the current poll phase completes.
Uses Cases:
i. to execute a function after the current I/O event callback.
ii. to ensure a function runs after an async function
Points to remember :
i. executes always after the current poll phase
ii. Not guaranteed to run before 0ms of setTimeout

(()=>{
    let stockPrice=1000;
    console.log(`Stock Price: ${stockPrice}`);
    setTimeout(()=>{
        console.log(`Stock Price: ${stockPrice+10}`)
    },0)
    setImmediate(()=>{
        console.log('Stock sales increase after increase in Price')
    })
})();

/* Output
Stock Price: 1000
Stock Price: 1010
Stock sales increase after increase in Price
*/

process.nextTick
process.nextTick schedules a callback to be invoked in the same phase of the event loop, before the next I/O event.
Use Cases:
i. Avoiding long-running operations within a single event loop tick.
Points to remember:
i. Executes before any I/O events or timers.
ii. Can starve the event loop if used excessively.
iii. It will always execute before setTimeout and setImmediate.

(()=>{
    let stockPrice=1000;
    console.log(`Stock Price: ${stockPrice}`);
    setTimeout(()=>{
        console.log(`Stock Price: ${stockPrice+10}`)
    },0)
    setImmediate(()=>{
        console.log('Stock sales increase after increase in Price')
    })
    process.nextTick(()=>{
        console.log(`Stock Price Opening for Day: ${stockPrice+2}`)
    })
})();

/* Output
Stock Price: 1000
Stock Price Opening for Day: 1002
Stock Price: 1010
Stock sales increase after increase in Price
*/

setInterval
setIntervalis used to run a function after a particular interval of time
Uses Cases :
i. Repeatedly executing a task at regular intervals.
ii. Creating polling mechanisms.
Points to remember:
i. Interval duration is not guaranteed.
ii. Can cause memory leaks if not cleared properly.
iii. Always use its twin function clearIntervalor it can run for infinite time

(()=>{
    let time=1;
    let stockPrice=1000;
    console.log(`Stock Price: ${stockPrice}`);
    setTimeout(()=>{
        console.log(`Stock Price Increased: ${stockPrice+10} `)
    },5000)
    let timeOut=setInterval(()=>{
        console.log(`${time++} second`)
        if(time===5){
            clearInterval(timeOut)
        }
    },1000)
})();

/* Run the above code to check the actual output
Stock Price: 1000
1 second
2 second
3 second
4 second
Stock Price Increased: 1010 
*/

Conclusion

Understanding the nuances of setTimeout, setImmediate, process.nextTick, and setInterval is key to mastering asynchronous programming in Node.js. Each function serves a specific purpose and choosing the right one can significantly impact the performance and behavior of your application. Experiment with these functions to see their effects in different scenarios and improve your asynchronous code handling.

For more information go through the below link
Understanding process.nextTick()
Understanding setImmediate()
Discover Javascript timers

The Lifecycle of an HTML Page: Key Events to Know

Raju Saha — Sat, 29 Jun 2024 03:09:35 +0000

Understanding the lifecycle of an HTML page is crucial for building efficient and responsive web applications. There are three main events that play a significant role in the lifecycle of an HTML page:

DOMContentLoaded
load
beforeunload/unload

DOMContentLoaded

The DOMContentLoaded event is fired when the HTML document has been fully loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This event is useful for setting up the initial UI state and interacting with the DOM elements since the DOM tree is now fully constructed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOMContentLoaded</title>
    <script>
        function domReady(){        
            const img=document.getElementById("naruto");
            alert(`Image width is ${img.offsetWidth} X ${img.offsetHeight}`);
            //Try multiple time hard refresh as if the image is cache it will show the actual size of the image else if not cached and you are loading for first time then it will show as 0x0
        }
        document.addEventListener("DOMContentLoaded",domReady);
        // DOMContentLoaded is always happen on document not on window unlike window.load
    </script>
</head>
<body>
    <main>
        <section>
            <img src="https://www.cartoonbucket.com/wp-content/uploads/2017/04/Naruto-Angry.png?speed=1&cache=0" alt="naruto" id="naruto">
        </section>
    </main>
</body>
</html>

If there is more script tag then DOMContentLoaded waits for it to load as the script can be used to modify some elements but if the script is async or defer it doesn't wait for it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
          alert("DOM ready!");
        });
      </script>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

      <script>
        alert("Library loaded, inline script executed");
      </script>
</head>
<body>

</body>
</html>

2.load

The load event is fired when the whole page, including all dependent resources such as stylesheets and images, has loaded. This is useful for actions that require the entire page to be fully loaded.

3.beforeunload

The beforeunload event is fired when the window, the document, and its resources are about to be unloaded. This event is useful for showing a confirmation dialog before the user leaves the page, which can prevent data loss. The unload event is fired when the page is being unloaded, but it doesn't allow you to cancel the unloading process.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>load & beforeunload</title>
    <script>
        function domLoaded(){        
            const img=document.getElementById("naruto");
            alert(`Image width is ${img.offsetWidth} X ${img.offsetHeight}`);
        }
        window.addEventListener("load",domLoaded);
    </script>
    <script>
        window.addEventListener("beforeunload", (event) => {
                event.returnValue = "DATA NOT SAVED";
        });
       /* This will pop up a message "This page is asking you to confirm
          that you want to leave — information you’ve entered may not be saved." 
          But the message will be dependent upon the browser and it can be changed.
       */
    </script>
</head>
<body>
    <main>
        <section>
            <img src="https://www.cartoonbucket.com/wp-content/uploads/2017/04/Naruto-Angry.png?speed=1&cache=0" alt="naruto" id="naruto">
        </section>
    </main>
</body>
</html>

4.unload

The unload event on window triggers when the user is finally leaving, in the handler we can only do simple things that do not involve delays or asking a user. Because of that limitation, it’s rarely used. We can send out a network request with navigator.sendBeacon.

For more information on the above topic please go through the below links
Page: DOMContentLoaded, load, beforeunload, unload
Document: DOMContentLoaded event
Window: load event
BeforeUnloadEvent

Feel free to share your thoughts or ask questions in the comments below! Happy coding!

DEV Community: Raju Saha

Level Up Your JavaScript: The Power of Higher-Order Functions

What are Higher-Order Functions?

Benefits of HOFs:

Popular HOFs in JavaScript

Examples

Remember

Unveiling the Magic of Generator Functions in JavaScript

What are Generator Functions?

Syntax Breakdown:

Controlling the Flow: The .next() Method

Applications of Generator Functions:

Exciting New Features in ECMAScript 2024 : In-Place Resizable ArrayBuffers and Enhanced SharedArrayBuffers 🚀

In-Place Resizable ArrayBuffers

New Constructor and Methods

ArrayBuffer.prototype.transfer

SharedArrayBuffer Enhancements

New Constructor and Methods

New Feature in ECMAScript 2024 - New Regular Expression Flag /v (.unicodeSets) 👨‍🎨

Unicode String Properties

String Literals in Character Classes

Set Operations for Character Classes

Improved Matching with /i and Negated Unicode Property Escapes

Conclusion

New Feature in ECMAScript 2024 - Promise.withResolvers()

Promise.withResolvers()

Regular Promise

Introducing Promise.withResolvers()

Key Differences and Benefits

Conclusion

Exciting New Features in ECMAScript 2024 - groupBy() 🎗️

Grouping synchronously iterable

Demystifying the Ellipsis (...): Spread Operator vs Rest Operator in JavaScript

Mastering Binary Search in JavaScript Part I: Iterative, Recursive. 🚀🦾

Introduction

Understanding Binary Search

Implementation: Iterative Approach

Implementation: Recursive Approach

Choosing the Approach

Problem I: Finding or Inserting an Element

Leet Code Problem: Finding index that sums to a target Using Javascript

function declarations vs function expressions in Javascript 🤔✌️

Function Declaration

Function Expression

Key Differences

⏰🚀Understanding setTimeout, setImmediate, process.nextTick, and setInterval in Node.js ⏳⏰👨‍💻

The Lifecycle of an HTML Page: Key Events to Know

Controlling the Flow: The `.next()` Method

Improved Matching with `/i` and Negated Unicode Property Escapes

Introducing `Promise.withResolvers()`