DEV Community: Md Readwan

Enhancing React List Rendering: A Clean and Reusable Pattern

Md Readwan — Tue, 17 Sep 2024 19:00:09 +0000

As React developers, we've all encountered scenarios where we need to render lists of data. While .map() method works well, repeating the same logic every time render a list can become exhausting, and leads to code duplication. Fortunately, there's a cleaner, scalable way to handle this, using reusable component, higher order component, or custom hook.

In this article, I'll share an approach for improving list rendering in React, ensuring your code stays DRY, reusable, and easier to maintain.

Main Problem: Repetitive `.map()` Logic

Imagine you're building a dashboard for an e-commerce application. The dashboard includes several lists: recent orders, top-selling products, user comments, etc. You need to render each list using a .map() function. Here's a typical example:

const orders = [...]; // Array of order data

return (
  <>
    {orders.map((order, index) => (
      <OrderComponent key={index} data={order} />
    ))}
  </>
);

Now, you can see repeating the .map() logic for every list, cluttering your component with similar code. Here’s where reusable pattern can be handy.

Solution: A Reusable ListComponent

To avoid duplicating the .map() logic, we can create a reusable ListComponent that abstracts the mapping logic and allows us to render different components based on the data.

function ListComponent({ data, renderItem }) {
  return (
    <>
      {data.map((item, index) => renderItem(item, index))}
    </>
  );
}

Usage:

<ListComponent 
  data={orders} 
  renderItem={(order, index) => (
    <OrderComponent key={index} data={order} />
  )} 
/>

In this pattern:
renderItem: A function that defines how each item should be rendered

By passing a different renderItem function, we can reuse ListComponent for any list. This results in a clean, reusable component, reducing repetitive .map() logic.

More Flexibility: Higher-Order Component(HOC)

If multiple components need list rendering, let's take this pattern further by creating a HigherOrder Component. A HOC allows to enhance any component with additional functionality — in this case, list rendering.

function withListRendering(WrappedComponent) {
  return function ListWrapper({ data, ...props }) {
    return (
      <>
        {data.map((item, index) => (
          <WrappedComponent key={index} data={item} {...props} />
        ))}
      </>
    );
  };
}

Usage:

const EnhancedOrderComponent = withListRendering(OrderComponent);

// Now render the component with any data array
<EnhancedOrderComponent data={orders} />

By wrapping OrderComponent with the withListRendering HOC, we’ve automatically added list rendering behavior without modifying the original component. This pattern keeps code modular.

For Hook Lovers: Custom Hook for List Rendering

React hooks offer a functional way to encapsulate logic. If you prefer using hooks, here is an example of list rendering with a custom hook.

function useListRenderer(data, renderItem) {
  return data.map((item, index) => renderItem(item, index));
}

Usage:

function OrdersDashboard({ orders }) {
  const orderList = useListRenderer(orders, (order, index) => (
    <OrderComponent key={index} data={order} />
  ));

  return <>{orderList}</>;
}

This approach moves .map() logic into the hook, keep the rendering logic separate from the component’s structure. It’s another way to keep component lean and focused on presentation.

Real-World Scenario: An E-Commerce Dashboard

Let’s apply this pattern to a real-world scenario. Imagine you’re building an e-commerce admin dashboard where multiple lists of orders, products, reviews, etc need to be rendered.

Using the ListComponent approach, you could render a list of orders like this:

<ListComponent 
  data={orders} 
  renderItem={(order, index) => (
    <OrderComponent key={index} data={order} />
  )} 
/>

When we need to render a different list, such as a products, same ListComponent can be reused with different renderItem function:

<ListComponent 
  data={products} 
  renderItem={(product, index) => (
    <ProductComponent key={index} data={product} />
  )} 
/>

No need to rewrite the .map() logic — just reuse the ListComponent with different data and components. This makes codebase more maintainable as it grows.

Conclusion: Clean, Reusable, and Scalable Code

The reusable ListComponent pattern simplifies React list rendering by abstracting the repetitive .map() logic. Whether you prefer using the basic component approach, HOC, or custom hook, this pattern ensures code is clean and reusable.

Building a React component with multiple lists, consider using one of these patterns to keep components focused on presentation while separating the list logic outside.

What other reusable patterns have you found useful in React? Let me know in the comments! and finally thanks for reading

Understanding HTTP Status Codes: A Simple Guide with Real-Life Scenarios

Md Readwan — Wed, 28 Aug 2024 18:50:52 +0000

