JavaScript Operators

Have you ever wondered how code does stuff—like adding numbers or deciding if one value is bigger than another? In JavaScript, the magic happens with expressions and operators. They’re like the ingredients and tools in a recipe: expressions mix things together to get a result, and operators are the actions (like adding or comparing) that make it happen.

In this guide, we’ll break down what expressions and operators are, explore their types, and see how they work in JavaScript. Whether you’re new to coding or brushing up, you’ll leave knowing how to use these building blocks in your own projects. Ready? Let’s get started!

What Are Expressions in Programming?

Think of an expression as a mini-question that JavaScript answers with a value. It’s like asking, “What’s 5 + 3?” and getting “8” back. In programming, an expression is any chunk of code that resolves to something—could be a number, a word, or even a true/false answer.

Two Types of Expressions

Expressions come in two flavors:

Pure Expressions (Just Calculate)
These only figure out a value and don’t mess with anything else.

Example: 3 + 4 resolves to 7.
Catch: If you don’t use the result (like saving it to a variable), JavaScript forgets it. Writing 3 + 4; by itself is like doing math in your head and not telling anyone—kind of a waste!

Expressions with Side Effects (Do More)
These compute a value and change something in your program.

Example: x = 7 sets x to 7 and resolves to 7. The side effect? x now has a new value.
Another one: console.log("Hi") prints “Hi” and resolves to undefined.

Why Expressions Matter

Expressions are everywhere in code. They’re how you add numbers, assign values, or even decide if something’s true. Without them, your program would just sit there doing nothing!

What Are Operators in Programming?

Operators are the action heroes of expressions. They’re symbols—like +, -, or =—that tell JavaScript what to do with values. In 3 + 4, the + is the operator saying, “Add these together!”

Operators team up with values (called operands) to make expressions work. For example:

5 + 2: + is the operator, 5 and 2 are operands, and the result is 7.
x = 10: = is the operator, assigning 10 to x.

Let’s explore the main types of operators in JavaScript!

Types of Operators in JavaScript

JavaScript has a toolbox full of operators, each with a special job. Here’s a rundown of the big categories, with examples to make them crystal clear.

1. Assignment Operators: The Value Givers

These operators put values into variables—like handing out gifts.

= (Simple Assignment): Gives a value to a variable.

  let x = 5; // x now holds 5
  console.log(x); // Output: 5

Shorthand Versions: Combine assignment with other actions.
+=: Adds and assigns.
javascript let y = 10; y += 3; // y = y + 3 console.log(y); // Output: 13
-=, *=, /=: Subtract, multiply, or divide and assign.
When to Use: Setting or updating variables.

2. Arithmetic Operators: The Math Wizards

These handle all your math needs—addition, subtraction, and more.

+ (Addition): Adds numbers or joins strings.

  console.log(5 + 3); // Output: 8
  console.log("Hello " + "world"); // Output: "Hello world"

- (Subtraction): Takes one number from another.

  console.log(10 - 4); // Output: 6

* (Multiplication): Multiplies numbers.

  console.log(2 * 3); // Output: 6

/ (Division): Divides numbers.

  console.log(15 / 3); // Output: 5

% (Modulus): Gives the remainder after division.

  console.log(10 % 3); // Output: 1 (3 goes into 10 three times, remainder 1)

** (Exponentiation)**: Raises a number to a power.

  console.log(2 ** 3); // Output: 8 (2 × 2 × 2)

++ (Increment): Adds 1 to a variable.

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

-- (Decrement): Subtracts 1.

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

When to Use: Calculations—like totals, discounts, or game scores.

3. Comparison Operators: The Decision Makers

These compare two values and return true or false.

== (Loose Equality): Checks if values are equal (converts types).

  console.log(5 == "5"); // Output: true

=== (Strict Equality): Checks value and type.

  console.log(5 === "5"); // Output: false

!= (Loose Inequality): Checks if values aren’t equal.

  console.log(5 != "6"); // Output: true

!== (Strict Inequality): Checks value and type mismatch.

  console.log(5 !== "5"); // Output: true

