🚀 JavaScript Evolution: From Browser Scripting to Universal Runtime (2026 Deep Dive)

🧠 Introduction

JavaScript is no longer just a browser scripting language—it is now the backbone of modern software development. From powering interactive web pages in the 1990s to running full-scale distributed systems, JavaScript has evolved into a universal runtime shaping how applications are built and deployed.

In this deep dive, we explore:

  • How JavaScript has transformed over time
  • What major features and paradigms were introduced
  • How its ecosystem reshaped development
  • Where JavaScript is heading in the next decade

But beyond just evolution, JavaScript has fundamentally shifted its role in the tech ecosystem. It didn’t just grow—it repositioned itself as a universal runtime across platforms.
👉 Read deeper insight: JavaScript Didn’t Just Evolve — It Repositioned Itself


🕰️ Phase 1: The Early Days (1995–2005)

JavaScript was created in 1995 with a simple goal:
👉 Make web pages interactive.

Key Characteristics

  • Loosely typed
  • Prototype-based inheritance
  • Event-driven execution
  • Minimal tooling

Limitations

  • No modular architecture
  • Browser inconsistencies
  • Callback-heavy async patterns

At this stage, JavaScript was often underestimated and considered unreliable for serious engineering.


⚙️ Phase 2: Standardization with ES5 (2009)

The release of ECMAScript 5 brought stability and structure.

What Changed

  • Strict mode ("use strict")
  • Native JSON support
  • Functional array methods (map, filter, reduce)
  • Better object control

Why It Mattered

This era laid the foundation for scalable JavaScript applications and enabled cleaner, more predictable codebases.


🔥 Phase 3: ES6 – The Turning Point (2015)

ES6 was not just an update—it was a complete transformation.

This transformation marked the beginning of a deeper shift—not just in syntax, but in how JavaScript positioned itself in the software world.
👉 Explore the full perspective here: JavaScript Didn’t Just Evolve — It Repositioned Itself

Major Features Introduced

Block Scoping

let count = 0;
const MAX = 10;

Arrow Functions

const sum = (a, b) => a + b;

Classes (Cleaner OOP)

class User {
constructor(name) {
this.name = name;
}
}

Modules (Finally!)

export const api = {};
import { api } from './file.js';

Promises

fetch(url).then(res => res.json());

Destructuring

const { name } = user;

🚀 Impact of ES6

  • Enabled large-scale applications
  • Improved readability and maintainability
  • Shifted JavaScript toward modern engineering standards

🌍 JavaScript Beyond the Browser

⚡ Node.js Revolution

JavaScript expanded to the backend, enabling:

  • Server-side development
  • APIs and microservices
  • Real-time applications

👉 One language, full stack.

This moment defined JavaScript’s identity shift—from a frontend scripting tool to a cross-platform runtime environment.
👉 Detailed breakdown: JavaScript Didn’t Just Evolve — It Repositioned Itself


🎨 Frontend Framework Shift

Development moved from manual DOM handling to structured UI systems:

  • React → Component-driven architecture
  • Angular → Full ecosystem
  • Vue → Reactive simplicity

This introduced:

Declarative UI + state-driven design


⏳ Async Evolution: The Biggest Developer Pain Solved

Before (Callback Hell)

fs.readFile(file, (err, data) => {});

Promises

readFile(file).then(data => {});

Async/Await (Modern Standard)

async function load() {
const data = await readFile(file);
}

Result

  • Cleaner logic
  • Better debugging
  • Synchronous-like flow

🧩 TypeScript Influence (The Silent Takeover)

JavaScript itself didn’t become typed—but the ecosystem did.

Why TypeScript Won

  • Large app complexity
  • Need for type safety
  • Better tooling

Real Impact

  • Enterprise-level adoption
  • Reduced runtime errors
  • Strong IDE support

Today:

TypeScript is often the default, not optional.


⚡ Modern JavaScript (ES2018–2026)

