Mastering JavaScript Operators

Learn how to perform calculations, make decisions, and control the flow of your programs with JavaScript's essential operators.

⚙️

Welcome! Let's dive into JavaScript operators, the symbols that perform actions in your code.

/* Operators are the verbs of JavaScript... */

Arithmetic Operators: The Calculators

These are the mathematical workhorses. You use them for addition (+), subtraction (-), multiplication (*), and division (/). They also include the modulus (%) for finding remainders and increment (++) or decrement (--) for changing values by one.

Comparison Operators: The Decision Makers

Comparison operators are used to compare two values, which results in a Boolean value: true or false. They are essential for making decisions. Key examples include strict equality (===), greater than (>), and less than (<).

Logical Operators: The Connectors

Logical operators combine multiple Boolean expressions to create more complex conditions. The main ones are AND (&&), which requires all conditions to be true, and OR (||), which requires at least one condition to be true.

Assignment Operators: The Value Setters

The most basic assignment operator is the equals sign (=), which assigns a value to a variable. There are also compound assignment operators like += and -= that perform a calculation and an assignment in one step.

Practice Zone

Interactive Test 1: Categorize Operators

Drag the operators to their correct category.

Arrastra en el orden correspondiente.

Arrastra las opciones:

!==

Completa el código:

Arithmetic______

Comparison______

Logical______

Unlock with Premium

Interactive Test 2: Build a Condition

Rellena los huecos en cada casilla.

let age = 25;
let hasLicense = true;

if (age  18  hasLicense) {
  console.log("Can drive");
}

Unlock with Premium

Practice Example: Code Editor

Declare a variable `score` with value `100`. Then, use a compound assignment operator to add `50` to it. Finally, log the `score`.

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

let score = 100;
score += 50;
console.log(score);

Unlock with Premium

Knowledge Check

What will `console.log('5' == 5)` output?

Unlock with Premium

Operators in Action

Operators are not just for theory; they are the core of everyday programming logic. Here's how you'll see them used in real code.

1. Controlling Flow with `if` Statements

Comparison and logical operators are the heart of control flow. They allow your program to make decisions and execute different code blocks based on conditions.

const userRole = 'admin';
const hasPermission = true;

if (userRole === 'admin' && hasPermission) {
  console.log('Access granted.');
} else {
  console.log('Access denied.');
}

2. Performing Dynamic Calculations

Arithmetic operators are constantly used to calculate values on the fly, such as calculating the total price of a shopping cart or determining an element's position.

const subtotal = 150.75;
const taxRate = 0.07;
const total = subtotal + (subtotal * taxRate);

console.log(`Total price: ${total.toFixed(2)}`);

3. Updating State and Counters

Assignment operators, especially compound ones like `+=` and `++`, are essential for updating variables, such as incrementing a counter in a loop or updating a user's score in a game.

let score = 0;

function correctAswer() {
  score += 10; // Add 10 points
  console.log(`New score: ${score}`);
}

Practical Takeaway: Mastering operators means you can write dynamic, responsive, and intelligent code. They are the fundamental tools for expressing logic.

JavaScript Operator Glossary

+ , - , * , /: Arithmetic Operators: Perform basic mathematical operations like addition, subtraction, multiplication, and division.
% (Modulus): Returns the remainder of a division operation. Example: `10 % 3` returns `1`.
=== (Strict Equality): Compares two values for equality without performing type coercion. Both value and type must be the same for it to return `true`.
!== (Strict Inequality): The opposite of strict equality. Returns `true` if the values are not equal or their types are different.
&& (Logical AND): Returns `true` only if both operands (the expressions on its left and right) are true.
|| (Logical OR): Returns `true` if at least one of the operands is true.
! (Logical NOT): Inverts a boolean value. `!true` becomes `false`, and `!false` becomes `true`.
+= , -=: Compound Assignment: Combines a mathematical operation with assignment. `x += y` is shorthand for `x = x + y`.