Here’s a breakdown of some common HTTP status codes, explained with simple, real-life scenarios.

1. 1xx: Informational Responses

These codes indicate that the server has received the request and is continuing to process it. These are mostly used in background communications between servers.

Example: 100 Continue

Scenario: You ask the barista if they have your favorite blend. The barista nods (like a 100 Continue) and starts preparing your order while you wait.

2. 2xx: Success

These codes mean that your request was successfully received, understood, and accepted.

Example: 200 OK

Scenario: You order a coffee, and the barista hands it to you with a smile, saying, "Here’s your coffee!" Everything went as expected.

Other Success Codes:

201 Created: Your custom coffee order is made for the first time.
202 Accepted: Your order is placed, and the barista acknowledges it, but the coffee isn’t ready yet.
203 Non-Authoritative Information: You order a coffee, and the barista serves it with an alternative recipe, not the one you initially wanted.
204 No Content: You place an order but change your mind before the barista starts. They acknowledge your decision—no coffee, no charge, and no further communication is needed.

3. 3xx: Redirection

These codes tell your browser that the resource you’re looking for has moved, and it should redirect you to a new location.

Example: 301 Moved Permanently

Scenario: Your favorite café has moved to a new location. A sign at the old location points you to the new spot down the street.

4. 4xx: Client Errors

These codes indicate that something is wrong with your request.

Example: 400 Bad Request

Scenario: You ask for something unclear, like "Give me the… you know, that thing…" The barista can’t fulfill your request because it doesn’t make sense.

Other Client Error Codes:

401 Unauthorized: You try to enter a VIP café area without showing your membership card. Access denied until you prove you’re allowed in.
402 Payment Required: You want your coffee, but you haven’t paid yet. Payment is required before you get your coffee.
403 Forbidden: Even with a VIP pass, you try to enter a staff-only area and are denied access. Your credentials are fine, but the area is strictly off-limits.
404 Not Found: You ask for a type of coffee that isn’t on the menu. The barista says, "Sorry, we don’t have that."
409 Conflict: You order two coffees, but your table only fits one cup. There’s a conflict in your request, so you need to resolve it before getting served.

5. 5xx: Server Errors

These codes indicate that the server encountered an error and couldn’t complete your request.

Example: 500 Internal Server Error

Scenario: You order a coffee, but the coffee machine breaks down. The barista apologizes and says they can’t fulfill your order because something went wrong.

Other Server Error Codes:

501 Not Implemented: You ask for a complex coffee that the café doesn’t know how to make. The barista simply says, "We don’t do that here."
502 Bad Gateway: The café relies on a supplier for coffee beans, but the supplier fails to deliver, so the café can’t make your coffee.
503 Service Unavailable: The café is too busy, and the barista tells you they can’t take more orders right now.
504 Gateway Timeout: The supplier is taking too long to deliver the coffee beans. Your order is pending, but there’s no sign of it being fulfilled soon.
509 Bandwidth Limit Exceeded: The café’s coffee machine is overloaded with orders, and it shuts down to cool off.

Conclusion

HTTP status codes help describe what happens when a request is on the web. Understanding these codes can be incredibly useful for developers. They provide insight into whether your request was successful, if there’s an issue with the request, or if something went wrong on the server’s side. By relating these codes to everyday café scenarios, you can more easily grasp what’s happening behind the scenes when browsing the internet!

Simplifying call, apply & bind in JavaScript

Md Readwan — Mon, 29 Jul 2024 05:47:34 +0000

JavaScript allows you to change the context (this value) of functions using call, apply, and bind. These methods might seem tricky at first, but with some simple examples and real-life analogies, you'll get the hang of them. Let's break them down.

The `call` Method

Think of call as a way to borrow a method from one object and use it with another object.

Real-Life Analogy

Imagine you have a smartphone app that checks your schedule. Your friend also has the same app but hasn't set up their schedule. You can lend your friend your app configuration temporarily so they can see how it works with their schedule.

Example

const person1 = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const person2 = {
  firstName: 'Jane',
  lastName: 'Smith'
};

person1.fullName.call(person2); // Outputs: Jane Smith

Here, person1 has a method to print their full name. Using call, person2 can borrow this method and print their own full name.

The `apply` Method

apply is similar to call, but it takes arguments as an array.

Real-Life Analogy

Imagine you're at a restaurant ordering food. Instead of telling the waiter each item individually, you hand over a list of items to the waiter.

Example

