DEV Community: Rhitam Chaudhury

Efficient Techniques for Chunking Arrays in JavaScript: A Performance Comparison

Rhitam Chaudhury — Sat, 06 Jul 2024 18:46:00 +0000

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

Initial Setup:

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.

Detailed Breakdown:

Initialization: A result array res is initialized to hold the chunks.
Looping: A for loop iterates over the array with a step size equal to the chunk size.
Slicing: Within each iteration, a sub-array is created using slice and added to res.
Return: After the loop completes, the function returns the result array containing all chunks.

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.

Detailed Breakdown:

Validation: The function checks if the chunk size is valid.
Reducer Function: The reduce method iterates over the array. For each element, it checks if the index is a multiple of the chunk size.
Slicing: When the index is a multiple of the chunk size, it slices the array and pushes the sub-array into the accumulator.
Return: The accumulator containing the chunked arrays is returned.

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.

Detailed Breakdown:

Initialization: Create an array with the number of chunks needed.
Mapping: Use map to iterate over the new array.
Splicing: Within each iteration, use splice to remove and collect chunks from the original array.
Return: The resulting array of chunks is returned.

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.

Detailed Breakdown:

Base Case: If the array is empty, return an empty array.
Slicing: Split the array into the head (first chunk) and the tail (remaining elements).
Recursion: Recursively process the tail and concatenate the results with the head.
Return: The concatenated result is returned.

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.

Recommendations

Performance: For optimal performance, use the splice or reduce methods.
Readability: The recursive method offers more readability and elegance, but at the cost of performance.
Flexibility: The for loop method is straightforward and easy to understand, suitable for simple use cases.

Thank you for reading!

Version Control with Git and GitHub: The Importance and Effective Usage

Rhitam Chaudhury — Sat, 06 Jul 2024 17:37:31 +0000

In the world of software development, managing code changes efficiently is crucial. Version control systems (VCS) like Git and platforms like GitHub have become indispensable tools for developers. In this blog, we will explore the importance of version control and provide a comprehensive guide on how to use Git and GitHub effectively.

Why Version Control is Important

1. Collaboration
Team Coordination: Multiple developers can work on the same project simultaneously without conflicts.
Code Review: Team members can review each other’s code, suggest improvements, and ensure code quality.
Track Contributions: Easily track who made specific changes, which is crucial for accountability and understanding the codebase history.

2. Backup and Restore
Automatic Backups: Every change is stored in the repository, providing a comprehensive backup of the project.
Restore Points: Easily revert to previous versions of the codebase if something goes wrong.

3. Version History
Detailed History: View a detailed history of the entire project, including what changes were made, when, and by whom.
Branching and Merging: Experiment with new features or fixes in isolated branches without affecting the main codebase.

4. Efficient Workflow
Continuous Integration: Integrate changes into the main codebase frequently to detect errors early.
Continuous Deployment: Automate the deployment process to release updates quickly and efficiently.

Getting Started with Git

Installation

Windows: Download and install Git from git-scm.com.
Mac: Install via Homebrew (brew install git).
Linux: Install using the package manager (sudo apt-get install git for Debian-based systems).

Configuration

Set up your username and email:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Basic Git Commands

Initialize a Repository: Start a new repository or clone an existing one.

git init
git clone https://github.com/username/repository.git

Check Status: View the current status of your working directory.

git status

Add Changes: Stage changes for commit.

git add filename
git add .

Commit Changes: Save changes to the local repository.

git commit -m "Your commit message"

View Log: See the commit history.

git log

Branching and Merging

Create a Branch Branching allows you to create a separate line of development.

git branch new-feature
git checkout new-feature

Merge a Branch Merging integrates changes from one branch into another.

git checkout main
git merge new-feature

Delete a Branch Clean up branches that are no longer needed.

git branch -d new-feature

Using GitHub

Repository Management
Create a Repository: On GitHub, click on “New” and fill out the repository details.
Clone a Repository: Copy the repository URL and use git clone to clone it locally.

Push and Pull

Push Changes: Upload local changes to the remote repository.