JavaScript now evolves every year with incremental improvements.

Key Modern Features

Optional Chaining

user?.profile?.name

Nullish Coalescing

value ?? "default"

Top-Level Await

const data = await fetch(url);

Logical Assignment

x ||= 10;

BigInt

const big = 999999999999999999n;

🧠 The Real Power: JavaScript Ecosystem

The language is only part of the story.

Tooling Explosion

  • Bundlers: Webpack, Vite
  • Transpilers: Babel
  • Linters: ESLint
  • Formatters: Prettier

Runtime Expansion

  • Browser
  • Node.js
  • Deno
  • Bun

Cross-Platform Reach

  • Mobile → React Native
  • Desktop → Electron
  • Cloud → Serverless functions

🔄 Paradigm Shift Summary

AreaOld JavaScriptModern JavaScript
Code StructureScriptsModules
AsyncCallbacksAsync/Await
UIManual DOMComponent-based
RuntimeBrowser onlyEverywhere
TypingDynamicTyped (TS)

🔮 Where JavaScript Is Heading

1. Edge Computing

JavaScript is moving closer to users:

  • Faster response times
  • Distributed execution

2. WebAssembly Integration

JavaScript will act as a bridge for high-performance code:

  • Gaming
  • AI
  • Video processing

3. Type-Safe Future

  • TypeScript dominance
  • Possible native type support

4. AI + JavaScript

JavaScript is becoming the interface layer for AI systems:

  • Browser AI apps
  • Node.js AI orchestration
  • AI SDK ecosystems
This reinforces a critical idea: JavaScript isn’t just evolving—it’s strategically positioning itself at the center of modern computing.  
👉 Read the deeper analysis: JavaScript Didn’t Just Evolve — It Repositioned Itself

5. New Runtimes

Emerging tools like Bun and Deno are pushing:

  • Faster execution
  • Better developer experience

⚠️ Challenges Ahead

1. Ecosystem Overload

Too many tools, too many choices.

2. Complexity

Modern JS requires:

  • Build systems
  • Configurations
  • Dependency management

3. Backward Compatibility

JavaScript cannot break existing web apps—limiting radical changes.


🏁 Final Thoughts

JavaScript’s evolution is not just technical—it’s philosophical.

It has transformed into:

A universal language that connects frontend, backend, mobile, cloud, and AI systems.

The future of JavaScript is not about replacing it—but expanding it further into every layer of computing.

🔗 Recommended Deep Read

If you want to truly understand the strategic shift behind JavaScript’s dominance, don’t miss this:

👉 JavaScript Didn’t Just Evolve — It Repositioned Itself

This article breaks down how JavaScript moved from a simple scripting language to becoming the backbone of modern development ecosystems.

Building & Publishing a Cross-Framework React Hook — 📝react-usedrafty

Prevent accidental form data loss and enhance user experience — one small, powerful hook at a time.

Introduction

In this article, we’ll walk through the journey of creating, enhancing, testing, and publishing a universally compatible React hook for saving form drafts in the browser: react-usedrafty.

Our goal was to:

  • Build a plug-and-play solution for auto-saving and restoring form state.
  • Make it framework-agnostic, working with React, Next.js, and React Router projects.
  • Keep it lightweight with zero dependencies.
  • Add real-world features like route-change warnings and customizable leave prompts.

Step 1 — Hook Requirements

From the initial idea, these requirements were set:

  • Auto-save form data to localStorage or sessionStorage.
  • Restore data on page reload.
  • Warn the user before leaving if there are unsaved changes.
  • Support Next.js and React Router route change detection.
  • Provide clean API and TypeScript types.

Step 2 — Core Hook Implementation

We built the useDrafty hook in TypeScript, then configured the build to export both ESM and CJS formats for maximum compatibility.