<, >, <=, >=: Less than, greater than, etc.

  console.log(3 < 5); // Output: true
  console.log(7 >= 7); // Output: true

When to Use: Decisions—like “Is this score high enough?”

4. Logical Operators: The Logic Builders

These combine true/false values for bigger decisions.

&& (AND): True if both sides are true.

  console.log(5 > 3 && 2 < 4); // Output: true

|| (OR): True if at least one side is true.

  console.log(5 < 3 || 2 < 4); // Output: true

! (NOT): Flips true to false (or vice versa).

  console.log(!true); // Output: false

?? (Nullish Coalescing): Picks the first non-null/non-undefined value.

  let x = null ?? "default"; // Output: "default"

When to Use: Conditions—like “Is it sunny AND warm?”

5. String Operators: The Word Joiners

The + operator doubles as a string combiner (called concatenation).

Example:

  let greet = "Hi" + " there";
  console.log(greet); // Output: "Hi there"

+=: Adds and assigns strings.

  let text = "Hello";
  text += " world";
  console.log(text); // Output: "Hello world"

When to Use: Building messages or full names.

6. Conditional (Ternary) Operator: The Shortcut

The ternary operator (?:) is a quick if-else in one line.

Syntax: condition ? valueIfTrue : valueIfFalse
Example:

  let age = 20;
  let canVote = age >= 18 ? "Yes" : "No";
  console.log(canVote); // Output: "Yes"

When to Use: Simple either/or choices.

7. Bitwise Operators: The Binary Ninjas

These work on numbers as binary bits (0s and 1s)—great for low-level tasks.

Examples: & (AND), | (OR), ^ (XOR), ~ (NOT), << (Left Shift), >> (Right Shift), >>> (Zero-Fill Right Shift).

  console.log(5 & 3); // Output: 1 (binary: 101 & 011 = 001)

When to Use: Rare for beginners—think hardware or optimization.

8. Unary Operators: The Solo Acts

These work on just one value.

+ (Unary Plus): Converts to a number.

  console.log(+"3"); // Output: 3

- (Unary Minus): Flips a number’s sign.

  console.log(-5); // Output: -5

typeof: Tells you a value’s type.

  console.log(typeof "hello"); // Output: "string"

When to Use: Tweaking single values or checking types.

9. Comma Operator: The Multi-Tasker

The comma (,) runs multiple expressions and returns the last one.

Example:

  let x = (1 + 2, 3 + 4);
  console.log(x); // Output: 7

When to Use: Packing multiple actions into a for loop.

Quick Reference Table

Operator Type	Examples	Job Description
Assignment	`=`, `+=`	Sets or updates values
Arithmetic	`+`, `-`, `*`, `/`	Math operations
Comparison	`==`, `===`, `<`	Compares values
Logical	`&&`, `\|\|`, `!`	Builds true/false logic
String	`+`, `+=`	Joins text
Ternary	`?:`	Quick if-else decisions
Bitwise	`&`, `\|`	Binary-level operations
Unary	`+`, `-`, `typeof`	Works on one value

Real-World Examples

Example 1: Shopping Total

let price = 10;
let tax = 2;
let total = price + tax;
console.log(total); // Output: 12

Example 2: Voting Check

let age = 16;
let canVote = age >= 18 ? "Yes" : "No";
console.log(canVote); // Output: "No"

Example 3: Greeting Builder

let name = "Alex";
let message = "Hello, " + name + "!";
console.log(message); // Output: "Hello, Alex!"

Tips for Using Expressions and Operators

Keep It Simple: Start with basic stuff like + or =.
Use ===: It’s safer than == for comparisons.
Test Your Code: Try small examples to see how operators behave.
Practice: Build something—like a calculator—to get comfy.

Conclusion: Your Coding Toolkit

Expressions and operators are the heart of JavaScript. Expressions give you results, and operators make those results happen—whether it’s adding numbers, comparing values, or flipping logic. From x = 5 to 3 + 4, they’re the tools you’ll use every day.