JavaScript

workers

Anjanesh Lekshminarayanan — Fri, 14 Feb 2025 07:07:48 GMT

index.html :

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Workerstitle>
    <script src="main.js">script>
head>
<body>
    1 USD = <span id="currencyRate">span> INR
body>
html>

main.js :

const currencyWorker = new Worker("currency-rate-worker.js");

currencyWorker.postMessage('INR');

currencyWorker.onmessage = (event) =>
{
    console.log("USD to INR rate:", event.data);
    document.getElementById('currencyRate').innerText = event.data;
};

currency-rate-worker.js

const get_usd2inr = async () =>
{
    const url = "https://open.er-api.com/v6/latest/USD";
    try
    {
        const response = await fetch(url);
        const data = await response.json();
        const usd2inr = Number(data.rates.INR.toFixed(2));
        return usd2inr;
    }
    catch (error)
    {
        console.error('Error fetching exchange rate:', error);
        throw error;
    }
}

onmessage = async (e) =>
{
    if (e.data === 'INR')
    {
        postMessage(await get_usd2inr());
    }
};

Self-Executing Functions

Anjanesh Lekshminarayanan — Fri, 14 Feb 2025 04:43:47 GMT

Let's say you wanted to call a function using await (let's call this function get_usd2inr) by calling it as in like - await get_usd2inr();, you may get this error:

Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules (at main.js:15:1)

We solve this using self-executing functions - ()(); with async.

let xe = 0;

const get_usd2inr = async () =>
{
    const url = "https://open.er-api.com/v6/latest/USD";
    try
    {
        const response = await fetch(url);
        const data = await response.json();
        const usd2inr = Number(data.rates.INR.toFixed(2));
        return usd2inr;
    }
    catch (error)
    {
        console.error('Error fetching exchange rate:', error);
        throw error;
    }
}

// self-executing function
(async () =>
    {
        xe = await get_usd2inr();
        console.log(xe); // 86.97 as of 13th February 2025
    }
)();

console.log(xe); // 0 - at this point of time, get_usd2inr() is not yet done executing

In case you prefer a server-side fetch of open.er-api.com if at all they start blocking CORS all of a sudden :

def exchangerate_usd2inr():
    url = "https://open.er-api.com/v6/latest/USD"
    response = requests.get(url)
    usd2inr = response.json()['rates']['INR']
    usd2inr = round(usd2inr, 2)    
    return usd2inr

If you want to look into an example using workers check out a future blog post on using Google’s Comlink.

sleep for n seconds

Anjanesh Lekshminarayanan — Thu, 13 Feb 2025 11:52:33 GMT

My question to claude.ai for today, for which I have a PRO subscription.

myself :

whats the best and modern way to sleep for n seconds in JavaScript ? I am interested in latest browsers and not old ones. Latest can be 2024 or even 2025 also.

claude :

For modern JavaScript (2024-2025), the best and cleanest way to sleep/delay execution is to use Promise.sleep(), which was introduced in ECMAScript 2024. Here's how to use it:
await Promise.sleep(1000); // sleeps for 1 second

I searched in and out for this exciting new Promise.sleep() implementation … caniuse, forums, StackOverflow, turned on experimental features in Chrome (Canary) etc etc. It was like frantically running around from pillar to post on a government initiated errand.

I kept getting :

Uncaught TypeError: Promise.sleep is not a function

Then I asked :

“For modern JavaScript (2024-2025), the best and cleanest way to sleep/delay execution is to use Promise.sleep(), which was introduced in ECMAScript 2024”

Where is this mentioned ? Any references ?

The reply I got from claude.ai :

I apologize for my mistake. I made an incorrect statement about Promise.sleep(). After double-checking, I cannot find any official ECMAScript proposal or specification that introduces Promise.sleep() in ECMAScript 2024 or any other version.

The current best and modern way to implement sleep in JavaScript (as of 2024-2025) remains:
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
// Usage: await sleep(1000); // sleeps for 1 second

What I learnt today: GenAI can take you for a ride which is super dangerous.

I don’t think models are trained on data till the end of 2024 so it probably was my mistake in asking this question knowing that models’ training are a bit far behind and not up-to-date till last year ?

Let's stick to humans-led communities for now: https://stackoverflow.com/a/39914235/126833

