Forem: Vijay Pagare

For vs. While: Choosing Your Weapon in DSA

Vijay Pagare — Tue, 14 Apr 2026 18:32:20 +0000

In Data Structures and Algorithms (DSA), the choice between a for loop and a while loop isn't just about syntax—it’s about intent. While both can often achieve the same result, choosing the wrong one can lead to "logic friction," forcing you to use messy boolean flags and complex if-else trees.

The Fundamental Distinction

for loops are for Iterating: You use them when you want to visit every element in a collection uniformly. The index moves automatically, and the logic applied to the first element is usually the same logic applied to the last.
while loops are for Consuming: You use them when the data needs to be processed in phases or variable chunks. You control exactly when the pointer moves, allowing you to "stay" on an index until a certain condition is satisfied.

When to use `while` (The "Consumption" Model)

In many DSA problems, specifically Intervals, Two-Pointer, and Sliding Window, the while loop is superior because it allows for a "Stage-Based" architecture.

1. Multi-Phase Problems

If an algorithm has a "Before, During, and After" structure, three sequential while loops are cleaner than one for loop with multiple if statements.

Example (Insert Interval):
1. while intervals end before the new one starts $\rightarrow$ Push to output.
2. while intervals overlap $\rightarrow$ Merge into a single unit.
3. while intervals remain $\rightarrow$ Push the rest.

2. Variable Step Sizes

Use while when you don't know how many elements you will "consume" in a single iteration. If you need to skip 3 elements in one scenario and 0 in another, manual control over the index $i$ prevents "off-by-one" errors.

3. State Management

If you find yourself creating boolean flags (e.g., let isMerged = false) just to manage logic inside a for loop, it’s a signal to switch to while. The while condition itself acts as the state manager.

When to use `for` (The "Uniform" Model)

The for loop is your "Gold Standard" when the operation is predictable and independent.

1. Fixed Range Iteration

When you know exactly how many times you need to run (e.g., 0 to n), the for loop is more concise and less prone to infinite loop bugs (since the increment is built into the header).

2. Filtering and Mapping

If you are transforming every element in an array or searching for a single value, a for loop (or for...of) keeps the code readable and idiomatic.

3. Early Return Logic

for loops are excellent for "Search and Destroy" missions. If you find what you're looking for, you can break or return immediately.

Summary Table: Which one to pick?

Feature	`for` Loop	`while` Loop
Mental Model	"Look at everything"	"Process until done"
Pointer Control	Automatic ($i++$)	Manual (you decide when to move)
Best For	Arrays, Strings, Fixed Ranges	Intervals, Two-Pointer, Linked Lists
Complexity	High readability for simple tasks	High clarity for multi-stage logic

Final Insight

Stop thinking about "traversing the array" and start thinking about "clearing the table." If you can clear the table in one sweep, use for. If you need to clear it in stages—first the plates, then the silverware—use while.

Common mistake to avoid while loading a file synchronously using script tag

Vijay Pagare — Fri, 19 Jul 2024 15:06:09 +0000

You might think that loading a script synchronously would make the next line of code execute after the script has downloaded, right? But that's not what synchronous loading of javascript file means. The confusion arises when you're comparing async vs sync vs defer strategies of loading a particular file.

More on loading a javascript file in async vs sync vs defer manner at the end of the post.

Here we first talk w.r.t code execution. To execute the lines of code after the script has downloaded successfully, you can use onload attribute on script tag. Refer the code snippet below:

<html>

<head>
    <title>Sync Script Tag</title>
</head>

<body>
    <h1>Load script sync.</h1>
</body>
<script>
    function  afterLoad() {        
        console.log('script loaded successfully.') // executes after script has loaded   
    }    
    function  sync_load()  {        
        console.log('sync_load...')         
        var  s  =  document.createElement('script');        
        s.type  =  'text/javascript';        
        s.async  =  false; // load synchronously       
        s.onload  =  afterLoad;        
        s.src  =  "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js";        
        var  x  =  document.getElementsByTagName('script')[0];        
        x.parentNode.insertBefore(s,  x);            
    }    
    console.log('JS entry')     
    sync_load();    
    console.log('next tick') // this executes before after_load 
</script>

</html>

Output:

Now, coming back to async vs sync vs defer strategy, please refer to the image below via stackoverflow:

In this case, the difference between async vs sync comes into play w.r.t parsing HTML file. Remember that!

Happy coding ✨

Event Listeners and Anchor Tag

Vijay Pagare — Fri, 05 Jul 2024 14:14:46 +0000

Question:

When does the anchor tag redirection happen given that multiple event listeners are attached to it?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event listeners and Anchor tag</title>
</head>
<body>
    <a id="demo" onclick="inlineHandler(event)" href="https://www.google.com">link demo</a>
</body>

<script>
    const inlineHandler = (e) => {
        console.log('inline Handler');
        setTimeout(()=> {
            console.log('This will not get executed as redirection would have been occurred by then.');
        }, 1000);
    }

    const link = document.getElementById('demo');

    link.addEventListener('click', (e) => {
        console.log('event listener 1');
    })

    link.addEventListener('click', (e) => {
        console.log('event listener 2');
        // e.preventDefault();
    })

    link.addEventListener('click', (e) => {
        console.log('event listener 3');
    })
</script>

</html>

Learnings

Inline handler always gets executed first.
Event listeners (for the same element) are handled in the order they are written.
Anchor tag redirection happens after the execution of all event listeners.
If any of the event listener triggers preventDefault (irrespective of the order) then redirection won't happen.

Use case: Trigger analytics event on anchor tag link click.

I'll leave the guesswork for async code upto you. For any doubts or discussions, please feel free to comment. Thanks!

Generating Taproot Wallet Address using bitcoinjs-lib

Vijay Pagare — Sat, 25 May 2024 12:07:21 +0000

Taproot wallet address generation using Node.js.

const ecc = require('tiny-secp256k1')
const { BIP32Factory } = require('bip32')
const bip32 = BIP32Factory(ecc)
const bip39 = require('bip39')
const bitcoin = require('bitcoinjs-lib')

const path = `m/86'/0'/0'/0/0`; // Path to first child of receiving wallet on first account
bitcoin.initEccLib(ecc);

let mnemonic = bip39.generateMnemonic()
const seed = bip39.mnemonicToSeedSync(mnemonic)
let rootKey = bip32.fromSeed(seed)

const childNode = rootKey.derivePath(path);
let node = childNode.derive(0).derive(0);

const toXOnly = pubKey => (pubKey.length === 32 ? pubKey : pubKey.slice(1, 33));

const childNodeXOnlyPubkey = toXOnly(childNode.publicKey);

const internalPubkey = childNodeXOnlyPubkey;

const { address, output } = bitcoin.payments.p2tr({
    internalPubkey
});

console.log(`
Wallet generated:
- Taproot Address: ${address},
- Key: ${node.toWIF()}, 
- Mnemonic: ${mnemonic}    
`)

Reference | Code on Github