How to Use Operators in JavaScript: Arithmetic, Assignment, and Beyond

Operators are the verbs of JavaScript. They take values, perform operations on them, and produce results. Every calculation, every comparison, every assignment in your code uses an operator. While some operators are straightforward (like + for addition), others have hidden behaviors that catch even experienced developers off guard.

This guide covers every category of JavaScript operators: arithmetic, assignment, increment/decrement, unary, bitwise, and the comma operator. You will learn exactly how each one works, how operator precedence determines the order of evaluation, and why the + operator deserves its own warning section.

Arithmetic Operators

Arithmetic operators perform mathematical calculations on numeric values. JavaScript provides seven arithmetic operators.

The Basic Four: Addition, Subtraction, Multiplication, Division

console.log(10 + 3);   // 13  (addition)
console.log(10 - 3);   // 7   (subtraction)
console.log(10 * 3);   // 30  (multiplication)
console.log(10 / 3);   // 3.3333333333333335 (division (always float))

Unlike some languages, JavaScript has no integer division. Division always produces a floating-point result, even when both operands are integers:

console.log(10 / 2);   // 5   (looks like an integer, but it's a float)
console.log(7 / 2);    // 3.5 (not 3 like in Python's // or Java's int division)

// To get integer division, use Math.trunc() or Math.floor()
console.log(Math.trunc(7 / 2));   // 3  (removes decimal part)
console.log(Math.floor(7 / 2));   // 3  (rounds down)
console.log(Math.floor(-7 / 2));  // -4 (rounds toward -Infinity)
console.log(Math.trunc(-7 / 2));  // -3 (removes decimal toward zero)

Remainder (Modulo) Operator: %

The % operator returns the remainder after division:

console.log(10 % 3);   // 1  (10 divided by 3 = 3 remainder 1)
console.log(15 % 5);   // 0  (15 divided by 5 = 3 remainder 0)
console.log(7 % 2);    // 1  (7 divided by 2 = 3 remainder 1)
console.log(1 % 3);    // 1  (1 divided by 3 = 0 remainder 1)

The remainder operator is commonly used for:

// Check if a number is even or odd
let num = 42;
if (num % 2 === 0) {
  console.log("Even");    // This runs
} else {
  console.log("Odd");
}

// Cycle through values (wrap around)
for (let i = 0; i < 10; i++) {
  let dayIndex = i % 7;   // Always 0-6, cycles back after 6
  console.log(dayIndex);  // 0, 1, 2, 3, 4, 5, 6, 0, 1, 2
}

// Get the last digit of a number
console.log(1234 % 10);   // 4

With negative numbers, the result takes the sign of the dividend (the left operand):

console.log(7 % 3);    //  1
console.log(-7 % 3);   // -1  (sign follows the left operand)
console.log(7 % -3);   //  1  (sign follows the left operand)
console.log(-7 % -3);  // -1

Exponentiation Operator: **

The ** operator raises the left operand to the power of the right operand. It was introduced in ES2016:

console.log(2 ** 3);    // 8       -> 2³
console.log(3 ** 2);    // 9       -> 3²
console.log(10 ** 0);   // 1       -> anything to the power of 0 is 1
console.log(2 ** 10);   // 1024
console.log(2 ** -1);   // 0.5     -> 2⁻¹ = 1/2
console.log(9 ** 0.5);  // 3       -> square root (9^0.5 = √9)

// Before ES2016, you had to use Math.pow()
console.log(Math.pow(2, 3));  // 8 -> same result, older syntax

Right-associativity: The ** operator is evaluated from right to left, which is unique among binary operators:

console.log(2 ** 3 ** 2);
// Evaluated as: 2 ** (3 ** 2) = 2 ** 9 = 512
// NOT as: (2 ** 3) ** 2 = 8 ** 2 = 64

Arithmetic with Special Values

// Division by zero
console.log(1 / 0);                 // Infinity
console.log(-1 / 0);                // -Infinity
console.log(0 / 0);                 // NaN

// Infinity arithmetic
console.log(Infinity + 1);          // Infinity
console.log(Infinity - Infinity);   // NaN
console.log(Infinity * 0);          // NaN
console.log(Infinity * 2);          // Infinity