Key features in the core:

  • Storage type selection (local / session).
  • Debounce saving.
  • Restore on mount.
  • Dirty-state detection.
  • Configurable warnOnLeave with custom messages.
  • Route change prevention via injected router instance.

Example API usage:

tsxCopyEdituseDrafty("contact-form", formState, setFormState, {
  storage: "local",
  delay: 1000,
  warnOnUnload: true,
  unloadMessage: "You have unsaved changes!",
  router: nextRouterOrReactRouter,
  onRestore: (data) => console.log("Draft restored:", data)
});

Step 3 — Adding Router Awareness

We avoided hard dependencies on Next.js or React Router by letting the user pass their router object.

Internally:

  • For Next.js, we hook into router.events.on("routeChangeStart", cb).
  • For React Router, we watch location changes.

This way:

  • No extra packages are required.
  • The hook works without any router if that feature is not needed.

Step 4 — Packaging for the World

We ensured compatibility by:

  • Targeting ESNext but compiling to both ESM & CJS.
  • Generating .d.ts files for TypeScript users.
  • Writing a package.json with proper "exports" mapping.

Example "exports":

jsonCopyEdit"exports": {
  ".": {
    "import": "./dist/index.mjs",
    "require": "./dist/index.js",
    "types": "./dist/index.d.ts"
  }
}

We also configured:

  • npm run build → Generates ESM, CJS, DTS.
  • .npmignore → Excludes /example from the package.

Step 5 — Local Testing

We:

  • Added an /example folder using Vite & React for quick testing.
  • Made sure the package works by linking locally via:
bashCopyEditnpm link
npm link react-usedrafty
  • Verified in plain React, Next.js, and React Router apps.

Step 6 — Publishing to npm

Version management steps:

bashCopyEdit# Update version
npm version patch  # or minor/major

# Publish
npm publish --access public

💡 Mistake: If you bump the wrong version, you can revert with:

bashCopyEditnpm version 1.2.2 --no-git-tag-version

Step 7 — Documentation

We created a detailed README including:

  • Feature list.
  • Install instructions.
  • Basic & advanced usage.
  • API reference.
  • Changelog with new features (e.g., warnOnUnload, router support).

Step 8 — What’s New in the Latest Version

From this latest dev cycle, we added:

  • Router-aware leave warnings (Next.js + React Router).
  • Custom restore callback onRestore.
  • Universal build that works across major JS environments.
  • Debounce control for save frequency.
  • Clear API for dirty-state detection (isDirty flag).

Conclusion

By following this process, we built a hook that:

  • Works in React, Next.js, CRA, and other environments.
  • Handles both browser unload and in-app route changes.
  • Ships with full TypeScript types.
  • Has local examples for quick testing.
  • Is ready for npm publication with a clean API and docs.

This approach can be applied to any React utility you want to share with the community while keeping it framework-flexible.


Made with ❤️& Fire in heart
PRs and feedback welcome!

Solution: TypeError: Failed to construct ‘URL’: Invalid URL

Hello,

If you are facing error :


Unhandled Runtime Error
TypeError: Failed to construct 'URL': Invalid URL
Failed to construct ‘URL’ : Invalid URL in your nextjs app

And you already have following loader ‘imgix’ settings in your next.config.js file

images: {
    // loader and path setting for android build to load nextjsimage and also on web on certain scenarios!
    loader: 'imgix',
    path: '/', // Remove the path prefix for production images
    domains: [
      'xxx.com',
      '*.xxx.com',
      'aaa.xxx.com',
      'via.placeholder.com',
    ],
}

To fix this the solution provided here worked out well!

Code snippet solution: source page stackoverflow

const loaderProp =({ src }) => {
    return src;
}

<Image
      src={currentImage.imageurl}
      alt={currentImage.imageurl} 
      layout="fill"
      className={styles.imageSize} 
      loader={loaderProp}
/>

we just need to add loader prop to the Image tag of next.js component and passdown the callback function which resolves the error above, voila!

