DEV Community: Arun Prakash Pandey

var vs let | let vs const

Arun Prakash Pandey — Mon, 27 Jul 2026 11:05:56 +0000

This post covers concepts related to the use of var,let and const keywords in ES6.
We will compare based on the below various properties like

scope
hoisting and accessibility
this
assignment and redeclaration
temporal dead zone and accessibility
error handling

Before jumping on to the applicable differences, let us first understand the meaning of "scope".

Scope

Scope of a 'variable' is the region of your program in which it is defined/accessible. And is generally defined using a block using braces({}).

NOTE: Scope is always associated with a declared identifier (such as a variable, a function, a class, or a parameter). It is not an independent entity; rather, it describes where that identifier is visible and can be accessed.

var is function-scoped & let is block-scoped

A variable declared using the 'var' keyword belongs to the entire function, even if declared inside a block.

function test() {
    if (true) {
        var x = 10;
    }

    console.log(x);
}

test();  // logs 10

let belongs to the nearest block ({}).

function test() {
    if (true) {
        let x = 10;
    }

    console.log(x);
}

test(); // gives ReferenceError: x is not defined

Global var becomes a property of globalThis

In browsers: whether you do var x = 10; OR globalThis.x = 10
both mean the same.
But if one does

let y = 20;
console.log(globalThis.y); // logs undefined

because it does not creates a property on the globalThis object.

If x was declared with var, it exists.
If it was declared with let, it doesn't.

Redeclaration

var allows redeclaration.

var a = 10;
var a = 20;

console.log(a); // logs 20

function example() {

    for (var i = 0; i < 5; i++) {
    }

    for (var i = 0; i < 10; i++) {
    }

}
// There is actually only one i variable. 
// Each loop simply resets it.

let does not allows redeclaration.

let a = 10;
let a = 20;
// gives SyntaxError

function example() {

    for (let i = 0; i < 5; i++) {
    }

    for (let i = 0; i < 10; i++) {
    }

}
// These are two different variables.
// Each loop gets it's own _i_

Hoisting

Hoisting is probably the most confusing for beginners. Legacy Js used only var which is accessible even before declaration and assignment. Like below code.

console.log(x); // logs undefined

var x = 5;

Because it behaves similar to the below code

var x; // initialize

console.log(x); // access

x = 5; // assignment

The declaration moves, the assignment stays where it is. As a result, we do not get any reference error.

However, later on we have let and const key words which assist with meaningful errors without returning undefined.

console.log(x);

let x = 5;
// ReferenceError: Cannot access 'x' before initialization

Why?

because the variable is placed in the Temporal Dead Zone (TDZ) until the declaration executes. Here, the variable exists in the memory but is not accessible for the code.
These have a number of benefits such as :

It provides block scope, making variables behave more intuitively.
It prevents accidental redeclarations.
It avoids the confusing behavior of var hoisting by enforcing the Temporal Dead Zone, so using a variable before its declaration results in a clear error instead of silently yielding undefined.

Thanks for reading, if you came this far, please mention your thoughts / suggestions in the comments.
Next article will cover optional chaining and short circuiting.

Under the hood of, JavaScript's Type Conversion

Arun Prakash Pandey — Fri, 17 Jul 2026 11:06:31 +0000

TLDR : This post discusses type conversion, wrapper objects, which seem to behave like primitive values but are actually objects. And later on the internals of the conversion rules followed by the language. Let's go through it carefully.

Explicit Type Conversion

JavaScript provides three functions for converting values explicitly.These return primitive values, not objects.

       1. Number(value)
       2. String(value)
       3. Boolean(value)

Example:

Number("3")      // 3
String(false)    // "false"
Boolean([])      // true

Number() : Converts a value to a number.

Number("42")      // 42
Number(true)      // 1
Number(false)     // 0
Number(null)      // 0
Number(undefined) // NaN
Number("abc")     // NaN

String() : Converts a value to a string.

String(42)        // "42"
String(true)      // "true"
String(null)      // "null"
String(undefined) // "undefined"

Boolean() : Converts a value to a boolean.

Boolean([])         // true
Boolean({})         // true
Boolean("0")        // true
Boolean("false")    // true

A special behaviour of boolean related to objects will be explained later.

Comparison with Number & String wrapper

new Number(5) === 5           //false
new String(0) === String(0)   //false

// because left side is an object; right side is a primitive

Comparison with Boolean wrapper

new Boolean(true)
new Number(10)
new String("abc")
// These return objects.
typeof new Boolean(false) // object

plaintext

So if you do

const isFalse = Boolean(0) // false
if(isFalse) // false