// NaN propagates
console.log(NaN + 5);               // NaN
console.log(NaN * 10);              // NaN
console.log(NaN - NaN);             // NaN

The String Concatenation Trap with +

The + operator is JavaScript's most overloaded operator. It performs addition when both operands are numbers, but switches to string concatenation when either operand is a string. This dual behavior is the source of countless bugs.

How + Decides: Addition vs. Concatenation

The rule is: if either operand is a string, + performs concatenation. Otherwise, it performs addition.

// Both numbers → addition
console.log(5 + 3);           // 8

// Both strings → concatenation
console.log("5" + "3");       // "53"

// Mixed → concatenation (number is converted to string)
console.log("5" + 3);         // "53"
console.log(5 + "3");         // "53"
console.log("5" + true);      // "5true"
console.log("5" + null);      // "5null"
console.log("5" + undefined); // "5undefined"

The Left-to-Right Trap

The + operator evaluates left to right, and the decision between addition and concatenation is made at each step:

console.log(1 + 2 + "3");    // "33"
// Step 1: 1 + 2 = 3 (both numbers → addition)
// Step 2: 3 + "3" = "33" (one string → concatenation)

console.log("1" + 2 + 3);    // "123"
// Step 1: "1" + 2 = "12" (one string → concatenation)
// Step 2: "12" + 3 = "123" (one string → concatenation)

console.log(1 + "2" + 3);    // "123"
// Step 1: 1 + "2" = "12" (one string → concatenation)
// Step 2: "12" + 3 = "123" (one string → concatenation)

Once a string enters the chain, everything after it becomes concatenation.

Real-World Bug Example

let price = 19.99;
let tax = 5;
let shippingCost = "3";     // Came from an API as a string
let total;

total = price + tax + shippingCost;
console.log(total);         // "24.993" (string, not 27.99!)
console.log(typeof total);  // "string"

// Fix: convert the string to a number first
total = price + tax + Number(shippingCost);
console.log(total);         // 27.99
console.log(typeof total);  // "number"

Other Operators Do Not Have This Problem

Only + performs string concatenation. All other arithmetic operators (-, *, /, %, **) always convert their operands to numbers:

console.log("6" - 2);     // 4   ("6" → 6, then 6 - 2)
console.log("6" * "3");   // 18  (both → numbers)
console.log("6" / "2");   // 3
console.log("10" % "3");  // 1
console.log("2" ** "3");  // 8

// This is why - can be used to test if a string is numeric
console.log("5" - 0);     // 5 (same as Number("5"))
console.log("abc" - 0);   // NaN

How to Safely Use + for Addition

// Method 1: Convert strings to numbers before adding
let a = "10";
let b = "20";
console.log(Number(a) + Number(b));   // 30

// Method 2: Unary + operator
console.log(+a + +b);                 // 30

// Method 3: parseInt or parseFloat for strings with units
let width = "100px";
console.log(parseInt(width) + 50);    // 150

Assignment Operators

Assignment operators store a value in a variable. The basic assignment operator is =, and compound assignment operators combine an operation with assignment.

Basic Assignment: =

The = operator assigns the value on the right to the variable on the left:

let x = 10;
let name = "Alice";
let isActive = true;

Important: = is an operator that returns a value. It returns the assigned value, which allows chaining:

let a, b, c;
a = b = c = 5;
// Evaluated right to left: c = 5, b = 5, a = 5
console.log(a, b, c);  // 5 5 5

While chaining works, it can reduce readability. Most style guides recommend separate assignments:

let a = 5;
let b = 5;
let c = 5;

Compound Assignment Operators

Compound operators combine an arithmetic operation with assignment:

let x = 10;

x += 5;   // x = x + 5  → 15
x -= 3;   // x = x - 3  → 12
x *= 2;   // x = x * 2  → 24
x /= 4;   // x = x / 4  → 6
x %= 4;   // x = x % 4  → 2
x **= 3;  // x = x ** 3 → 8

console.log(x);  // 8

String concatenation also works with +=:

let message = "Hello";
message += ", ";
message += "World!";
console.log(message);  // "Hello, World!"

Complete Assignment Operators Table