Capture Option data on Select Change

Anjanesh Lekshminarayanan — Sat, 17 Feb 2024 03:42:39 GMT

Sometimes we want to 'listen' to an event change of the select element. Especially when the option is changed - and get the newly selected value and store it elsewhere. For this we use onchange on the select element and not on the option element.

There are 2 ways to get the selected option's value, I'll show both, the first one being deprecated but still works but has been Legacy’d into standarization for the window object.

event.target.selectedIndex
this.selectedIndex

The event object is part of window object which should be window.event but browsers may drop support for it in the future. Instead use this.selectedIndex.

this[this.selectedIndex].getAttribute('data-email')

html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <meta http-equiv="Cache-control" content="no-cache">  
    <title>capture option data on select changetitle>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
head>
<body>
    <div class="container d-flex flex-column">
        <h3 class="mb-3">Userh3>
        <div class="input-group mb-3">            
            <select
                id="user"
                onchange="
                document.querySelector('#user-email').value = this[this.selectedIndex].getAttribute('data-email');
                document.querySelector('#user-mobile').value = this[this.selectedIndex].getAttribute('data-mobile');
                "
                class="form-control"
            >
                <option selected>Select a Useroption>
                <option value="1" data-email="john@yahoo.com" data-mobile="6666666666">John Matthewsoption>
                <option value="4" data-email="harry@gmail.com" data-mobile="8888888888">Harry Smithoption>
                <option value="5" data-email="donald@hotmail.com" data-mobile="3333333333">Donald Moreoption>
                <option value="19" data-email="smith@matrix.com" data-mobile="1111111111">Agent Smithoption>
                <option value="20" data-email="bruce@space.com" data-mobile="9898989898">Bruce Kennedyoption>
                select>
        div>
        <div class="mb-3">
            <input type="text" name="user-email" id="user-email" class="form-control" placeholder="Email" disabled />
        div>
        <div>
            <input type="text" name="user-mobile" id="user-mobile" class="form-control" placeholder="Mobile" disabled />
        div>
    div>    
body>
html>

Demo : https://anjanesh.s3.amazonaws.com/demo/capture-option-data-on-select-change.html

Push and update object using destructuring

Anjanesh Lekshminarayanan — Thu, 07 Dec 2023 02:21:11 GMT

If you have an object like this :

const default_object = {
    vehicle: 'car',
    color: 'red',
    make: 'Honda',
};

and want to update the color then we would simply do default_object.color = 'green'

Let's say we have an array of objects like this :

const objects = [];

and we push as in objects.push(default_object);

But what if you wanted to add the default_object and at the same time update the color of the newly pushed object? This is what is done to update the color attribute.

objects.push({ ...default_object, color: 'green' });

This is equivalent to this writing like this :

objects.push({ vehicle: 'car', color: 'red', make: 'Honda', color: 'green' });

Adding color attribute twice only overwrites the first added color. So green gets assigned to the color value.

In objects.push({ ...default_object, color: 'green' }); , ...default_object is destructured, meaning it's "expanded" to vehicle: 'car', color: 'red', make: 'Honda' and then color: 'green' is added to the object overwriting color: 'red' in the expansion.

const objects = [];

const default_object = {
    vehicle: 'car',
    color: 'red',
    make: 'Honda',
};

console.log(objects);

objects.push(default_object);

console.log(objects);

objects.push({ vehicle: 'car', color: 'red', make: 'Honda', color: 'green' });

objects.push({ ...default_object, color: 'blue' });

console.log(objects);

Importance of using Getters in Vanilla JavaScript

Anjanesh Lekshminarayanan — Wed, 18 Oct 2023 01:24:07 GMT

Let's look at an example of why getters (and so are also setters) are so useful.

Let's say you have an AJAX call that you're using via fetch to retrieve the value of 1 USD in INR. Say we have a script that gets the content of https://open.er-api.com/v6/latest/USD and parse the data to get the USD to INR value.

Now, the time taken to fetch from open.er-api.com is not instant as its a network call to another location, so there will be some delay.

Ideally, the function to fetch the rates would be like this (thanks to open.er-api.com for allowing cross-origin requests).

const get_usd2inr = async () =>
{
    return fetch("https://open.er-api.com/v6/latest/USD")
    .then(response => response.json())
    .then(response =>
    {
        console.log(response['rates']['INR']);
        return response['rates']['INR'];
    });
}