vs.

const isFalse = new Boolean(0) // {false}
if(isFalse) // true

plaintext

Why do the wrapper objects even exist?

because in the early days, Js wanted the primitives to have methods. To fulfill this requirement, the language had wrappers.

In modern JavaScript, primitives can't have methods. So, the engine optimizes this.

Why Should you not use new String(), new Number() OR new Boolean()?

const isFalsePrimitive = Boolean(0) ;
const isFalseObject = new Boolean(0);

if(isFalsePrimitive) //false
if(isFalseObject) // true

plaintext

Special Behaviour of Boolean

Because all objects are truthy, regardless of the value they wrap.

       if([])  //true ; arrays are also objects in Js
       if({})  //true

plaintext
So, try not to use it and avoid confusion.

Now, Moving to the Kryptonite of all the confusion built around conversion.

Explicit Conversions: Object to Primitive(Number, Boolean, String)

TLDR: During type coercion/conversion, the Js Engine asks itself in heart, I need a primitive value, which primitive (string, number, bigint, symbol, boolean) should I use?

The Js engine has 3 options to choose from, which are:

     1. should I convert it to string? // uses .toString()
     2. should I convert it to number? // uses .valueOf()
     3. Either string or number is acceptable.

     //when it can't convert // return TypeError

javascript

Steps for conversion

Before it is decided whether to convert to string first or not. The engine analyzes based on the "hint" given in the statement.
For example:

  //  1. here the hint is '' to convert to string 
         ''+10  //'10' 
  //  2. here the hint is Number()
         Number('123') + 10  // 133

Second step is to analyze and see after using toString() OR valueOf() the result is a primitive or not.
For example:

   // 1. Needs primitive type number >> use valueOf(), if 
   //    typeof result === number 
   //    then return result, else use toString() and return it

         Number({}) // final result NaN
         -->> converts to '[object Object]' because 
         -->> valueOf() conversion return {} which is not a number; so toString() prevails and gives
         -->> '[object Object]' which is string(primitive)
         -->> Number('[object Object]') is NaN

      // here hint is +
           {} + ''

           Parser sees:

               {}      // empty block

               +''     //  Unary plus

               Number("") // gives numeric 0

For Boolean, the engine only checks if the typeof argument === object, if yes returns true.

For Dates, the default preference is to return a String

Number(Date()) // 1789546456464 milli seconds
String(Date()) // Tue Jul 14... forced string conversion
Console.log(Date()) // Tue Jul 14... default

The Diagram

Need Primitive
       │
       ▼
Which Hint?
────────────────────────────
String?
        │
        ▼
  toString()
        │
 Primitive?
   │         │
 Yes        No
 │           ▼
Return    valueOf()
               │
          Primitive?
          │        │
         Yes      No
          │        ▼
       Return   TypeError

Next article will be based around the miscellaneous feaures of var vs let vs const keywords.

Global object in JS

Arun Prakash Pandey — Fri, 17 Jul 2026 08:53:32 +0000

About

Every JavaScript environment has one special object called the global object. It has features like: -

setTimeout
console
Math
Date
Array
JSON
parseInt

Conceptually, both the below code blocks are same.

// For Example:
console.log(Math.PI);
console.log(setTimeout);
console.log(Date);

globalObject.Math
globalObject.Date
globalObject.console

History

In the browser, it is called window.

window.Math === Math
// true

window.Date === Date
// true

window.console === console
// true

In a run time environment like Node, it is called global.

global.setTimeout
global.console
global.Buffer

However, in workers, it was called self.
So to make it less annoying,
ES20, introduced globalThis.

For Browsers, javascript globalThis === window // true javascript
For run time environments
```
globalThis === global
// true
```
For web workers
```
globalThis === self
// true
```

A lesser used feature of template litrals in Js

Arun Prakash Pandey — Tue, 14 Jul 2026 15:13:54 +0000

TLDR: another way of calling a function

This is about one of the more advanced ES6 features called Tagged Template Literals.

-> Normal Template Literal

Normally, a template literal just substitutes values.

const name = "John";
const age = 25;

const s = `My name is ${name} and I am ${age}.`;

console.log(s);
// My name is John and I am 25.

-> Tagged Template Literal

customFunction`My name is ${name} and I am ${age}.`

Notice: The function name is written immediately before the backticks and it is without the parenthesis.

customFunction(`My name is ${name}`) // not like this

So what?

Internally, it becomes something like:

customFunction(
    ["My name is ", " and I am ", "."], // first argument
    name,                               // second argument
    age                                 // third argument
);

The first argument contains an array of all the literal text.