Hope this also help you if you are facing this solution in your next.js application.

happy learning!

Function getStaticPaths, How to create paths in getStaticProps function If you have no access to create paths in getStaticPaths, NEXTJS

Hello,

Hope this is very interesting question of scenario you might be facing to solve with next js and

  • when you don’t want to use “function getServerSideProps” to pass dynamic (data as) props to the page components
  • when you don’t want too make a extra API calls to generate the paths for products or whatever list of thing you are creating in “function getStaticPaths”

Here is the quick things we need to work out to work this out of box for specially the scenario were are showing product detail view page which is of route like in Nextjs as “page/product/[id].js

First in function getStaticPaths() we just need to do this and pass fallback as “true” as we our dynamic path is not pre-rendered!

export async function getStaticPaths() {
    // Empty array since paths will be dynamically created in getStaticProps
    return {
        paths: [],
        fallback: true, // Set to true if there are dynamic paths that are not pre-rendered !! 
    };
};

Next, we need to edit our “getStaticProps” function and then voila;


export async function getStaticProps({ params }) {
    const product = await getProduct(params && params.id);
    if (!product) {
        return {
            redirect: {
                destination: '/',
                permanent: false,
            },
        }
    }

    return {
        props: {
            product,
            error: resp.error ? true : false
        }
    };
}

Boom you are done, and just use those props in your page component like