function sum(a, b) {
  console.log(a + b);
}

sum.apply(null, [5, 10]); // Outputs: 15

In this example, apply calls the sum function with the arguments 5 and 10 provided as an array.

The `bind` Method

bind creates a new function that, when called, has its this value set to the provided value. It's like permanently lending your app configuration to your friend so they can use it whenever they want.

Real-Life Analogy

Suppose you have a special TV remote that only works with your TV. You can make a duplicate remote that works with your friend's TV permanently.

Example

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const retrieveX = module.getX;
console.log(retrieveX()); // Outputs: undefined (because 'this' is not module)

const boundGetX = retrieveX.bind(module);
console.log(boundGetX()); // Outputs: 42

In this example, bind creates a new function boundGetX that always uses module as its this value.

Practical Use Cases

1. Borrowing Methods

You can use call to borrow methods from other objects.

const person = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

const anotherPerson = {
  name: 'Bob'
};

person.greet.call(anotherPerson); // Outputs: Hello, Bob

2. Using `apply` for Math Functions

apply is useful for passing arrays to functions like Math.max.

const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers); 
console.log(max); // Outputs: 7

3. Pre-setting Function Arguments

bind can be used to create functions with preset arguments.

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // Outputs: 10

Here, bind creates a new function double where a is always 2, making it easy to double any number.

Conclusion

Understanding call, apply, and bind helps you control how functions are executed in JavaScript. They allow you to change the this value and pre-set arguments, making your code more flexible and reusable. By mastering these methods, you can write cleaner and more efficient JavaScript code.

Understanding Hoisting in JavaScript

Md Readwan — Fri, 26 Jul 2024 18:40:15 +0000

Hoisting is one of the fundamental concepts in JavaScript that often confuses new developers. However, once understood, it can greatly help in writing and debugging JavaScript code. In this article, we'll demystify hoisting, explain how it works, and provide examples to illustrate its effects.

What is Hoisting?

In JavaScript, hoisting is the behavior where variable and function declarations are moved, or "hoisted," to the top of their containing scope (either the global scope or function scope) during the compile phase. This means you can use variables and functions before they are actually declared in the code.

Hoisting Variables

Let’s start with variable hoisting. Consider the following code:

console.log(myVar); // Output: undefined
var myVar = 10;
console.log(myVar); // Output: 10

Despite the myVar variable being used before its declaration, no error occurs. Instead, undefined is logged to the console. This happens because the declaration of myVar is hoisted to the top of its scope, but its assignment remains in place. The code above is interpreted as:

var myVar;
console.log(myVar); // Output: undefined
myVar = 10;
console.log(myVar); // Output: 10

Hoisting Functions

Function declarations are also hoisted. Consider this example:

greet(); // Output: Hello!

function greet() {
  console.log('Hello!');
}

The greet function is called before its declaration, yet it works correctly. This is because the function declaration is hoisted to the top of its scope. The code is interpreted as:

function greet() {
  console.log('Hello!');
}

greet(); // Output: Hello!

Let and Const Declarations

With the introduction of ES6, let and const keywords provide block-scoped variables, which are not hoisted in the same way as var. However, their declarations are still hoisted, but they remain in a "temporal dead zone" (TDZ) from the start of the block until the declaration is encountered. Accessing them before the declaration results in a ReferenceError.

console.log(myLetVar); // ReferenceError: Cannot access 'myLetVar' before initialization
let myLetVar = 20;

console.log(myConstVar); // ReferenceError: Cannot access 'myConstVar' before initialization
const myConstVar = 30;

Practical Examples

Example 1: Variable Hoisting with `var`

function hoistExample() {
  console.log(message); // Output: undefined
  var message = 'Hoisting in JavaScript';
  console.log(message); // Output: Hoisting in JavaScript
}

hoistExample();

Example 2: Function Hoisting

hoistedFunction(); // Output: This function is hoisted!

function hoistedFunction() {
  console.log('This function is hoisted!');
}

Example 3: Temporal Dead Zone with `let` and `const`

function tdzExample() {
  console.log(tempVar); // ReferenceError: Cannot access 'tempVar' before initialization
  let tempVar = 'Temporal Dead Zone';
}

tdzExample();

Conclusion

Hoisting is a crucial concept to understand in JavaScript as it affects variable and function declarations. Remember:

Variable declarations (using var) and function declarations are hoisted to the top of their scope.
Variable initializations are not hoisted.
let and const declarations are hoisted but remain in a temporal dead zone until they are initialized.