["My name is ", " and I am ", "."]
And then the remaining arguments follow.

It is basically

function customFunction(strings, ...values) {
//any custom logic that is wished to be performed.   
// similar to the first argument, the second is also an array of the remaining arguments.

return {
        strings, // array of the literals
        values   // array of the values
    };
}

A showcase example:
Suppose we want to automatically uppercase the first interpolated value.

function upper(strings, ...values) {

    let result = "";
        result += strings[0];
        result += values[0].toUpperCase();

    return result;
}

const name = "John";


//Notice how we are calling the function
console.log(
    upper`Hello ${name}!`   
);

//Hello JOHN!

To be continued...

The curious case of mathematical precision & legacy JS vs ES6.

Arun Prakash Pandey — Tue, 14 Jul 2026 14:39:36 +0000

Troubles faced with precision

0.3 - 0.2 !== 0.2 - 0.1

because computers understand Base-2 i.e. binary. To store a decimal number, it must be converted to base.

The Problem:

The number 0.1 in decimal is a repeating fraction in binary.
0.1 in binary is 0.00011001100110011... repeating forever.
Because the computer can allocate a finite number of bits (the 52-bits out of 64, 1 bit (0 for positive, 1 for negative), and 11 bits for storing numbers to represent the numbers upto scale/power of 2) for this purpose, it eventually has to "cut off" the repeating fraction. It rounds it to the nearest representable binary value.

isNaN() vs Number.isNan()

console.log(Number.isNaN(undefined)); //from ES6
// false 
console.log(isNaN(undefined)) //global isNan() from old Js
// true

Explanation:

Number.isNaN() is a strict check. It does not perform any type coercion.
The global isNaN() function was created in the early days of JavaScript when the language was much more "forgiving." It doesn't check if the value is NaN; it performs type coercion.

charCodeAt() vs codePointAt()

This history:

JavaScript strings are encoded in UTF-16. When UTF-16 was designed, it was believed that 16 bits (65,536 values) would be enough to hold every character in every language.
As reality hits hard, it was not enough for supporting rare characters (like Emojis, historical scripts, complex mathematical symbols).

The Solution:

The system introduced Surrogate Pairs, by combining two 16-bit code units.

charCodeAt() //old Js
codePointAt() // ES6

To be continued...

REPL means Read, Evaluate, Print, Loop

Arun Prakash Pandey — Fri, 10 Jul 2026 06:07:36 +0000

Why oh why? 😂

Ever wondered, why undefined is logged whenever you're messing around within a Browser's Dev Tools or any other JS run time environment?
Then this is for you!!

node

Welcome to Node.js v22.22.2.

Type ".help" for more information.

> let x = 45;

undefined

> let y = 78

undefined

> x==456 || y==78

true

> console.log(x)

45

undefined

>

TLDR

The output received after evaluation.

The phenomena

The host environment prints the result of every expression.

expression : (x === 456 || y === 78)

prints the result true but no undefined was printed!

However, the statements like below do not return a value.
let x = 45; OR console.log(x)

the above statement did not return any value, causing "undefined" to be printed in the logs.

The cause

Because the host environment is in it's interactive mode.

First, understand that console.log() is not the main purpose here, it is a "side effect".
The main purpose is evaluation of the latest expression. Imagine the REPL environment effectively acting like this behind the scenes:

// 1. it takes your code string (input), 
// 2. evaluates it (via eval()), and 
// 3. returns the result

function executeInREPL(input) {  
  return eval(input);
}

So if you do console.log(x), it would print the value of "x" but since the evaluation did not "return" any value, "undefined" will be logged additionally.

So, the final cause is the result of evaluation.

Things you did not knew about JS- Part-1

Arun Prakash Pandey — Fri, 10 Jul 2026 05:35:39 +0000

When dinosaurs lived:

JavaScript's design was influenced by several programming languages: namely Scheme, Self, Java, C, Perl.

The core language does "NOT" includes:

Read keyboard input
Display output on a screen
Access the file system
Make HTTP requests
Manipulate web pages
Create windows or dialogs These capabilities are provided by the host environment.

Host Environment means the web browser, Or Node.js (a run time "environment").

Host environments provide I/O

Web Browser
- console.log()
- document
- window
- fetch()
- alert()
Node.js
- console.log()
- fs
- http
- process
- readline

Although console.log() is commonly used, it is not part of the ECMAScript specification. It is provided by browsers, Node.js, and other JavaScript environments.

The core language includes:

Numbers (Number, BigInt)
Text (String)
Booleans (Boolean)
Arrays (Array)
Objects (Object)
Sets (Set)
Maps (Map)
Dates (Date)
Regular expressions (RegExp)
Promises (Promise)
JSON
Math utilities (Math)

Most Common Uses

One of Node.js's most common uses is building web servers and APIs.
Node.js is also convenient for writing command-line utilities that automate tasks such as:
- Reading and writing files
- Renaming or organizing files
- Processing CSV or JSON data
- Running build scripts similar to python
- Automating deployments
- Call REST APIs (fetch, http, https)

To be continued...

Things about sorting you need to know

Arun Prakash Pandey — Fri, 03 Jul 2026 17:29:06 +0000

We've all come across various sorting algorithms like bubble sort, merge sort etc whether being new or experienced in programming but sometimes the default sorting is not enough & requires a little tune up, then you need to implement a custom comparison.

This post explores a fundamental property of comparator functions. You'll encounter it whenever you write a custom comparator in JavaScript, especially after discovering that Array.prototype.sort() sorts values lexicographically by default or while solving coding problems on LeetCode for priority queues.
For instance,

//lexicographic comparison converts the values to strings and
 then compares
[10, 2, 5].sort();
// [10, 2, 5] 

//comparator here uses numerical value
[10, 2, 5].sort((a, b) => a - b);
// [2, 5, 10]

The Rule Every Comparator Follows

This is mainly about the underlying comparison principle used when comparing two values and deciding which one to place first and which one to place later.

The comparator decides the relative placement of two values, by

using a 'a certain custom comparison logic' and
communicating that ordering by returning a negative number, zero, or a positive number.

A comparator returns:

a negative value if a should come before b
zero if they are considered equal
positive value if a should come after b

Sorting algorithms do not generally subtract values. However,
Using a - b is simply a convenient implementation for numbers because subtraction naturally produces the required sign.
For an array of objects:

[
  { age: 54, height: 173 },
  { age: 23, height: 180 }
]

Comparison based on age

(a, b) => {
    if (a.age < b.age) return -1;
    if (a.age > b.age) return 1;
    return 0;
}

Comparison based on height

(a, b) => {
    if (a.height < b.height) return -1;
    if (a.height > b.height) return 1;
    return 0;
}

However, the above comparison can be done like this as well:

(a, b) => a.height - b.height;

This works because if a.height < b.height, the subtraction produces a negative result,

indicating that a should be placed before b.

Likewise, a positive result places a **after** b, and
0 means the two values are considered equal for sorting purposes.

Thoughts on implementing a custom Priority Queue in TS

Arun Prakash Pandey — Tue, 16 Jun 2026 07:48:03 +0000

LC 1046

My two cents:

Each push and pop requires a rearrangement of the existing elements, it's almost like the priority queue is a living organism which evolves / devolves it self to maintain the order of the elements.
Swap, BubbleUp, & BubbleDown are the methods doing the main lifting. Here, swap is the simple swap operation
const temp: T = this.heap[i]; this.heap[i] = this.heap[j]; this.heap[j] = temp
The this.compare dependency injection is the soul of the code here. It is the same deciding factor which is used in sorting elements in an array. number < 0, number = 0 & number > 0
where number is the result of a-b or b-a.

bubbleUp and bubbleDown ensure the rearrangement which is required to maintain the order of the elements,
bubbleDown refers to the Pop operation, and bubbleUp refers to the push operation. This is because how they are implemented in the custom heap inside the CustomPriorityQueue class.

Complexity

Time complexity: O(N * log(N)); explanation : Push, Pop has log(N) and Stones array traversal has N.
Space complexity: O(N) for additional priority queue.

Code

function lastStoneWeight(stones: number[]): number {
    const PQ = new CustomPriorityQueue<number>((a, b) => b-a);
    for (let i of stones) {
        PQ.push(i);
    }
    while(PQ.size() > 1){
        const y: number = PQ.pop();
        const x: number = PQ.pop();
        if(y>x){
            PQ.push(y-x);
        }
    }
    // console.log(PQ);
    return PQ.isEmpty() ? 0 : PQ.peak();
};

class CustomPriorityQueue<T> {
    private heap: T[] = [];
    private compare: ((a: T, b: T) => number);

    constructor(compare: (a: T, b: T) => number) {
        this.compare = compare
        // this.heap = [];
    }