Operator	Example	Equivalent	Result (if x = 10)
=	x = 5		5
+=	x += 5	x = x + 5	15
-=	x -= 5	x = x - 5	5
*=	x *= 5	x = x * 5	50
/=	x /= 5	x = x / 5	2
%=	x %= 3	x = x % 3	1
**=	x **= 2	x = x ** 2	100
<<=	x <<= 1	x = x << 1	20
>>=	x >>= 1	x = x >> 1	5
>>>=	x >>>= 1	x = x >>> 1	5
&=	x &= 3	x = x & 3	2
|=	x |= 3	x = x | 3	11
^=	x ^= 3	x = x ^ 3	9
&&=	x &&= 5	x = x && 5	5
||=	x ||= 5	x = x || 5	10
??=	x ??= 5	x = x ?? 5	10

The logical assignment operators (&&=, ||=, ??=) were added in ES2021 and are covered in the Logical Operators chapter.

Increment/Decrement: Prefix vs. Postfix

The ++ and -- operators increase or decrease a value by 1. They come in two forms, prefix and postfix, which behave differently when used within expressions.

Basic Usage

let count = 5;

count++;  // count becomes 6
count++;  // count becomes 7
count--;  // count becomes 6

console.log(count);  // 6

When used as standalone statements (on their own line), prefix and postfix produce the same result:

let a = 5;
a++;    // a is now 6
++a;    // a is now 7
// Same effect when used alone

The Difference: Within Expressions

The difference matters when ++/-- is used inside a larger expression:

Prefix (++x): Increments first, then returns the new value:

let x = 5;
let result = ++x;
console.log(x);       // 6  (x was incremented)
console.log(result);  // 6  (result got the NEW value)

Postfix (x++): Returns the current value first, then increments:

let x = 5;
let result = x++;
console.log(x);       // 6  (x was incremented)
console.log(result);  // 5  (result got the OLD value)

Visualizing the Difference

let a = 10;
let b = 10;

console.log(++a);  // 11 (increment, then return (returns 11))
console.log(b++);  // 10 (return, then increment (returns 10))

console.log(a);    // 11 (both variables end up the same)
console.log(b);    // 11 (both variables end up the same)

Practical Examples

// Postfix in a loop (most common usage)
for (let i = 0; i < 5; i++) {
  console.log(i);             // 0, 1, 2, 3, 4
}

// Postfix in array indexing
let items = ["a", "b", "c", "d"];
let index = 0;
console.log(items[index++]);  // "a" (uses index 0, then increments to 1)
console.log(items[index++]);  // "b" (uses index 1, then increments to 2)
console.log(index);           // 2

// Prefix when you need the incremented value immediately
let id = 0;
let newId = ++id;             // id is 1, newId is 1 (useful for generating IDs)

tip

For readability, avoid using ++ and -- inside complex expressions. Use them as standalone statements where the prefix/postfix distinction does not matter:

// Clear and unambiguous
let i = 0;
i++;
let nextValue = i;

// Confusing: what does this do?
let result = arr[i++] + arr[++j] * --k;

Unary Operators

Unary operators work on a single operand. JavaScript has several unary operators, some of which you have already seen.

Unary Plus (+)

The unary + converts its operand to a number. It is identical to Number():

console.log(+true);       // 1
console.log(+false);      // 0
console.log(+"42");       // 42
console.log(+"");         // 0
console.log(+null);       // 0
console.log(+undefined);  // NaN
console.log(+"abc");      // NaN

Common use case: converting string inputs to numbers before addition:

let a = "5";
let b = "3";

console.log(a + b);    // "53" (string concatenation)
console.log(+a + +b);  // 8   (numeric addition)

Unary Minus (-)

The unary - converts to a number and negates it:

console.log(-5);       // -5
console.log(-(-5));    // 5
console.log(-"42");    // -42
console.log(-true);    // -1
console.log(-"abc");   // NaN

typeof

The typeof operator returns a string indicating the type of its operand:

console.log(typeof 42);           // "number"
console.log(typeof "hello");      // "string"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object"  (historical bug)
console.log(typeof {});           // "object"
console.log(typeof []);           // "object"  (arrays are objects)
console.log(typeof function(){}); // "function"
console.log(typeof Symbol());     // "symbol"
console.log(typeof 42n);          // "bigint"

typeof is unique because it does not throw an error for undeclared variables:

console.log(typeof nonExistentVar);  // "undefined" (no error!)
console.log(nonExistentVar);         // ReferenceError!

