DEV Community: Pranav Rustagi

What if I told you, (0.1 + 0.2) is not equal to 0.3? No, it is not the case with JavaScript only

Pranav Rustagi — Tue, 13 Jan 2026 17:11:23 +0000

JavaScript Math Is Weird… Or Is It? 🤔

Pranav Rustagi ・ Jan 13

#programming #javascript #webdev #computerscience

JavaScript Math Is Weird… Or Is It? 🤔

Pranav Rustagi — Tue, 13 Jan 2026 14:30:00 +0000

The Famous JavaScript Surprise ⚡

Have you ever come across some tutorial or blog saying "JavaScript mathematics is weird"? Something where you tried writing down on your console to run "0.1 + 0.2" and it didn't give "0.3", well not exactly?

And probably you would have seen nothing of that sort in C++ or Python or Java and maybe any other language you would have used. The answer never defies the basic addition rules, it is always "0.3" as it should be. Isn't that right?

Expectation:

> 0.1 + 0.2
0.3

Reality:

> 0.1 + 0.2
0.30000000000000004

Let's unravel this weirdness!

What JavaScript Is Really Doing With Numbers 🔢

Unlike other programming languages, JavaScript has only one numeric type: Number. Under the hood, all numbers are stored as floating-point values.

Understanding where things go wrong requires the understanding of how values are stored in bits, especially values having decimals.

The curse of binary 💻

Just like the famous value pi which can never be represented properly and wholly, there are values which when tried to represent in binary end up being infinitely repeating and thus non-terminating.

One of such values is 0.1:

0.1 (base 10) = 0.0001100110011001100110011… (base 2)

with "0011" repeating forever.

Since, IEEE 754 floating-point representation is used to store values and due to fixed number of bits available to store the value, the value of non-terminating sequence is rounded-off.

Thus, the value 0.1 itself does not get stored as 0.1. The stored value is a tiny bit above the real 0.1.

Similar thing happens with 0.2.

And thus 0.3 never comes up. Instead it is something like 0.30000000000000004.

Want to learn more in depth regarding the representation?
Read more about floating-point representation

And guess what? JavaScript isn't the only one having it this way.

It Happens in Other Languages Too 🌐

This behavior is not unique to JavaScript.

You’ll see the same thing in:

Python
Java
C++
C#, etc.

So why does this look fine?

cout << (0.1 + 0.2); // prints 0.3

Because printing and comparing are different things.

Floating-point math produces tiny inaccuracies
Printing rounds values for humans
Equality checks don’t round

Most languages format floating-point numbers when displaying them, rounding the value for readability. JavaScript simply makes the raw result more visible.

Don't believe me? Try doing this:

if ((0.1 + 0.2) == 0.3) {
    cout << "Pranav was wrong! Haha 😅";
} else {
    cout << "Damn! How come I never noticed it? 🤯";
}

The issue exists everywhere—JavaScript just doesn’t hide it as much.

Conclusion: JavaScript isn't weird 😎 (well not for this)

If 0.1 + 0.2 !== 0.3 still feels wrong, that’s okay—it should. It’s a clash between human intuition and machine reality. JavaScript just happens to be honest about it. Learn the rule, respect the edge cases, and your code will be better for it.

Introducing highlight-plus: Supercharged Syntax Highlighting for React

Pranav Rustagi — Thu, 13 Mar 2025 19:45:02 +0000

In the world of web development, making code snippets clear and easy to read is essential. Plenty of tools offer syntax highlighting — but what if you want to emphasise specific words in that code? That’s where highlight-plus comes in — an NPM package that extends React syntax highlighting by letting you highlight specific words within your code.

Why highlight-plus?

Built on top of react-highlight, highlight-plus keeps all the great syntax highlighting features you love — but adds the ability to highlight specific words, a feature react-highlight doesn’t support. This is especially helpful when you want to draw attention to key parts of your code, like a variable or function, making it perfect for tutorials, documentation, and code demos.

Key Features at a Glance

✅ Full Syntax Highlighting: Supports a wide range of programming languages, including JavaScript and TypeScript, for clean, readable code.
🎯 Highlight Specific Words: Emphasize key terms or variables right within your code snippet — a feature missing from react-highlight.
🎨 Custom Highlight Colors: Supports all CSS color formats (hex, RGB, HSL, etc.) for flexible styling.
🔒 Perfect for Read-Only Code: Ideal for displaying static, read-only code in blogs, documentation, or tutorials — especially when you need to guide your readers' focus.

Installation: Quick and Easy

To add highlight-plus to your React project, use npm or yarn:

npm install highlight-plus

yarn add highlight-plus

Getting Started: Basic Usage

Here’s a quick example to get you up and running:

import React from 'react';
import HighlightPlus from 'highlight-plus';

const ExampleComponent = () => {
    const codeString = `
        function greet() {
            const message = "Hello, World!";
            console.log(message);
        }
    `;

    const wordToHighlight = 'message';

    return (
        <div>
            <h1>Code Example with Highlighted Word</h1>
            <HighlightPlus
                language="javascript"
                word_to_highlight={wordToHighlight}
                code_content={codeString}
            />
        </div>
    );
};

In this example, the word "message" will stand out in the code snippet.

Customise Your Snippets

highlight-plus supports several props for customisation:

code_content: The code to display (type: string, default: "").
word_to_highlight: The word to highlight in the code (type: string, default: "").
language: Defines the programming language for syntax highlighting (type: string, default: auto-detected).
highlight_color: Sets the highlight color (type: string, default: yellow).

Custom Syntax Highlighting Themes

Want more control over the look and feel? You can customize the syntax highlighting theme by using any highlight.js theme. For example:

<link
    rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/1c-light.min.css"
/>

@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/1c-light.min.css');

Why Choose highlight-plus Over Other Libraries?

While react-highlight handles syntax highlighting, it doesn’t allow you to emphasise specific words — which is crucial when explaining code or drawing focus. highlight-plus solves that problem effortlessly.

✅ Built for Readability: Perfect for readonly code snippets in blogs, docs, and tutorials.
✅ Supports JavaScript and TypeScript: Highlight code in both JS and TS projects.
✅ Customisation First: Tailor both syntax and word highlights to fit your style.
✅ Easy to Use: Lightweight API with quick setup.

Ready to Level Up Your Code Snippets?

highlight-plus fills a gap where traditional libraries like react-highlight fall short — letting you not only apply syntax highlighting but also emphasise key words in your code snippets. With easy customisation and seamless integration, it’s a fantastic choice for projects that showcase read-only code.

For more details and to try it out, visit the highlight-plus npm page.

Hacktoberfest'23: Acting like a dev

Pranav Rustagi — Thu, 26 Oct 2023 03:19:19 +0000

Introduction

Greetings, everyone! I'm Pranav Rustagi, currently pursuing my master's degree at NIT Kurukshetra. I'm deeply passionate about web development, with a specialization in crafting frontends for web applications and websites. If you'd like to connect with me, here are my social media handles:

GitHub: https://github.com/Pranav-Rustagi
LinkedIn: https://www.linkedin.com/in/pranav-rustagi/

Embracing Open Source: A Journey of Learning

My journey into open source began last year during the exciting Hacktoberfest'22 event. Driven by a desire to grasp the intricacies of open-source development (and, let's be honest, to snag that cool T-shirt), I embarked on this adventure. During the event, I successfully contributed to a repository by making small but meaningful changes, resulting in four PRs getting merged.

The momentum of open source kept me going, and I continued my journey by participating in GSSoC'23, where I achieved a rank of 198. However, it was during Hacktoberfest'23 that I decided to pivot my contribution approach. Until then, I had mainly focused on issues and features that I could easily tackle. But what's the fun if you don't push your limits and learn something new?

Riding the Highs and Navigating the Lows

During Hacktoberfest'23, I took on the "Ezmail" project, which introduced me to Svelte, a technology I had no prior experience with. With determination and a deep dive into the codebase, I identified unaddressed features and requested assignments for them. The learning curve was steep, and there were moments when it felt like I had hit a dead end. However, my perseverance paid off as I successfully implemented those challenging features.

A Message to Fellow Open-Source Enthusiasts

I've observed that during events like Hacktoberfest, a significant number of developers, often students, submit PRs that involve trivial changes like adding their name to a README file or inserting quotes into a repository. While such repositories serve as a great entry point for newcomers to open source, I firmly believe that these contributions do not maximize the value for the contributor. As developers, our core activities revolve around two key tasks:

Writing code that adds functionality and value.
Fixing the bugs we introduce :')

So, my message to fellow open-sourcers is this: Aim high, learn continuously, and make meaningful contributions that not only benefit the community but also enhance your skills and knowledge. Happy coding!