JavaScript Arithmetic: More Than Just 1 + 1 | A Friendly Guide

Tired of boring math? Learn how JavaScript arithmetic works in the real world, from common pitfalls to powerful shorthand. Write better code without the headache

JavaScript Arithmetic: More Than Just 1 + 1 | A Friendly Guide
JavaScript Arithmetic: It's Not as Scary as Your High School Math Teacher
Let's be honest. The word "arithmetic" probably brings back flashbacks of timed multiplication tests and scrambling for a calculator. But in the world of JavaScript, arithmetic is less about solving for x
and more about making your website do things.
It’s the magic behind a shopping cart tallying your total, a countdown timer for a launch, or even just figuring out how many unread emails you have.
So, grab a coffee. Let's break down the basics (and a few quirks) of JavaScript math in a way that’s actually enjoyable.
The Usual Suspects: The Basic Operators
You already know these guys. They work exactly how you'd expect them to.
let a = 10;
let b = 3;
console.log(a + b); // 13 - Addition
console.log(a - b); // 7 - Subtraction
console.log(a * b); // 30 - Multiplication
console.log(a / b); // 3.333... - Division
console.log(a % b); // 1 - Remainder (Modulo). What's left over after dividing.
The modulo (%
) operator might be the least familiar, but it's incredibly useful for checking if a number is even or odd (number % 2 === 0
), or for cycling through a set of values.
The "Gotchas": Where JavaScript Keeps You on Your Toes
This is where the "human" part of coding comes in. JavaScript tries to be helpful, but sometimes its help can be... confusing.
1. The Classic Decimal Dilemma
Ever done this?
let result = 0.1 + 0.2;
console.log(result); // 0.30000000000000004
Wait, what? This isn't a JavaScript bug! It's a quirk of how computers represent floating-point numbers in binary. It's like trying to write ⅓ as a decimal (0.3333...); you can't do it perfectly.
The Fix: When working with currencies or needing precision, often it's best to work in cents (pennies) instead of dollars to use whole numbers. Or, you can use methods like Number(result.toFixed(2))
to round it to two decimal places.
2. The Plus Sign (+) is a People Pleaser
The +
operator has a side hustle: it also concatenates strings. This can lead to unexpected "math."
javascript
console.log(5 + 5); // 10 (Number + Number = Math)
console.log(5 + "5"); // "55" (Number + String = Concatenation)
console.log("5" + 5); // "55" (String + Number = Concatenation)
JavaScript sees a string and thinks, "Oh, we're joining things together, not adding!" To avoid this, make sure you're working with actual numbers. You can convert a string to a number with Number("5")
or the trickier +"5"
.
Leveling Up: Handy Shorthand for the Lazy Coder (That's All of Us)
Why write more code when you can write less? These operators are your best friends for keeping your code clean.
javascript
let count = 5;
count++; // count is now 6 (post-increment)
++count; // count is now 7 (pre-increment)
count--; // count is now 6 (post-decrement)
count += 10; // count is now 16 (equivalent to count = count + 10)
count -= 2; // count is now 14 (equivalent to count = count - 2)
count *= 3; // count is now 42 (the answer to everything!)
count /= 2; // count is now 21
You'll see ++
and --
all the time in loops, and the +=
style operators are fantastic for updating values without repeating yourself.
Exponentiation: Writing Powers The Cool Way
Remember writing 5 * 5 * 5
to get 5³
? There's a better way.
javascript
// The old way
let oldWay = Math.pow(5, 3); // 125
// The new, sleek way
let newWay = 5 ** 3; // 125
The **
operator is clean, readable, and does exactly what you expect.