    public size(): number {
        return this.heap.length
    }
    public isEmpty(): boolean {
        return this.size() === 0;
    }
    public peak(): T | undefined {
        return this.heap[0]
    }
    private swap(i: number, j: number): void {
        const temp: T = this.heap[i];
        this.heap[i] = this.heap[j];
        this.heap[j] = temp
    }
    public push(value: T): void {
        this.heap.push(value);
        this.bubbleUp(this.size() - 1);
    }
    private bubbleUp(index: number): void {
        while (index > 0) {
            let parentIndex: number = Math.floor((index - 1) / 2);
            if (this.compare(this.heap[parentIndex], this.heap[index]) < 0) break;
            this.swap(parentIndex, index);
            index = parentIndex
        }
    }
    public pop(): T | undefined {
        if (this.isEmpty()) return undefined;
        const top: T = this.heap[0];
        const bottom: T = this.heap.pop();
        if (!this.isEmpty() && bottom !== undefined) {
            this.heap[0] = bottom;
            this.bubbleDown(0);
        }
        return top;
    }
    private bubbleDown(index: number): void {
        const length: number = this.size();
        while (true) {
            let leftChildIndex: number = 2 * index + 1;
            let rightChildIndex: number = 2 * index + 2
            let indexOfSmallestOrLargest: number = index;

            if (leftChildIndex < length && this.compare(this.heap[leftChildIndex], this.heap[indexOfSmallestOrLargest]) < 0) {
                indexOfSmallestOrLargest = leftChildIndex;
            }
            if (rightChildIndex < length && this.compare(this.heap[rightChildIndex], this.heap[indexOfSmallestOrLargest]) < 0) {
                indexOfSmallestOrLargest = rightChildIndex;
            }
            if (indexOfSmallestOrLargest === index) break;

            this.swap(index, indexOfSmallestOrLargest);
            index = indexOfSmallestOrLargest
        }
    }

}

What happened when I used the Web Speech API?

Arun Prakash Pandey — Sun, 12 Oct 2025 11:16:55 +0000

Behind the scene : The Goal...

I wanted to make a web app for my personal use, which involved

Continuously listen to the user’s speech
Convert it to text in real-time
Track the frequency of a specific word (e.g., “Shiv”)
Display that count on screen and store it locally

Simple idea. Surprisingly tricky to implement.

Expectations vs Reality

The app technically worked using the Web Speech API. It listened, transcribed, and returned results. However, instead of processing each word as it was spoken, it:

Listened to full chunks of speech
Waited for pauses or silence
Then returned a batch of words all at once

Even with { continuous: true }, the speech recognition didn’t behave the way I expected — no real-time, word-by-word updates.

Findings

It is not reliable for low-latency, high-frequency word detection

The Web Speech API buffers audio and processes it after short silences.
It often fails to keep up with fast, continuous speech.
Repeating the same word (e.g., "Shiv Shiv Shiv Shiv Shiv") often causes the recognizer to combine or ignore duplicates.

Solution

Stream Audio → Transcribe → Return Text

Use a Cloud-Based Speech-to-Text API
Run an OpenAI whisper STT model on a server locally.
Stream the voice data using a websocket to the backend.
Backend transcribes the speech and sends reponse to the browser.

Result

Understood the limitations of the web speech api and will work on the project with a fresh start.

Install node js ubuntu

Arun Prakash Pandey — Sun, 08 Oct 2023 10:30:29 +0000

This is a guide to installing node js on a Ubuntu machine. You can keep multiple versions of node simultaneously and switch between them as per the requirement.
Follow the below steps for installation :

Run the command ensuring your system is up to date.

sudo apt update

To install the latest stable version, run the command

sudo snap install node --classic

or Visit the Official Snap website to see the list of available versions.

To confirm the installed version of node, run the command

node -v

In case you wish to have more than one version of node installed. Run the command

nvm install v19.9.0

Here v19.9.0 is used as an example and can be replaced by a version of your choice!

To see all the available versions, use the command

nvm list-remote

To see the list of node versions that are installed on your pc, run the command

nvm ls

A similar result to the below image will appear.

To switch between the versions of node, run the command

nvm use v19.9.0

Here v19.9.0 can be replaced with any other version of node that is installed on the system.

Thanks for reading this. I hope this was helpful. Any comments or reactions will be wholeheartedly appreciated.

Updating Discord on Ubuntu

Arun Prakash Pandey — Fri, 06 Oct 2023 11:35:06 +0000

The Discord app does not get updated automatically. Instead, a copy of .deb file is downloaded and the update needs to be installed manually. If you have come across this image

Follow the below simple easy steps :

Download the .deb file
Go to the downloads folder and open the terminal. This is to ensure that you have changed your present working directory!
Type the command sudo apt install ./ make sure to include the .deb file after ./ as shown in the below image.
Hit Enter and it's done. You should see the below result after Hitting enter.