git push origin main

Pull Changes: Fetch and merge changes from the remote repository.

git pull origin main

Forking and Pull Requests

Fork a Repository: Create a personal copy of someone else's project.
Create a Pull Request: Propose changes to the original project by submitting a pull request.

Advanced Git Techniques

Rebasing Rebase re-applies commits on top of another base tip.

git checkout feature-branch
git rebase main

Stashing Temporarily save changes that are not ready to be committed.

git stash
git stash apply

Cherry-Picking Apply specific commits from one branch to another.

git cherry-pick commit-hash

Best Practices

Commit Often: Frequent commits with descriptive messages make it easier to track changes.
Use Branches: Isolate new features and bug fixes in separate branches.
Write Clear Commit Messages: Describe what changes were made and why.
Regularly Pull Changes: Keep your local repository up to date with the remote repository.
Code Reviews: Encourage team members to review each other’s code.

Version control with Git and GitHub is a fundamental skill for any software developer. It enhances collaboration, maintains a detailed history of changes, and ensures efficient workflow management. By following the guidelines and best practices outlined in this blog, you can effectively manage your code and contribute to projects with confidence.

Exploring Lesser-Known HTML Tags: Hidden Gems for Web Developers

Rhitam Chaudhury — Fri, 05 Jul 2024 20:15:50 +0000

As web developers, we often find ourselves relying on a set of familiar HTML tags to build our web pages. However, HTML is a rich language with many tags that can enhance your web projects in unique and powerful ways. In this blog post, we’ll delve into some of these lesser-known HTML tags, showcasing their utility and providing examples of how to use them.

<details> and <summary>

The tag creates a disclosure widget that users can open and close. Paired with the <summary> tag, it provides a heading that can be clicked to reveal or hide the content.

<details>
  <summary>More Information</summary>
  <p>This section contains additional information that is hidden by default.</p>
</details>

<dialog>

The tag is used to define a dialog box or window, making it easier to create modals and pop-ups without relying heavily on JavaScript.

<dialog id="myDialog">
  <p>This is a dialog box.</p>
  <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

<meter>

The tag represents a scalar measurement within a known range, such as disk usage or the relevance of a query result.

<label for="diskUsage">Disk usage:</label>
<meter id="diskUsage" value="0.6" min="0" max="1">60%</meter>

<progress>

Similar to <meter>, this tag displays the completion progress of a task, such as a download or file upload.

<label for="file">Downloading file:</label>
<progress id="file" value="32" max="100">32%</progress>

<template>

The tag is used to declare fragments of HTML that can be cloned and inserted in the document by JavaScript, without being rendered when the page loads.

<template id="myTemplate">
  <div class="myClass">This is a template content.</div>
</template>

<script>
  const template = document.getElementById('myTemplate').content.cloneNode(true);
  document.body.appendChild(template);
</script>

<datalist>

The tag provides an autocomplete feature on input elements, offering a list of predefined options to the user.

<label for="browsers">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

<output>

The tag represents the result of a calculation or user action.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" value="50"> +
  <input type="number" id="b" value="50">
  <output name="result" for="a b">100</output>
</form>

<abbr>

The tag is used to define abbreviations or acronyms, providing an expanded description on hover.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<time>

The tag represents a specific period in time, or a time on a 24-hour clock.

<p>The event will start at <time>14:00</time> on <time datetime="2024-07-10">July 10, 2024</time>.</p>

<fieldset> and <legend>

The tag is used to group related elements within a form, and the tag provides a caption for the <fieldset>.

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>
</form>

<samp>

The tag is used to define sample output from a computer program.

<p>The result of the computation is: <samp>42</samp>.</p>

<var>

The tag is used to define a variable in a mathematical expression or programming context.

<p>The equation is <var>x</var> = <var>y</var> + 2.</p>

<address>

The tag is used to define contact information for the author or owner of a document or article.

<address>
  Written by John Doe.<br>
  Visit us at:<br>
  Example.com<br>
  Box 564, Disneyland<br>
  USA
</address>