Because it needs some time to execute, we need to use await in an async function.

let rate = undefined;

document.addEventListener("DOMContentLoaded", async () =>
{
    rate = await get_usd2inr();
});

But if you want to assign it immediately to a variable, like inside that of an object :

let obj = 
{
    usd2inr: rate
}

In 99% of cases, it'll be undefined as the get_usd2inr returns a promise, which hasn't yet finished executing and hence obj.usd2inr remains undefined.

To get the value of rate whenever you call for it, return rate in a getter method of the obj object. This way, the value of the AJAX called and processed rate is returned when you call for it later on as in obj.usd2inr.

let obj = 
{
    get usd2inr()
    {
        return rate;
    }
}

Here's the full code :

https://gist.github.com/anjanesh/11e0f061c040ba1656750d7ec9deb370

Clicking on the 1st button "click 1" would output undefined in the console where as clicking on the 2nd button "click 2" should output the USD value (83.272106 as of now) in the console.

Here's the demo online: https://anjanesh.s3.amazonaws.com/demo/getter-usd2inr.html

Something totally new I learnt in JavaScript from Chat GPT

Anjanesh Lekshminarayanan — Tue, 23 May 2023 09:18:36 GMT

Today I learnt something totally brand new in JavaScript from ChatGPT !

let foo = () =>
{
    return { monthly: 3, onetime: 6 };
}

let obj = { x:0, monthly: 0, onetime: 0, y:0 };

How do I do the following?

{ obj.monthly, obj.onetime } = foo();

To assign the values returned by the foo() function to the obj.monthly and obj.onetime properties, you can use object destructuring. Here's the updated code:

let foo = () => {
  return { monthly: 3, onetime: 6 };
};

let obj = { x: 0, monthly: 0, onetime: 0, y: 0 };

({ monthly: obj.monthly, onetime: obj.onetime } = foo());

In this code, object destructuring is used to extract the monthly and onetime properties from the object returned by the foo() function. The destructured properties are then assigned to the corresponding properties of the obj object using the syntax property: target.

After executing this code, obj.monthly will have the value 3 and obj.onetime will have the value 6, matching the values returned by the foo() function.

My Q : Why is there a parenthesis surrounding { monthly: obj.monthly, onetime: obj.onetime } = foo() ?

The parentheses surrounding { monthly: obj.monthly, onetime: obj.onetime } in ({ monthly: obj.monthly, onetime: obj.onetime } = foo()) are necessary for syntactic reasons.