By understanding hoisting, you can write more predictable and error-free code. Keep this concept in mind as you develop more complex JavaScript applications.

Understanding setTimeout and setInterval in JavaScript

Md Readwan — Tue, 16 Jul 2024 09:27:41 +0000

JavaScript provides several ways to handle timing events, and two of the most commonly used methods are setTimeout and setInterval. These functions allow you to schedule code execution after a specified amount of time or repeatedly at regular intervals. In this article, we'll explore how these functions work and provide practical examples to illustrate their usage.

`setTimeout`

The setTimeout function is used to execute a function or a piece of code once after a specified delay. The syntax for setTimeout is as follows:

setTimeout(function, delay, [arg1, arg2, ...]);

function: The function or code to execute.
delay: The time in milliseconds to wait before executing the function.
[arg1, arg2, ...]: Optional arguments to pass to the function when it is executed.

Example 1: Basic Usage

function sayHello() {
  console.log('Hello, World!');
}

setTimeout(sayHello, 2000); // Outputs "Hello, World!" after 2 seconds

In this example, the sayHello function is executed once after a 2-second delay.

Example 2: Passing Arguments

function greet(name) {
  console.log('Hello, ' + name + '!');
}

setTimeout(greet, 2000, 'Alice'); // Outputs "Hello, Alice!" after 2 seconds

Here, we pass the argument 'Alice' to the greet function, which is executed after a 2-second delay.

Example 3: Using Anonymous Functions

setTimeout(function() {
  console.log('This is an anonymous function!');
}, 3000); // Outputs "This is an anonymous function!" after 3 seconds

You can also use anonymous functions directly within setTimeout.

`setInterval`

The setInterval function is used to execute a function or a piece of code repeatedly at specified intervals. The syntax for setInterval is similar to setTimeout:

setInterval(function, interval, [arg1, arg2, ...]);

function: The function or code to execute.
interval: The time in milliseconds between each execution.
[arg1, arg2, ...]: Optional arguments to pass to the function each time it is executed.

Example 1: Basic Usage

function sayHello() {
  console.log('Hello, World!');
}

setInterval(sayHello, 1000); // Outputs "Hello, World!" every 1 second

In this example, the sayHello function is executed every second.

Example 2: Passing Arguments

function greet(name) {
  console.log('Hello, ' + name + '!');
}

setInterval(greet, 1000, 'Alice'); // Outputs "Hello, Alice!" every 1 second

Here, we pass the argument 'Alice' to the greet function, which is executed every second.

Example 3: Using Anonymous Functions

setInterval(function() {
  console.log('This is an anonymous function!');
}, 2000); // Outputs "This is an anonymous function!" every 2 seconds

You can use anonymous functions directly within setInterval as well.

Clearing Timers

Both setTimeout and setInterval return a timer ID, which can be used to clear the timers if needed. This is done using the clearTimeout and clearInterval functions, respectively.

Example: Clearing `setTimeout`

const timeoutId = setTimeout(function() {
  console.log('This will not run.');
}, 5000);

clearTimeout(timeoutId); // Cancels the timeout

Example: Clearing `setInterval`

const intervalId = setInterval(function() {
  console.log('This will run only once.');
}, 1000);

setTimeout(function() {
  clearInterval(intervalId); // Stops the interval after 3 seconds
}, 3000);

In this example, the clearInterval function is called after 3 seconds, stopping the repeated execution of the function.

Practical Use Cases

1. Debouncing with `setTimeout`

Debouncing is a technique to limit the rate at which a function is executed. For example, you can use setTimeout to debounce a search input field:

let timeoutId;

function debounceSearch(query) {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(function() {
    // Perform search operation
    console.log('Searching for:', query);
  }, 300);
}

document.getElementById('searchInput').addEventListener('input', function(event) {
  debounceSearch(event.target.value);
});

2. Creating a Simple Timer with `setInterval`

let seconds = 0;

function updateTimer() {
  seconds++;
  console.log('Timer:', seconds);
}

const timerId = setInterval(updateTimer, 1000);

// Stop the timer after 10 seconds
setTimeout(function() {
  clearInterval(timerId);
  console.log('Timer stopped');
}, 10000);

Conclusion

Understanding setTimeout and setInterval is essential for managing timed and repeated actions in JavaScript. These functions enable you to handle tasks like debouncing user input, creating timers, and running periodic updates. By mastering these tools, you can build more responsive and efficient web applications.