typeof can be used with or without parentheses. It is an operator, not a function:

console.log(typeof(42));  // "number" (parentheses are optional)
console.log(typeof 42);   // "number" (works without them)

delete

The delete operator removes a property from an object:

let user = { name: "Alice", age: 30 };
console.log(user.age);  // 30

delete user.age;
console.log(user.age);  // undefined (property removed)

console.log(user);  // { name: "Alice" }

delete does not work on variables, only on object properties:

let x = 10;
delete x;        // false (has no effect (SyntaxError in strict mode))
console.log(x);  // 10

void

The void operator evaluates an expression and returns undefined:

console.log(void 0);         // undefined
console.log(void "hello");   // undefined
console.log(void (2 + 3));   // undefined

void is rarely used in modern JavaScript. You might encounter void 0 as a reliable way to get undefined in very old code (before undefined was a read-only global), or in javascript:void(0) links in HTML:

<!-- Prevents navigation when clicking the link -->
<a href="javascript:void(0)" onclick="doSomething()">Click me</a>

Operator Precedence: The Complete Priority Table

When an expression contains multiple operators, operator precedence determines the order in which operations are performed. Higher precedence means the operator is evaluated first.

Why Precedence Matters

let result = 2 + 3 * 4;
console.log(result);  // 14, not 20

// Multiplication has higher precedence than addition
// So it's evaluated as: 2 + (3 * 4) = 2 + 12 = 14
// Not as: (2 + 3) * 4 = 5 * 4 = 20

The Precedence Table (Most Common Operators)

Operators are listed from highest to lowest precedence. Operators on the same row have the same precedence and are evaluated according to their associativity (left-to-right or right-to-left).

Precedence	Operator	Description	Associativity
17	()	Grouping	N/A
16	. [] ?. ()	Member access, computed access, optional chaining, function call	Left → Right
15	new (with args)	Constructor call	N/A
14	++ -- (postfix)	Postfix increment/decrement	N/A
13	! ~ + - typeof void delete ++ -- (prefix) await	Unary operators, prefix inc/dec	Right → Left
12	**	Exponentiation	Right → Left
11	* / %	Multiplication, division, remainder	Left → Right
10	+ -	Addition, subtraction	Left → Right
9	<< >> >>>	Bitwise shifts	Left → Right
8	< <= > >= in instanceof	Relational	Left → Right
7	== != === !==	Equality	Left → Right
6	&	Bitwise AND	Left → Right
5	^	Bitwise XOR	Left → Right
4	|	Bitwise OR	Left → Right
3	&&	Logical AND	Left → Right
2	|| ??	Logical OR, Nullish coalescing	Left → Right
1	? :	Conditional (ternary)	Right → Left
0	= += -= etc.	Assignment	Right → Left
-1	,	Comma	Left → Right

Practical Precedence Examples

// Multiplication before addition
console.log(2 + 3 * 4);               // 14 → 2 + (3 * 4)

// Comparison before logical AND
console.log(5 > 3 && 10 < 20);        // true → (5 > 3) && (10 < 20)

// Unary operators before binary
console.log(-2 ** 2);                 // SyntaxError! Ambiguous: -(2**2) or (-2)**2?
console.log((-2) ** 2);               // 4
console.log(-(2 ** 2));               // -4

// Assignment has very low precedence
let x = 2 + 3;                        // Addition happens first, then assignment: x = 5

// Logical AND before logical OR
console.log(true || false && false);  // true → true || (false && false)

// NOT has highest precedence among logical operators
console.log(!true && false);          // false → (!true) && false → false && false

Use Parentheses for Clarity

Even when you know the precedence rules, parentheses make your intent explicit:

// Without parentheses: technically correct, but requires knowing precedence
let result = a + b * c > d && e || f;

// With parentheses: crystal clear
let result = ((a + (b * c)) > d) && e) || f;

// Practical example: calculate price with tax, then check if affordable
let isAffordable = (price * (1 + taxRate)) <= budget && inStock;

tip

When in doubt, add parentheses. They cost nothing in terms of performance and make your code easier to understand. You should not need to memorize the entire precedence table. Remember the common ones (multiplication before addition, comparison before logical), and use parentheses for everything else.

Bitwise Operators (Overview and Practical Uses)

