JavaScript Operators Explained with Clear Examples

JavaScript operators are symbols that perform operations on values, such as arithmetic, comparison, or assignment. This article explains the main operator types with concrete examples, so you can read and write expressions with confidence.

Formula

The calculator above demonstrates the five basic arithmetic operators: addition (+), subtraction (-), multiplication (*), division (/), and remainder (%). The expressions are:

• Sum = a + b
• Difference = a – b
• Product = a * b
• Quotient = a / b
• Remainder = a % b

Each variable a and b is a number you provide. The remainder operator returns the integer remainder after dividing a by b; for example, 10 % 3 is 1 because 3 goes into 10 three times with 1 left over.

Worked Example

Using the default values a = 10 and b = 3:

1. Sum: 10 + 3 = 13
2. Difference: 10 – 3 = 7
3. Product: 10 * 3 = 30
4. Quotient: 10 / 3 = 3.3333 (rounded to 2 decimals)
5. Remainder: 10 % 3 = 1

These results match what the calculator shows. Notice that division does not round automatically; the calculator rounds the display to two decimal places, but the actual value is 3.3333….

Assignment Operators

Assignment operators store values in variables. The basic one is =, but JavaScript provides shorthand forms that combine assignment with arithmetic:

• x += 5 is equivalent to x = x + 5
• x -= 2 is equivalent to x = x - 2
• x *= 3 is equivalent to x = x * 3
• x /= 4 is equivalent to x = x / 4
• x %= 2 is equivalent to x = x % 2

These are common in loops and counters. For example, count += 1 increments a counter by one. The assignment operator itself returns the assigned value, so you can chain assignments like a = b = 10, which sets both variables to 10.

Comparison Operators

Comparison operators return a boolean (true or false) and are used in conditions:

• == loose equality (compares value after type coercion)
• === strict equality (compares value and type)
• != loose inequality
• !== strict inequality
• > greater than
• < less than
• >= greater than or equal
• <= less than or equal

A common misconception is that == and === are interchangeable. They are not. For example, 5 == "5" is true because the string is converted to a number, but 5 === "5" is false because the types differ. In modern JavaScript, it is best practice to use strict equality (===) to avoid unexpected type coercion.

Logical Operators

Logical operators combine boolean values or coerce values to booleans:

• && logical AND – returns the first falsy value or the last value if all are truthy
• || logical OR – returns the first truthy value or the last value if all are falsy
• ! logical NOT – returns the opposite boolean

These operators do not always return true or false. For example, 0 || "hello" returns "hello" because 0 is falsy. This behavior is often used for default values: const name = userInput || "Guest" assigns “Guest” if userInput is empty or undefined.

Unary Operators

Unary operators work on a single value:

• + converts a value to a number (e.g., +"42" gives 42)
• - negates a number
• ++ increments by 1 (prefix or postfix)
• -- decrements by 1
• typeof returns the type of a value as a string
• ! logical NOT (also unary)

The increment operator has two forms: x++ returns the old value then increments, while ++x increments first then returns the new value. This distinction matters in expressions. For example:

let a = 5;
let b = a++; // b = 5, a = 6
let c = ++a; // c = 7, a = 7

Operator Precedence and Associativity

JavaScript follows a defined order of precedence, similar to mathematics. Multiplication and division have higher precedence than addition and subtraction, so 2 + 3 * 4 evaluates to 14, not 20. Parentheses override precedence: (2 + 3) * 4 gives 20.

Associativity determines the order when operators have the same precedence. Most arithmetic operators are left-associative, meaning they evaluate left to right: 10 - 3 - 2 is (10 – 3) – 2 = 5. Assignment operators are right-associative, so a = b = c assigns c to b first, then b to a.

When in doubt, use parentheses to make the intended order explicit. This improves readability and reduces errors.

Common Mistakes and How to Avoid Them

One frequent error is using a single = in a condition instead of == or ===. A single = assigns a value, and in an if statement it may always be truthy, causing unexpected behavior. For example:

if (x = 10) { // assigns 10 to x, always true
  // runs every time
}

Another mistake is mixing up % with percentage. The remainder operator is not a percentage; 50 % 10 is 0, not 5%. To calculate a percentage, divide by 100: 50 / 100 * 10.

Also, be careful with floating-point precision. For instance, 0.1 + 0.2 does not exactly equal 0.3 due to binary representation. This is not a JavaScript bug but a limitation of how computers store decimals. For currency or precise calculations, consider rounding or using integer math.

Frequently Asked Questions

What is the difference between == and ===?

== compares values after converting them to a common type (type coercion), while === compares both value and type without conversion. For example, 1 == "1" is true, but 1 === "1" is false. Always prefer === to avoid unexpected results.

Can I use the + operator to concatenate strings?

Yes. If either operand is a string, + concatenates them. For example, "Hello " + "World" gives “Hello World”. However, if both operands are numbers, it performs addition. This can cause surprises: "5" + 3 gives “53” (string), not 8.

What does the % operator do in JavaScript?

It returns the remainder of a division. For example, 17 % 5 is 2 because 5 goes into 17 three times (15) with 2 left over. It is commonly used to check if a number is even (n % 2 === 0) or to cycle through a range.

Why does 0.1 + 0.2 not equal 0.3?

Because numbers are stored in binary, and 0.1 and 0.2 cannot be represented exactly. The result is a tiny rounding error (0.30000000000000004). This affects most programming languages, not just JavaScript. To handle money, round to a fixed number of decimals or use integer cents.

What is the ternary operator?

The ternary operator is a shorthand for if-else: condition ? valueIfTrue : valueIfFalse. For example, let status = age >= 18 ? "Adult" : "Minor". It returns one of two values based on the condition and is useful for concise assignments.

Are logical operators short-circuiting?

Yes. In a && b, if a is falsy, b is not evaluated. In a || b, if a is truthy, b is not evaluated. This is useful for avoiding errors, like calling a function only if an object exists: obj && obj.method().

Related

• Android Screen Recording Privacy: What Gets Captured
• Best Ways to Delete Temp Files on Mac
• Recover Files or Windows from a Macrium Reflect 8 Image

in a | First number | - | 10 | 0
in b | Second number | - | 3 | 0
out sum | a + b | - | a + b | 2
out diff | a - b | - | a - b | 2
out prod | a * b | - | a * b | 2
out quot | a / b | - | a / b | 2
out rem | a % b | - | a % b | 2