Let's Understand JavaScript Closures: A Fundamental Concept

Md Readwan — Tue, 09 Jul 2024 20:39:36 +0000

Closures are a powerful feature in JavaScript that allow functions to retain access to their lexical scope, even when the function is executed outside that scope. This can sound abstract, but with some simple examples, you'll see how closures can be both intuitive and incredibly useful in real-world applications.

What is a Closure?

A closure is created whenever a function is created - every function has an associated closure.
When a function is defined within another function, and the inner function retains access to the outer function’s variables. Essentially, a closure gives you access to an outer function’s scope from an inner function.

Here’s a simple definition:

Closure: A combination of a function and its lexical environment within which that function was declared.

Basic Example

Let’s start with a basic example to illustrate the concept of closures:

function outerFunction() {
  let outerVariable = 'I am from the outer function';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const myClosure = outerFunction();
myClosure();  // Outputs: I am from the outer function

In this example:

outerFunction contains a variable outerVariable and an inner function innerFunction.
innerFunction accesses outerVariable and logs it to the console.
outerFunction returns innerFunction, and we store it in myClosure.
When myClosure is called, it still has access to outerVariable even though outerFunction has finished executing. This is a closure in action.

Real-World Example: Creating Private Variables

Closures are often used to create private variables in JavaScript. Here’s an example of how you can use closures to encapsulate data and provide a controlled interface to interact with it:

function createCounter() {
  let count = 0;

  return {
    increment: function() {
      count++;
      console.log(count);
    },
    decrement: function() {
      count--;
      console.log(count);
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment(); // Outputs: 1
counter.increment(); // Outputs: 2
counter.decrement(); // Outputs: 1
console.log(counter.getCount()); // Outputs: 1

In this example:

createCounter function defines a variable count and returns an object with three methods: increment, decrement, and getCount.
The methods increment and decrement modify count, while getCount returns its current value.
The count variable is private to createCounter and cannot be accessed directly from outside. This encapsulation is made possible by closures.

Real-World Example: Delayed Execution

Closures are also useful for functions that need to remember the context in which they were created, such as setting up delayed execution with setTimeout:

function greet(name) {
  return function() {
    console.log('Hello, ' + name);
  };
}

const delayedGreeting = greet('Alice');
setTimeout(delayedGreeting, 2000); // Outputs: Hello, Alice after 2 seconds

In this example:

greet function returns another function that logs a greeting message.
delayedGreeting stores the returned function with the captured name variable.
setTimeout executes delayedGreeting after 2 seconds, and it still has access to name (Alice) due to the closure.

Conclusion

Closures are a fundamental concept in JavaScript that allow functions to access their lexical scope even after the outer function has finished executing. They enable powerful patterns such as data encapsulation, private variables, and delayed execution.

And Finally,

Please don’t hesitate to point out any mistakes in my writing and any errors in my logic.

I’m appreciative that you read my piece.

Let's do 3 Sum with JavaScript

Md Readwan — Sat, 06 Jul 2024 13:01:21 +0000

This problem is similar to the “Two Sum” problem, and how can we come up with an efficient solution just by making a small modification. After that, we will also give you a try of the code so that you can understand it well. So let’s get started.

First of all, let’s make sure that we understand the problem statement correctly. In this problem, we have given an array of integers, and we have to find out all the unique triplets such that their sum is equal to 0, and there is one more condition: we cannot choose the same index twice. It simply means that if we have chosen an index, we cannot use it again to find the total sum of 0.

So given all of these conditions, we have to find out all of the possible triplets. Let us look at our sample test cases. In our first test case [-1, 0, 1, 2, -1, -4], right now, what are some of the triplets that, when summed, will give us the total sum of 0. First of all, I can find a triplet of -1, -1, and 2. If we add all of them, we will get the sum 0, and similarly, we can get one more triplet that will be 0, 1, and -1. In this particular array, we have two unique triplets by which we can form the total sum as 0. right? So for this particular test case, these two triplets will be our answer.

In our next test case, we have [0, 1, 1], so this is the only triplet, and if we sum all of these elements, the sum will not be 0, right? So for this particular test case, an empty array will be the answer.

Now let us look at our third test case. we can see that once again we have an array [0, 0, 0], and all of its elements are zero. Now we know that it says that these elements cannot be duplicated, but if we notice, we are not duplicating the indices. correct? Only the element is duplicated, so even if two elements have the same value and they are at different indices, we can pick them, so one such triplet that can be formed will be 0 0, and 0, and if we add them all up, we get the total sum of 0.

So for this particular test, only this triplet will be answered.

I want to let you know that this problem is based on a similar problem, “Two Sum,” where we have given an array and have to find out two integers whose sum equals a target value. I want you to take a recap and realize what we did wrong with our original and what we did right. We spotted this array correctly, and as soon as we sort it, we get our array something like [-4, -1, -1, 0, 1, 2] and let us have to find out two values that sum up and give our target value of -3.

So what was the approach over here? We sorted the array, and then what did we do?

We took two pointers first in the beginning, and then at the very end, we summed both of these values, so my current sum will be -4 plus 2 and that is -2. Now since this target value is smaller than my sum, that means we have to pick a smaller number, and how did we pick a smaller number? We moved our right pointer one space backward, and that is how we will try to get the sum as -4 plus 1, and that will be -3 for our pair.

So just try to keep this in mind, and based upon this, we will build an efficient solution to our actual problem.

So once again, we have a sample array, and what did we do? First of all, we sorted it as soon as we found the array, and the array will look something like this: [-4, -1, -1, 0, 1, 2], and now we have to convert this problem to the two-sum problem.

So here is something that we can do. What we can do is pick our first element to be -4, so out of the triplet we get one value or we fix one value so that one of our values will be minus four, and we make a condition so that one of my values is -4, and what if the array that I’m remaining with is this entire array [-1, -1, 0, 1, 2]. right?

Now notice what our problem has reduced to: using this array, we can once again take a left pointer and a right pointer. correct? and we have one value that is fixed for now. Instead of finding the triplets, we have to find that pair plus this fixed value, and our total sum should be 0.

So we will apply the same approach as ours to some questions, and what we’re going to do is take the minor 4 value and then try to find a triplet such that when I add these three values, my total sum should be 0.

Just wait for a little while, and all of this will start making sense.

For this particular condition, when we choose our first value as -4, we will not find a triplet, so this part is done. Now try to understand that we took care of all the triplets that could start with -4 right now. we have to move ahead, so what do we do this time? we are going to choose -1 as our fixed value. That is the value at the first index, so we fix our value to -1, and then what is the array that I’m remaining with? We are remaining with only [-1, 0, 1, 2]. So we have an array over here.

So once again, our problem changes. Now the fixed value is -1, and once again, we will take two pointers left and right, and then we will try to come up with a pair plus this -1, and the sum should be 0.

This should give us some triplets, so we have a value of -1, and then what can we do? we can try to find a triplet of -1 and 2 that will be 0, and then if we move ahead, we will find one more triplet of -1 plus 0 and then 1. that is once again equal to 0. So I found two triplets, and one added gives us the sum as 0, which is correct.

I hope it has started to make a little bit of sense, so let us keep moving ahead.

This time I’m done with this -1 again, and if we see we have one more -1 for this time, I’m going to fix this value as my constant value. What is the array [0, 1, 2] that I’m remaining with? I am remaining with 0 1 and 2. So once again, my problem reduces to 0, 1, and 2, and I will take a left pointer and a right pointer, this is my fixed value, so once again, I will try to find a pair along with the sixth value and try to get the total reward of 0. This time I will get one more triplet, which is -1 plus 0 plus 1, and that is equal to 0. Just keep moving ahead now, so now I will fix my next value, which is 0, so I fix it, and what are the remaining values 1 and 2? So this is the new use case that I have to work with, and if we realize this, it will once again not give me any triplets. So while going through all of this, how many triplets did we find? we found this, this, and this, so there are three triplets. Since the problem asks for unique triplets, we can add all of these triplets to a function. All the duplicate values will just go away, and we cannot have duplicate elements left with our answer, and these will be our unique triplets.

const threeSum = function (nums) {
 const target = 0;
 nums = nums.sort((a, b) => a - b);
 let output = [];

 for (let i = 0; i < nums.length; i++) {
  let start = i + 1;
  let end = nums.length - 1;

  while (start < end) {
   let sum = nums[i] + nums[start] + nums[end];
   if (sum == target) {
    output.push([nums[i], nums[start], nums[end]]);
    start++;
    end--;
   } else if (sum < target) {
    start++;
   } else {
    end--;
   }
  }
 }

 // remove duplicate arrays
 const uniqueArrays = new Set(output.map(JSON.stringify));
 const result = Array.from(uniqueArrays, JSON.parse);
 return result;
};

let nums = [-1, 0, 1, 2, -1, -4];
console.log(threeSum(nums));

In conclusion, the problem at hand is to find unique triplets in an array such that their sum equals zero, with the constraint of not using the same index twice. To approach this efficiently, we draw parallels with the “Two Sum” problem, sorting the array and fixing one element at a time to transform the problem into finding pairs that sum up to a target value. By iteratively fixing elements and applying the two-pointer technique on the remaining array, we can identify unique triplets that satisfy the given conditions.

The key insight is to break down the problem into smaller subproblems, where each fixed element reduces the problem to finding pairs in the remaining array. This approach helps us avoid duplicate triplets and efficiently navigate through the array to identify all valid solutions.

By following this method and carefully handling edge cases, such as arrays with identical elements at different indices, we can find and accumulate unique triplets that meet the criteria. The final step involves ensuring uniqueness by eliminating duplicate triplets before presenting the solution.

Overall, this strategy optimizes the solution to the problem, providing a clear and systematic approach to finding unique triplets with a sum of zero in a given array.

And Finally,

Please don’t hesitate to point out any mistakes in my writing and any errors in my logic.

I’m appreciative that you read my piece.

Let's understand the differences: href="", href="#", and href="javascript:void(0)"

Md Readwan — Sat, 06 Jul 2024 12:51:46 +0000

Empty HREF: href=""

Using an empty href attribute (href="") reloads the current page. This is like clicking the refresh button of the browser.

href="#"

The href=”#” attribute makes the page scroll to the top. If you don’t want this, you can stop the behavior with JavaScript:

<a href=”#” onclick=”return false;”>Hey</a>
<!--! and there ane many ways with js to achive this -->
href="javascript:void(0)"

Sometimes you will see href="javascript:void(0);" inside an <a> tag. This makes a link that does nothing when clicked. Other ways to do this are:

href="javascript:{}"
href="javascript:null"

These links do nothing it’s best to avoid them.

href="#any_id"

The href="#any_id" attribute does nothing unless have an element with an ID of any_idon the page. By clicking the link will scroll to that element.
To avoid any scroll use a different id value that doesn't exist on the page.

Best Practices:
Use a Button or Span: If your link doesn’t navigate anywhere, you can use or instead of an <a> element as well as you can style these elements as needed using raw CSS or CSS framework.

Lastly, let’s summarize these

href="#" scrolls the current page to the top.
href="javascript:void(0)" does nothing.
href="#any_id" does nothing unless there is an element with the specific ID.

And finally,
I’m appreciative that you read my piece.

Chunking an Array in JavaScript: Four Ways Compared

Md Readwan — Sat, 06 Jul 2024 12:42:24 +0000

Chunking an array means splitting it into smaller arrays of a specified size. This is useful for data processing, pagination, and more. We’ll explore four methods to chunk an array and compare their performance.

First, let’s create an array of numbers from 1 to 10:

const arr = Array.from({ length: 10 }, (_, i) => i + 1);

Array.from() is used to generate an array with elements from 1 to 10.
Now, we’ll look at four ways to chunk this array.

Method 1: Using a For Loop

function chunkArr(arr, size) {
 let res = [];
 for (let i = 0; i < arr.length; i += size) {
 res.push(arr.slice(i, size + i));
 }
 return res;
}

console.time("for");
console.log(chunkArr(arr, 2));
console.timeEnd("for");

Output:

[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9, 10 ] ]
for: 4.363ms

Explanation: This function iterates through the array in steps of the specified chunk size. It slices the array at each step and adds the resulting sub-array to the result array (res). The performance measurement shows it took about 4.363 milliseconds.

Method 2: Using `Array.reduce()`

function chunkArr2(arr, size) {
 if (size <= 0) throw new Error('Chunk size must be a positive integer');
 return arr.reduce((acc, _, i) => {
 if (i % size === 0) acc.push(arr.slice(i, i + size));
 return acc;
 }, []);
}
console.time("reduce");
console.log(chunkArr2(arr, 2));
console.timeEnd("reduce");

Output:

[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9, 10 ] ]
reduce: 0.069ms

Explanation: Here Array.reduce() is used to build the chunked array. It checks if the current index is a multiple of the chunk size and slices the array accordingly. This method is significantly faster, taking only about 0.069 milliseconds.

Method 3: Using Array.splice()

let [list, chunkSize] = [arr, 2];
console.time('splice');
list = […Array(Math.ceil(list.length / chunkSize))].map(_ => list.splice(0, chunkSize));
console.timeEnd('splice');
console.log(list);

Output:

[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9, 10 ] ]
splice: 0.048ms

Explanation: This approach uses Array.splice() in combination with Array.map() to chunk the array. It creates a new array with the required number of chunks and uses splice() to remove and collect chunks from the original array. This method is also very fast, taking about 0.048 milliseconds.

Method 4: Recursive Approach

const chunk = function(array, size) {
 if (!array.length) {
 return [];
 }
 const head = array.slice(0, size);
 const tail = array.slice(size);
return [head, …chunk(tail, size)];
};

console.time(‘recursive’);
console.log(chunk(arr, 2));
console.timeEnd(‘recursive’);

Output:

[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9, 10 ] ]
recursive: 4.372ms