Bitwise operators work on numbers at the level of individual bits (0s and 1s). While they are not commonly used in everyday JavaScript, they appear in certain algorithms, permission systems, and performance-critical code.

How Bitwise Operators Work

JavaScript converts numbers to 32-bit signed integers before applying bitwise operations, then converts the result back to a regular number.

// Decimal 5 in binary: 00000000 00000000 00000000 00000101
// Decimal 3 in binary: 00000000 00000000 00000000 00000011

console.log(5 & 3);     // 1  (AND: 101 & 011 = 001)
console.log(5 | 3);     // 7  (OR:  101 | 011 = 111)
console.log(5 ^ 3);     // 6  (XOR: 101 ^ 011 = 110)
console.log(~5);        // -6 (NOT: inverts all bits)
console.log(5 << 1);    // 10 (Left shift: 101 → 1010)
console.log(5 >> 1);    // 2  (Right shift: 101 → 10)

Bitwise Operators Table

Operator	Name	Description
&	AND	Both bits must be 1
|	OR	At least one bit must be 1
^	XOR	Exactly one bit must be 1
~	NOT	Inverts all bits
<<	Left shift	Shifts bits left, fills with 0
>>	Sign-propagating right shift	Shifts right, preserves sign
>>>	Zero-fill right shift	Shifts right, fills with 0

Practical Uses

Fast integer conversion (truncate decimals):

console.log(~~3.7);           // 3 (double NOT truncates to integer)
console.log(3.7 | 0);         // 3 (OR with 0 truncates to integer)
console.log(3.7 >> 0);        // 3 (shift by 0 truncates to integer)

// Equivalent to Math.trunc() but faster (and less readable)
console.log(Math.trunc(3.7)); // 3

Flag/permission systems:

const READ    = 0b001;            // 1
const WRITE   = 0b010;            // 2
const EXECUTE = 0b100;            // 4

// Combine permissions with OR
let userPerms = READ | WRITE;     // 0b011 = 3

// Check permission with AND
if (userPerms & READ) {
  console.log("Can read");        // This runs
}
if (userPerms & EXECUTE) {
  console.log("Can execute");     // This does NOT run
}

// Add a permission with OR
userPerms = userPerms | EXECUTE;  // 0b111 = 7

// Remove a permission with AND + NOT
userPerms = userPerms & ~WRITE;   // 0b101 = 5

Swapping variables without a temporary:

let a = 5;
let b = 3;

a = a ^ b;  // a = 6
b = a ^ b;  // b = 5
a = a ^ b;  // a = 3

console.log(a, b);  // 3, 5 (swapped!)

// Much clearer with destructuring (prefer this):
[a, b] = [b, a];

info

In modern JavaScript, bitwise tricks for performance are almost never necessary. JavaScript engines optimize Math.trunc(), Math.floor(), and other standard methods very well. Use bitwise operators when working with binary data, flags, or low-level APIs. For everything else, prefer the readable standard methods.

The Comma Operator

The comma operator , evaluates multiple expressions from left to right and returns the value of the last expression. It is one of the least-used operators in JavaScript.

let result = (1 + 2, 3 + 4, 5 + 6);
console.log(result);  // 11 (only the last expression's value is kept)

// Step by step:
// 1. Evaluates 1 + 2 = 3 (discarded)
// 2. Evaluates 3 + 4 = 7 (discarded)
// 3. Evaluates 5 + 6 = 11 (returned)

caution

The comma operator has the lowest precedence of all operators. Without parentheses, let result = 1 + 2, 3 + 4 does not use the comma operator. Instead, it declares a variable result = 3 and then 3 + 4 is treated as a separate (invalid) statement. Always use parentheses when using the comma operator.

Practical Uses

The comma operator is most commonly seen in for loops with multiple variables:

// Multiple initializations and updates in a for loop
for (let i = 0, j = 10; i < j; i++, j--) {
  console.log(i, j);
}
// 0 10
// 1 9
// 2 8
// 3 7
// 4 6

In the for loop above, i++, j-- uses the comma operator to update both variables in the increment section.

Outside of for loops, the comma operator is rarely used and can hurt readability. If you need to evaluate multiple expressions, use separate statements.

Common Mistake: Operator Precedence Surprises

Mistake 1: typeof with Arithmetic

