JavaScript Operators

Learn how to perform operations and manipulate data in JavaScript!

Learning Objectives

Master arithmetic operators
Understand comparison and logical operators
Learn about assignment and string operators

Explanation

Operators allow you to perform operations on variables and values. JavaScript has several types of operators: 1. Arithmetic Operators: Used for mathematical operations - Addition (+): 5 + 2 equals 7 - Subtraction (-): 5 - 2 equals 3 - Multiplication (*): 5 * 2 equals 10 - Division (/): 5 / 2 equals 2.5 - Modulus (%) - Remainder after division: 5 % 2 equals 1 - Increment (++): Increases value by 1 - Decrement (--): Decreases value by 1 - Exponentiation (**): 5 ** 2 equals 25 (5 squared) 2. Assignment Operators: Assign values to variables - Basic assignment (=): x = 5 - Add and assign (+=): x += 5 (same as x = x + 5) - Subtract and assign (-=): x -= 5 - And more: *=, /=, %=, etc. 3. Comparison Operators: Compare values and return a boolean - Equal to (==): Compares values, not types - Strictly equal to (===): Compares values AND types (recommended) - Not equal to (!=) and Strictly not equal (!==) - Greater than (>), Less than (<) - Greater than or equal to (>=), Less than or equal to (<=) 4. Logical Operators: Combine conditions - AND (&&): Both conditions must be true - OR (||): At least one condition must be true - NOT (!): Reverses the boolean value 5. String Operators: The + operator can also concatenate (join) strings - "Hello" + " " + "World" equals "Hello World"

Code Example

// Arithmetic operators
let sum = 5 + 3;          // 8
let difference = 10 - 4;  // 6
let product = 3 * 6;      // 18
let quotient = 8 / 2;     // 4
let remainder = 10 % 3;   // 1 (remainder of 10 divided by 3)

// Increment and decrement
let count = 5;
count++;  // Now count is 6
count--;  // Now count is 5 again

// Assignment operators
let x = 10;
x += 5;   // Same as x = x + 5, now x is 15
x *= 2;   // Same as x = x * 2, now x is 30

// Comparison operators
let isEqual = (5 == "5");     // true (values are equal, types are not)
let isStrictlyEqual = (5 === "5"); // false (different types)
let isGreater = (10 > 5);     // true
let isLessOrEqual = (7 <= 7); // true

// Logical operators
let hasTicket = true;
let hasPassport = false;
let canTravel = hasTicket && hasPassport; // false (need both)
let canEnterContest = hasTicket || hasPassport; // true (need at least one)
let isStayingHome = !canTravel; // true (opposite of canTravel)

// String concatenation
let firstName = "Luke";
let lastName = "Skywalker";
let fullName = firstName + " " + lastName; // "Luke Skywalker"

Try It Yourself!

Try using different operators to calculate and compare values. For example, calculate the area of a rectangle!

JavaScript Editor

// Arithmetic operators
let sum = 5 + 3;          // 8
let difference = 10 - 4;  // 6
let product = 3 * 6;      // 18
let quotient = 8 / 2;     // 4
let remainder = 10 % 3;   // 1 (remainder of 10 divided by 3)

// Increment and decrement
let count = 5;
count++;  // Now count is 6
count--;  // Now count is 5 again

// Assignment operators
let x = 10;
x += 5;   // Same as x = x + 5, now x is 15
x *= 2;   // Same as x = x * 2, now x is 30

// Comparison operators
let isEqual = (5 == "5");     // true (values are equal, types are not)
let isStrictlyEqual = (5 === "5"); // false (different types)
let isGreater = (10 > 5);     // true
let isLessOrEqual = (7 <= 7); // true

// Logical operators
let hasTicket = true;
let hasPassport = false;
let canTravel = hasTicket && hasPassport; // false (need both)
let canEnterContest = hasTicket || hasPassport; // true (need at least one)
let isStayingHome = !canTravel; // true (opposite of canTravel)

// String concatenation
let firstName = "Luke";
let lastName = "Skywalker";
let fullName = firstName + " " + lastName; // "Luke Skywalker"

Mini Quiz

Test your knowledge with these quick questions!

1. What's the result of 10 % 3?

3.33

10/3

2. What's the difference between == and ===?

They are exactly the same

== compares values, === compares values and types

== is for numbers, === is for strings

=== is deprecated and shouldn't be used

Your Progress

Lesson ProgressIn Progress

Est. time: 15-20 min

75 points

Module Progress

JavaScript Fundamentals2/10 completed

Complete all lessons to earn the Code Fundamentalist badge!

Rewards

Complete this lesson

Earn 75 points

Complete this module

Earn the Code Fundamentalist badge