Explanation: This recursive method splits the array into the first chunk (head) and the remaining elements (tail). It then recursively processes the tail, concatenating the results. While more elegant, this method is slower than the reduce and splice methods, taking about 4.372 milliseconds.

Conclusion
All four methods successfully chunk the array into sub-arrays of the specified size. However, their performance varies significantly:

For Loop: 4.363ms
Reduce: 0.069ms
Splice: 0.048ms
Recursive: 4.372ms

The splice and reduce methods are the fastest, making them preferable for performance-critical applications. While functional, the for loop and recursive methods are slower and might be less suitable for large datasets.

Depending on your needs and readability preferences, you can choose a suitable method for chunking arrays in your JavaScript projects.

You can find more approach here

And Finally,
Please don’t hesitate to point out any mistakes in my writing and any errors in my logic.

I’m appreciative that you read my piece.

DEV Community: Md Readwan

Enhancing React List Rendering: A Clean and Reusable Pattern

Main Problem: Repetitive .map() Logic

Solution: A Reusable ListComponent

More Flexibility: Higher-Order Component(HOC)

For Hook Lovers: Custom Hook for List Rendering

Real-World Scenario: An E-Commerce Dashboard

Conclusion: Clean, Reusable, and Scalable Code

Understanding HTTP Status Codes: A Simple Guide with Real-Life Scenarios