// What does this return?
console.log(typeof 2 + " is a number");   // "number is a number"

// typeof has higher precedence than +
// So it's: (typeof 2) + " is a number"
// = "number" + " is a number"

// If you meant to check the type of the entire expression:
console.log(typeof (2 + " is a number"));  // "string"

Mistake 2: Negation with Exponentiation

// This is a SyntaxError!
console.log(-2 ** 2);
// JavaScript doesn't know if you mean -(2**2) = -4 or (-2)**2 = 4

// You must be explicit:
console.log(-(2 ** 2));   // -4
console.log((-2) ** 2);   // 4

Mistake 3: Assignment in Conditions

let x = 5;

// MISTAKE: single = is assignment, not comparison
if (x = 10) {
  console.log("This always runs!");  // x is now 10 (truthy), condition is true
}
console.log(x);  // 10 (x was changed!)

// CORRECT: use === for comparison
if (x === 10) {
  console.log("x is 10");
}

ESLint catches this mistake with the no-cond-assign rule.

Mistake 4: Chaining Comparisons (Does Not Work Like Math)

// In math: 1 < 5 < 3 is false (5 is not less than 3)
// In JavaScript:
console.log(1 < 5 < 3);  // true (NOT what you'd expect!)

// Here's why:
// Step 1: (1 < 5) = true
// Step 2: true < 3 → Number(true) < 3 → 1 < 3 → true

// Correct way to check if 5 is between 1 and 3:
let val = 5;
console.log(val > 1 && val < 3);  // false (correct!)

Mistake 5: Increment/Decrement Inside Expressions

let i = 0;
let arr = [10, 20, 30];

// Confusing: what index is accessed?
console.log(arr[i++] + arr[i++]);
// Step 1: arr[0] (i becomes 1) → 10
// Step 2: arr[1] (i becomes 2) → 20
// Result: 30

// Much clearer:
let first = arr[0];
let second = arr[1];
console.log(first + second);  // 30

Mistake 6: Forgetting That + Concatenates Strings

let quantity = prompt("How many?");   // Suppose it returns "3"
let price = 10;

console.log(quantity * price);        // 30 (* converts to number)

// But + would be a problem:
console.log(quantity + price);        // "310" (concatenation!)
console.log(+quantity + price);       // 13 (fixed with unary +)

Mistake 7: Short-Circuit Evaluation Misunderstanding

// && returns the first falsy value, NOT true/false
console.log(1 && 2 && 3);         // 3 (all truthy, returns last)
console.log(1 && 0 && 3);         // 0 (first falsy value)

// || returns the first truthy value
console.log(0 || "" || "hello");  // "hello" (first truthy)
console.log(0 || "" || null);     // null (all falsy, returns last)

// This catches people when they expect true/false:
let result = "hello" && "world";
console.log(result);              // "world" (not true!)

This topic is covered fully in the Logical Operators chapter, but it is worth flagging here because && and || behave differently from most other languages.

Summary

Operators are fundamental building blocks of every JavaScript expression:

• Arithmetic operators (+, -, *, /, %, **) perform math. Division always returns a float. The % operator returns the remainder.
• The + operator is overloaded: it adds numbers but concatenates strings. If either operand is a string, the result is concatenation. Convert strings to numbers with Number(), parseInt(), or unary + before adding.
• Assignment operators (=, +=, -=, etc.) store values in variables. Compound operators combine an operation with assignment.
• Increment/Decrement (++, --) come in prefix and postfix forms. Prefix returns the new value; postfix returns the old value. Use them as standalone statements to avoid confusion.
• Unary operators include + (convert to number), - (negate), typeof (check type), delete (remove property), and void (return undefined).
• Operator precedence determines evaluation order. Multiplication before addition, comparison before logical. When in doubt, use parentheses.
• Bitwise operators work on the binary level. They are used for flag systems, permissions, and low-level optimizations, but are uncommon in everyday code.
• The comma operator evaluates multiple expressions and returns the last one. It is mainly useful in for loop headers.
• Watch out for precedence surprises: typeof with +, negative exponentiation, assignment = vs. comparison === in conditions, and the left-to-right evaluation of chained + operators.

With operators mastered, you are ready to explore comparisons in depth, where you will learn the precise rules for == vs. === and how JavaScript compares values of different types.