return (<PhotoProvider
        key={'photoprovider-key-' + product?.id}
        speed={() => 600}
        easing={(type) => (type === 2 ? '' : 'cubic-bezier(.25, 1, .30, 1)')}>

/*...other codes*/
</PhotoProvider>

you will find you page up and working, fine!

Hope this simple steps helps to solve our complex situations arises in the development work of software building on planet earth!

I would also like to the above situation, why we can’t just do the same thing simply with getServerSideProps in single function, I am facing the issue to build using next build && next export for android package, as dynamics cannot be rendered as html files due to getServerSideProps sitting in between, and also as per the Next JS docs we can’t do anything what I have found of my learnings.

Happy Learning! Thanks for reading.

Keep coding & Develop Wonderful.

To Follow help out to know: uidevwork

What is forwardRef and how its helps in react?

Hello, lets quickly take a review on React forwardRef, what it in actual,

In React, the forwardRef function is a utility that allows you to pass a ref through a component to one of its children. It’s commonly used when you need to access the underlying DOM node or React component instance of a child component from the parent component.

When you create a component using functional components in React, you can use the useRef hook to create a ref object. This ref object can then be passed as a prop to child components. However, when you pass the ref as a prop to a child component, React does not automatically pass it down to the underlying DOM element or custom component. This is where forwardRef comes into play.

By using forwardRef, you can create a component that accepts a ref and forwards it to one of its children. Here’s an example:

const ChildComp = React.forwardRef((props, ref) => {
  // Use the ref object to access the underlying DOM node or component instance
  return <input ref={ref} />;
});

const ParentComp = () => {
  const inputRef = React.useRef(null);

  const handleClick = () => {
    // Access the input element using the ref
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <ChildComponent ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

In the example above, the ChildComponent uses forwardRef to forward the ref prop to the <input> element. In the ParentComponent, a ref is created using the useRef hook and passed to ChildComponent using the ref prop. This allows the ParentComponent to access the input element and call the focus method when the button is clicked.

By using forwardRef, helps to bridge the gap between functional components and the imperative DOM or component operations that sometimes require direct access to child component element.

Note here we are accessing child’s component dom node not child component here as ref object, i.e can be consider as subtle difference to understand for our mind.

Hope this helps to clear out the basic concept behind using forwardRef in React.

Happy Learning!

How to fix nextjs appending http://localhost:3000/_next/image? to the image srcset how to remove for production build for images?

Hello,

Welcome to the question and for the search, facing this issue? lets quickly see how we can fix this, with and in next.config.js file.

In Next.js, when using the next/image component, the src attribute is automatically transformed to a URL that goes through the Next.js image optimization pipeline. During development, this URL may include http://localhost:3000/_next/image? to indicate the local development server.

However, for production images, you can configure Next.js to remove the http://localhost:3000/_next/image? prefix. Here’s how you can achieve that:

Create a custom loader for Next.js images:

  • Open next.config.js and add the following code:
    • module.exports = {
    • images: {
      • loader: 'imgix',
      • path: '', // Remove the path prefix for production images
    • }, };
  • This configuration sets the loader option to use the imgix loader, which removes the http://localhost:3000/_next/image? prefix. The path option is set to an empty string, this will leave the prefix for image urls and left blank

Now you can easily build your project and test to images are loading fine with absolute url path if applied so.

Hope this help to solve the issue.

Happy Learning!

How to fix Uncaught TypeError: Cannot assign to read only property ‘0’ of object occurring in JavaScript?

Hello,

This type error mostly get in scenario when you try to sort the readyonly data array.

For me this was occoured when I tried to sort the direct result from my GraphQL query response data like below:

const sortedData = data.bhangarwalas.sort((a, b) => a?.firstname > b?.firstname ? 1 : -1);

In above, data.bhangarwalas is graphql query response results which is readonly in nature as response.

To fix this issue the solution is quick fix for which I have too google to know the result!

Error Screenshot Uncaught TypeError: Cannot assign to read only property ‘0’ of object ‘[object Array]’

Here is the quick solution:

const sortedData = [...data.bhangarwalas];
      sortedData.sort((a, b) => a?.firstname > b?.firstname ? 1 : -1);

In code above, We need to clone or you in other words, copying the “data.bhangarwalas” into new array variable and then over that variable, we need to perform sorting operation, which results us right response.

Hope this help you to solve the quick error or to know what scenario this type of error is generated.

Thanks for reading.

Happy learning!

What to do when you get nextjs error (Module not found: Error: Can’t resolve ‘private-next-pages/’ in ‘/vercel/path0’) on vercel/nextjs deployment?

Hello,

If you too facing this error : Module not found: Error: Can’t resolve ‘private-next-pages/’ in ‘/vercel/path0’

while deploying your NextJs project over Vercel platform, please follow what solution and mistake I was doing.

Error Screenshot of error occurring from the NextJs Project deployment on vercel platform.

As, I tried to debug this error by right away check the the next in the log highlighted (in screenshot above) recommending to following alias rule to be set if you have touched you next.config.js file with any webpack settings.

In my case I did have to touched the next.config.js file and so I have add the same lines of code recommend in the follow link of Next.js doc

https://nextjs.org/docs/messages/invalid-resolve-alias

But for me still I didn’t found the right solution, because was in the naming of folder under nextjs project.

Basically, I was loading the static content into the dynamic route in Nextjs (Like example reference here).

What I have missed was the name of the folder under pages directory I have created named as “learn” it should be similar to name “posts” as created one at root level of the project to hold the “.md” or “.html” file content to pass down to dynamic route page which will be under /pages/posts/[id].js

Sharing here screenshot of the directory where the naming was a mistake

Here highlighted “learn” folder should be same as “posts” below

After renaming the folder name “learn” to “posts” the error went off and found my deployment working successfully.

Hope this small mistake tip help you to solve this problem.

If you have found any mistake in the post. Please don’t hesitate to hit me on my email jat@doableyo.com to rectify.

Enjoyed reading this? How about sharing with your friends or in groups, this would help!

Thanks, Happy Learning!

What is Event Loop & Micro and Macro Tasks in JavaScript?

Hello,

The basic concept behind the event loop working in Javascript engine!

Event Loop is a mechanism in JavaScript that handles asynchronous tasks in a non-blocking way. When JavaScript code is executed, it is run inside an event loop, which continuously checks if there are any tasks to be executed in the queue. The event loop is responsible for running the tasks in the queue, and it does this in a specific order.

The Event Loop in JavaScript has two main components: the Call Stack and the Callback Queue. The Call Stack is responsible for keeping track of the execution of the synchronous code. When a function is called, it is added to the top of the call stack, and when the function returns, it is removed from the top of the call stack.

The Callback Queue, on the other hand, is responsible for keeping track of the asynchronous tasks. When an asynchronous task is completed, it is added to the Callback Queue. The event loop continuously checks the Callback Queue to see if there are any tasks that can be executed. If there is a task, it is moved to the Call Stack, where it is executed.

Microtasks and Macrotasks are two types of tasks in JavaScript that are executed by the event loop.

Microtasks are tasks that are executed immediately after the current task has completed. Microtasks are executed before the next rendering of the web page, which means that they have a higher priority than Macrotasks. Some examples of Microtasks include Promises, MutationObserver, and process.nextTick in Node.js.

Macrotasks, on the other hand, are tasks that are executed after all the Microtasks have been executed. Macrotasks include tasks such as setTimeout, setInterval, and I/O operations in Node.js.

In summary, the Event Loop in JavaScript is responsible for handling asynchronous tasks in a non-blocking way. The Event Loop has two main components, the Call Stack and the Callback Queue. Microtasks and Macrotasks are two types of tasks that are executed by the event loop, and they have different priorities. Microtasks are executed before Macrotasks and are used for tasks that need to be executed immediately after the current task has completed, while Macrotasks are used for tasks that can be executed at a later time.

Source: AI Interaction Channels

Happy Learning!

How to identify closed 5km range co ordinates from given co ordinates

Hello,

This nice question and other below I have learned recently! Let see how its answered.

To identify the closed 5km range coordinates from a given set of coordinates, you need to first calculate the difference in latitude and longitude between the given coordinates and find the minimum and maximum values.

Here’s the basic formula:

Latitude range:

  • min latitude = given latitude – (5 / 111.2)
  • max latitude = given latitude + (5 / 111.2)

Longitude range:

  • min longitude = given longitude – (5 / (111.2 * cos(given latitude)))
  • max longitude = given longitude + (5 / (111.2 * cos(given latitude)))

Note: In the above formula, (5 / 111.2) is used to convert 5km to degrees. The value of 111.2 is the approximate number of km per degree of latitude. The value of (111.2 * cos(given latitude)) is used to convert 5km to degrees of longitude.

Once you have calculated the minimum and maximum values of latitude and longitude, you can create a bounding box by combining them. The coordinates within this bounding box would be considered as closed within a 5km range of the given coordinates.

Can you tell me more on last results?

Sure! The last results I mentioned are the coordinates of a bounding box that defines a closed area within a 5km range of a given set of coordinates.

A bounding box is a rectangular area that encloses a set of points or coordinates. In this case, the bounding box encloses the coordinates that are within a 5km range of the given coordinates. The minimum and maximum latitude and longitude values that were calculated earlier define the boundaries of this bounding box.

By combining the minimum and maximum latitude and longitude values, you get a rectangular area that encloses all the coordinates that are within a 5km range of the given coordinates. Any coordinate that lies within this rectangular area can be considered to be within a 5km range of the given coordinates.

This information can be useful in various applications, such as mapping, geolocation-based services, or location-based searches. For example, if you want to search for all the restaurants within a 5km range of a given location, you can use the bounding box coordinates to filter out the restaurants that are outside the 5km range.

Can you tell me more with example for bounding box calculations?

Sure, here’s an example of how you can calculate the bounding box coordinates for a given set of coordinates within a 5km range.

Let’s assume that the given coordinates are:

Latitude: 37.7749 Longitude: -122.4194

To calculate the bounding box coordinates:

  1. Calculate the minimum and maximum latitude:
  • min latitude = 37.7749 – (5 / 111.2) = 37.7692
  • max latitude = 37.7749 + (5 / 111.2) = 37.7807
  1. Calculate the minimum and maximum longitude:
  • min longitude = -122.4194 – (5 / (111.2 * cos(37.7749))) = -122.4257
  • max longitude = -122.4194 + (5 / (111.2 * cos(37.7749))) = -122.4131

So, the bounding box coordinates would be:

min latitude: 37.7692 min longitude: -122.4257 max latitude: 37.7807 max longitude: -122.4131

This means that any coordinate that lies within the rectangular area defined by these bounding box coordinates would be considered to be within a 5km range of the given coordinates (37.7749, -122.4194).

Well hope you understand from the given formulation and examples how can create a boundingbox for the range we need to search in for against our given co-ordinates, lets deep in further how we can implement and take this up with our Javascript Skills!

Nice, how I we can use this in Javascript?

Here’s an example of how you can calculate the bounding box coordinates for a given set of coordinates within a 5km range using JavaScript:

function getBoundingBox(lat, lng, distance) {
  const RADIUS_OF_EARTH_KM = 6371;
  const latRadian = lat * (Math.PI / 180);
  const degLatKm = RADIUS_OF_EARTH_KM * Math.cos(latRadian);
  const degLonKm = RADIUS_OF_EARTH_KM;
  const latDegree = distance / degLatKm;
  const lngDegree = distance / degLonKm;

  return {
    minLat: lat - latDegree,
    minLng: lng - lngDegree,
    maxLat: lat + latDegree,
    maxLng: lng + lngDegree
  };
}

const coordinates = { lat: 37.7749, lng: -122.4194 };
const boundingBox = getBoundingBox(coordinates.lat, coordinates.lng, 5);

console.log(boundingBox);

In this example, the getBoundingBox function takes the latitude, longitude, and distance as input parameters. The distance is the radius of the bounding box and is specified in kilometers. The function first converts the latitude and longitude to radians and calculates the number of kilometers per degree of latitude and longitude. The minimum and maximum latitude and longitude values are then calculated using these values and the given distance. Finally, the bounding box coordinates are returned as an object.

Nice, How to I use the bounding box with real test case example?

Here’s an example of how you could use the bounding box coordinates with a real-world test case. Let’s say you have a list of restaurants and their coordinates, and you want to search for all the restaurants within a 5km range of a given location.

const restaurants = [
  { name: "Restaurant A", lat: 37.7820, lng: -122.4464 },
  { name: "Restaurant B", lat: 37.7696, lng: -122.4138 },
  { name: "Restaurant C", lat: 37.7816, lng: -122.4140 },
  { name: "Restaurant D", lat: 37.7711, lng: -122.4336 },
  { name: "Restaurant E", lat: 37.7634, lng: -122.4359 },
];

const searchLocation = { lat: 37.7749, lng: -122.4194 };
const searchRadius = 5;
const boundingBox = getBoundingBox(searchLocation.lat, searchLocation.lng, searchRadius);

const filteredRestaurants = restaurants.filter(restaurant => {
  return (
    restaurant.lat >= boundingBox.minLat &&
    restaurant.lat <= boundingBox.maxLat &&
    restaurant.lng >= boundingBox.minLng &&
    restaurant.lng <= boundingBox.maxLng
  );
});

console.log(filteredRestaurants);

In this example, the restaurants array contains the list of restaurants and their coordinates. The searchLocation object contains the location for which you want to search the restaurants. The searchRadius specifies the radius of the search in kilometers.

The boundingBox is calculated using the getBoundingBox function, as shown in the previous example. The filteredRestaurants array is then created by filtering the restaurants array based on whether their coordinates fall within the bounding box or not. Finally, the filtered restaurants are logged to the console.

Hope this give us nice insight for the questions we have and need to develop as we develop advance things.

Source: Some AI Interaction Channels

Happy Learning!