1. 1xx: Informational Responses

2. 2xx: Success

3. 3xx: Redirection

4. 4xx: Client Errors

5. 5xx: Server Errors

Conclusion

Simplifying call, apply & bind in JavaScript

The call Method

Real-Life Analogy

Example

The apply Method

Real-Life Analogy

Example

The bind Method

Real-Life Analogy

Example

Practical Use Cases

1. Borrowing Methods

2. Using apply for Math Functions

3. Pre-setting Function Arguments

Conclusion

Understanding Hoisting in JavaScript

What is Hoisting?

Hoisting Variables

Hoisting Functions

Let and Const Declarations

Practical Examples

Example 1: Variable Hoisting with var

Example 2: Function Hoisting

Example 3: Temporal Dead Zone with let and const

Conclusion

Understanding setTimeout and setInterval in JavaScript

setTimeout

Example 1: Basic Usage

Example 2: Passing Arguments

Example 3: Using Anonymous Functions

setInterval

Example 1: Basic Usage

Example 2: Passing Arguments

Example 3: Using Anonymous Functions

Clearing Timers

Example: Clearing setTimeout

Example: Clearing setInterval

Practical Use Cases

1. Debouncing with setTimeout

2. Creating a Simple Timer with setInterval

Conclusion

Let's Understand JavaScript Closures: A Fundamental Concept

What is a Closure?

Basic Example

Real-World Example: Creating Private Variables

Real-World Example: Delayed Execution

Conclusion

And Finally,

Let's do 3 Sum with JavaScript

And Finally,

Let's understand the differences: href="", href="#", and href="javascript:void(0)"

Empty HREF: href=""

href="#"

href="#any_id"

Chunking an Array in JavaScript: Four Ways Compared

Method 1: Using a For Loop

Method 2: Using Array.reduce()

Main Problem: Repetitive `.map()` Logic

The `call` Method

The `apply` Method

The `bind` Method

2. Using `apply` for Math Functions

Example 1: Variable Hoisting with `var`

Example 3: Temporal Dead Zone with `let` and `const`

`setTimeout`

`setInterval`

Example: Clearing `setTimeout`

Example: Clearing `setInterval`

1. Debouncing with `setTimeout`

2. Creating a Simple Timer with `setInterval`

Method 2: Using `Array.reduce()`