In JavaScript, when you have a statement that starts with a curly brace {, it is interpreted as a block statement rather than an object literal. Wrapping the entire assignment statement in parentheses helps clarify that you are performing an object destructuring assignment.

Without the parentheses, the JavaScript interpreter would treat { monthly: obj.monthly, onetime: obj.onetime } as a block statement rather than an object literal, resulting in a syntax error.

Therefore, the parentheses are used to explicitly indicate that the intention is to destructure the returned object from foo() and assign its properties to obj.monthly and obj.onetime.

Initializing an object property if assigning to it fails

Anjanesh Lekshminarayanan — Sat, 22 Apr 2023 05:16:36 GMT

If you initialize a variable like let applications = {} and assign a property of applications with an array, like as in applications['foo'].push(1) it'll throw an error because foo is not yet a property of applications.

In Chrome it throws the following error :

caught TypeError: Cannot read properties of undefined (reading 'push')

In Firefox it throws :

Uncaught TypeError: applications.foo is undefined

In Safari it throws :

undefined is not an object (evaluating 'applications[property].push'

But at times we would want to push to an array of a property in applications like applications['foo'].push(5) where we don't know beforehand if applications.foo is defined or not.

In that case, we define it as applications.foo = [].

But, if we don't have a list of properties beforehand to mass assign to applications, if the data is coming from an AJAX request, then we can initialize the property using a try-catch block.

try
{
    applications[property].push(response[i]['version']);
}
catch(e)
{
    if (
        // Chrome
        e.message.includes("Cannot read properties of undefined") ||
        // FireFox
        e.message.includes("applications[property] is undefined") ||
        // Safari
        e.message.includes("undefined is not an object (evaluating 'applications[property].push'")
        )
    {
        applications[property] = [response[i]['version']];
    }
    else
    {
        console.error("error = ", e.message);
    }
}

The catch here is to check for two error messages - one for Chrome and one for Firefox.

UPDATE: A guy who works on the Chromium code-base for his company, The Browser Company (Arc.net) mentioned about using the optional chaining operator (?.)which was introduced in ES2020 - so now the entire try-catch block can be replaced with just this :

applications[property]?.push(response[i]['version']);

Thanks Vivek Galatage.

Here is the full example source: https://gist.github.com/anjanesh/fda4de82fe22f82ba0db5caf08308968

https://gist.github.com/anjanesh/fda4de82fe22f82ba0db5caf08308968

Client-side AJAX using JSON

Anjanesh Lekshminarayanan — Wed, 01 Mar 2023 04:59:28 GMT

Very often, many developers, including myself in the past, normally all along we were using jQuery's $.ajax and sending in JSON with dataType: 'json' without really sending the content-type as a JSON string which is supposed to be application/json - instead we were actually sending in a regular POST (application/x-www-urlencoded) and decoding it from the PHP side as $_POST.

So, if you have this script, post.php, in a folder :


$post_body = $_POST;
echo json_encode($post_body);
?>

and in jqurey-ajax.html :

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>jQuery AJAXtitle>     
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js">script> 
head> 
<body> 

<script>
let url = "http://localhost:8989/post.php";

const formData = new FormData();
formData.append("username", "john");
formData.append("password", "a5y6e7Chk65kmFWeK5F5");

const run = async() =>
{   
    $.ajax({
        type: 'ajax',
        method: 'post',
        url: url,
        data: {username: "john", password: "a5y6e7Chk65kmFWeK5F5"},
        async: false,
        dataType: 'json',
        success: function(result) { console.log(result); },
        error: function() { console.log("error"); }
    });
}

run();

script>
body>
html>

we get :

The Real JSON

For sending in non-JSON requests

Have this script, run.php, in the same folder :


$post_body = file_get_contents('php://input');
parse_str($post_body, $queryArray);
print_r($queryArray);
?>

If you have this HTML file in the same folder as client.html

let url = "http://localhost:8989/run.php";

const formData = new FormData();
formData.append("username", "john");
formData.append("password", "a5y6e7Chk65kmFWeK5F5");

const run = async() =>
{   
    let response = await fetch(url,
        {
            method: "POST",
            headers:
            {
                "Content-Type": "application/x-www-urlencoded",                
            },
            body: new URLSearchParams(formData),            
        });
}

run();

If you run `php.exe -S localhost:8989`, you should get this in the response of the URL request you'll see in console :

Array
(
    [username] => john
    [password] => a5y6e7Chk65kmFWeK5F5
)

For sending in JSON requests

run.php :


$post_body = file_get_contents('php://input');
print_r($post_body);
?>

client.html :

let url = "http://localhost:8989/run.php";

const formData = new FormData();
formData.append("username", "john");
formData.append("password", "a5y6e7Chk65kmFWeK5F5");

const run = async() =>
{   
    var object = {};
    formData.forEach((value, key) => object[key] = value);

    let response = await fetch(url,
        {
            method: "POST",
            headers:
            {                
                "Content-Type":"application/json",
            },            
            body: JSON.stringify(object)
        });
}

run();

We get :

username    "john"
password    "a5y6e7Chk65kmFWeK5F5"

I haven't echoed a JSON string to the output in the above 2 examples because I just wanted show how it's communicated - I'll leave it up to you to print a JSON string on the server-side for the client to fetch as response.

Using Optional Chaining for checking for existence of nested Object key

Anjanesh Lekshminarayanan — Wed, 07 Sep 2022 05:58:50 GMT

In PHP we can do use isset() for checking the existence of a deeply nested array's key since the beginning of time :


$p1 = "a9bedbd81019b877";
$p2 = "47bd5f64f7be5578";

$obj =
[
    'people' =>
    [
        $p1 =>
        [
            'first_name' => 'John',
            'last_name' => 'Smith',
            'suffix' => 'Sr',
            'results' => [ 'math' => 82, 'english' => 79, 'science' => 50 ]
        ],

        $p2 =>
        [
            'first_name' => 'Timothy',
            'middle_name' => 'Bob',
            'last_name' => 'Jones'
        ]
    ]
];

if (isset($obj['people'][$p1]['results']['science']))
{
    echo $obj['people'][$p1]['results']['science'];
}
echo "\n";
if (!isset($obj['people'][$p2]['results']['science']))
{
    echo 'Not Found';
}
echo "\n";
?>

There are many solutions to this in JavaScript like the answers given here in StackOverflow.

But I think the best solution lies in ECMA 262 (ES2020) which now all browsers support.

let p1 = "a9bedbd81019b877";
let p2 = "47bd5f64f7be5578";

let obj =
{
    'people' :
    {
        [p1] :
        {
            'first_name': 'John',
            'last_name': 'Smith',
            'suffix': 'Sr',
            'results': { 'math': 82, 'english': 79, 'science': 50 }
        },

        [p2] :
        {
            'first_name': 'Timothy',
            'middle_name': 'Bob',
            'last_name': 'Jones',
        }
    }
}

if (obj?.people?.[p1]?.results?.science)
{
    console.log('science = ', obj?.people?.[p1]?.results?.science);
}

console.log(obj?.people?.[p2]?.results?.science);

Output :

science =  50
undefined

reduce function

Anjanesh Lekshminarayanan — Mon, 04 Jul 2022 04:36:59 GMT

I hope this code on how to understand the reduce function in JavaScript is is self-explanatory.

var desks = [
  { type: 'sitting' },
  { type: 'standing' },
  { type: 'sitting' },
  { type: 'sitting' },
  { type: 'standing' }
];

var deskTypes = desks.reduce(function(d, desk)
{   
    d[desk.type]++;    
    return d;
}, { sitting: 0, standing: 0 });

console.log(deskTypes);

We are initializing deskTypes to { sitting: 0, standing: 0 } just before going through the reduce function.

d gets returned in the function which gets updated to deskTypes while desk is each value of desks in the loop.

 node trips.js 
{ sitting: 3, standing: 2 }

This works in IE9-IE11 too.

UPDATE : Another common use-case for reduce :

let shoes = [
    { id:205, name:'reebok', price:50 },
    { id:206, name:'adidas', price:45 },
    { id:207, name:'nike', price:150 },
    { id:208, name:'clarks', price:95 },
    { id:209, name:'bata', price:30 },
];

console.log(shoes.reduce((n, {price}) => n + price, 0));

Will output 370 because 50+45+150+95+30=370

Converting a traditional function to an arrow function

Anjanesh Lekshminarayanan — Fri, 01 Jul 2022 08:04:09 GMT

If you're old like me (in my 40s) and got into JavaScript way before ES6 (2015) but didn't use the new syntax that came out post 2015 like arrow functions, then here's a preview of how to convert traditional functions to arrow functions - as an argument to a ES6 functions like find, map, filter and reduce.

const arr = [3, 5, 6, 8, 7];

console.log("=== Array ===");
console.log(arr);
console.log("");


// Find - will return 6

let es6_find_1 = arr.find(function(n)
{
    if (n % 2 === 0)
    {        
        return true;
    }

    return false;
});

let es6_find_2 = arr.find(n => n % 2 === 0);

console.log("=== Find ===");
console.log(es6_find_1);
console.log(es6_find_2);
console.log("");

// Map - will return [ 6, 10, 12, 16, 14 ]

let es6_map_1 = arr.map(function(n)
{
    return n * 2;
});

let es6_map_2 = arr.map(n => n * 2);

console.log("=== Map ===");
console.log(es6_map_1);
console.log(es6_map_2);
console.log("");

// Filter - will return [ 6, 8 ]

let es6_filter_1 = arr.filter(function(n)
{
    if (n % 2 === 0)
    {
        return true;
    }

    return false;
});

let es6_filter_2 = arr.filter(n => n % 2 === 0);

console.log("=== Filter ===");
console.log(es6_filter_1);
console.log(es6_filter_2);
console.log("");

// Reduce - will return 29

let es6_reduce_1 = arr.reduce(function(acc, cur)
{
    return acc + cur;    
});

let es6_reduce_2 = arr.reduce((acc, cur) => acc + cur);

console.log("=== Reduce ===");
console.log(es6_reduce_1);
console.log(es6_reduce_2);
console.log("");

Read : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions