JavaScript Arithmetic

JavaScript is one of the most popular programming languages in use today. Its support for arithmetic operations is one of the many things that make it so versatile. In this article, we’ll explore the ins and outs of JavaScript arithmetic, including the different types of numbers, the various arithmetic operators, and some common gotchas to watch out for.

Types of Numbers in JavaScript

Before we dive into the arithmetic operations themselves, it’s essential to understand the different types of numbers that JavaScript supports. There are two main types of numbers in JavaScript: integers and floats.

Integers

Integers, as you might expect, are whole numbers. They can be positive, negative, or zero. In JavaScript, integers are represented using the number data type. Here’s an example:

const myInteger = 42;

Floats

Floats, on the other hand, are decimal numbers. They can also be positive, negative, or zero. In JavaScript, floats are also represented using the number data type. Here’s an example:

const myFloat = 3.14;

Number Precision

One thing to be aware of when working with floats in JavaScript is their precision. Due to the way that floating-point numbers are stored in memory, there can be some unexpected behavior when performing arithmetic operations. For example, consider the following code:

const x = 0.1;
const y = 0.2;
const z = x + y;
console.log(z);

You might expect the output of this code to be 0.3, but in reality, it will be 0.30000000000000004. This is due to the fact that 0.1 and 0.2 cannot be represented exactly in binary, so when they are added together, there is a very small rounding error. This is something to keep in mind when working with floats in JavaScript.

Arithmetic Operators in JavaScript

Now that we’ve covered the different types of numbers in JavaScript, let’s dive into the arithmetic operators that you can use to perform operations on those numbers.

Addition

The addition operator in JavaScript is +. It is used to add two numbers together. Here’s an example:

const x = 2;
const y = 3;
const z = x + y;
console.log(z); // Output: 5

Subtraction

The subtraction operator in JavaScript is -. It is used to subtract one number from another. Here’s an example:

const x = 5;
const y = 2;
const z = x - y;
console.log(z); // Output: 3

Multiplication

The multiplication operator in JavaScript is *. It is used to multiply two numbers together. Here’s an example:

const x = 2;
const y = 3;
const z = x * y;
console.log(z); // Output: 6

Division

The division operator in JavaScript is /. It is used to divide one number by another. Here’s an example:

const x = 6;
const y = 3;
const z = x / y;
console.log(z); // Output: 2

Modulus

The modulus operator in JavaScript is %. It is used to get the remainder when one number is divided by another. Here’s an example:

const x = 5;
const y = 2;
const z = x % y;
console.log(z); // Output: 1

Increment and Decrement

JavaScript also includes two special operators for incrementing or decrementing a number by 1: ++ and --. The ++ operator adds 1 to a number, while the -- operator subtracts 1. These operators can be used either before or after the variable name, with slightly different results:

let x = 5;
x++;
console.log(x); // Output: 6

let y = 5;
++y;
console.log(y); // Output: 6

let z = 5;
z--;
console.log(z); // Output: 4

let w = 5;
--w;
console.log(w); // Output: 4

When used before the variable name, the operator is applied first and then the value is used. When used after the variable name, the value is used first and then the operator is applied.

Operator Precedence

Just like in algebra, JavaScript has rules for the order in which arithmetic operations are evaluated. This is called operator precedence. In general, the order of operations is as follows:

1. Parentheses
2. Exponents (**)
3. Multiplication and Division (* and /)
4. Addition and Subtraction (+ and -)

Here’s an example that demonstrates how operator precedence works:

const x = 2 + 3 * 4;
console.log(x); // Output: 14

In this example, the multiplication is evaluated first, and then the addition is applied. If you want to change the order of operations, you can use parentheses to group the operations:

const y = (2 + 3) * 4;
console.log(y); // Output: 20

In this example, the addition is evaluated first due to the parentheses, and then the multiplication is applied.

Common Gotchas

Now that we’ve covered the basics of JavaScript arithmetic, let’s take a look at some common gotchas to watch out for.

Division by Zero

One of the most common mistakes when working with arithmetic in any language is dividing by zero. In JavaScript, if you try to divide a number by zero, the result will be Infinity or -Infinity, depending on the sign of the numerator:

const x = 5 / 0;
console.log(x); // Output: Infinity

const y = -5 / 0;
console.log(y); // Output: -Infinity

NaN

Another common issue when working with arithmetic in JavaScript is the NaN (Not a Number) value. This is typically the result of an operation that doesn’t make sense, such as trying to divide a string by a number:

const x = "hello" / 2;
console.log(x); // Output: NaN

It’s important to be aware of NaN because it can lead to unexpected behavior in your code if you’re not careful.

Precision Issues

As we mentioned earlier, precision can be a concern when working with floats in JavaScript. One way to mitigate this issue is to use a library like Decimal.js to perform arithmetic with arbitrary precision.

Conclusion

Arithmetic operations are an essential part of any programming language, and JavaScript is no exception. In this article, we covered the basics of JavaScript arithmetic, including the different types of numbers, the various arithmetic operators, and some common gotchas to watch out for. By understanding these concepts, you’ll be well on your way to writing effective and efficient JavaScript code.

📕 Related articles about Javascript

• JavaScript Operators: A Comprehensive Guide
• JavaScript Array Sort
• JavaScript Arithmetic
• Understanding JavaScript Objects
• Understanding JavaScript Output
• JavaScript Date Get Methods: A Comprehensive Guide