Operators In JavaScript

Hey Devs!

Operators and Operands are the very basics of any programming language. To either perform calculations, some comparison or something logical. You need to know about operators.
Think of variables like (nouns) and operators like (verbs). They both combine to form a meaning to an statement (your code line).

If you are a complete beginner, I highly recommend you read this blog first before starting this one. You can find it here: JavaScript Data Types for Beginners.

Today, we will learn about JavaScript Operators, the symbols that make our code do things.

What are Operators?

In JavaScript, an operator is a special symbol we use to perform an operation on values. The values that the operator works on are called operands.

For example, in 10 + 5, the + is the operator, and 10 and 5 are the operands. The operator tells the computer to add the two values together. It's that simple!

Types of JavaScript Operators

JavaScript has several types of operators. Let's go through them one by one.

1. Arithmetic Operators

These are the operators you learned in school for basic math. They are used to perform calculations with numbers.

Let's take two variables: let a = 10; and let b = 4;

let pencils = 12;
let students = 5;

// The modulo operator is useful for finding what's left over.
let leftoverPencils = pencils % students;
console.log(leftoverPencils); // Output: 2
// Each student gets 2 pencils, and 2 are left.

2. Assignment Operators

These operators are used to assign values to variables. The most common one is the equals sign (=).

// The '=' operator assigns the value 21 to the variable 'age'.
let age = 21;

There are also shorthand assignment operators that combine a math operation with assignment. They make the code shorter.

let moneyInPocket = 100; // I have 100 rupees.

// I buy a snack for 20 rupees.
moneyInPocket -= 20; // This is the same as: moneyInPocket = moneyInPocket - 20;

console.log(moneyInPocket); // Output: 80

3. Comparison Operators

Comparison operators (or Relational Operators) are used to compare two values. They are the foundation of decision-making in code because the result is always a boolean value: true or false.

Important: Comparing for Equality

There are two ways to check if values are equal, but you should always use one of them.

• === (Strict Equality): Returns true only if the values are equal AND they are of the same data type. This is the one you should always use.

• == (Loose Equality): Tries to convert the values to the same type before comparing. This can cause unexpected bugs.

console.log(100 === 100);   // Output: true (Same value, same type)
console.log(100 === "100"); // Output: false (Same value, but number vs. string type)

// Now look at the confusing loose equality
console.log(100 == "100");  // Output: true (Confusing! Avoid this.)

Similarly, for checking if values are not equal, use !== (Strict Inequality).

4. Logical Operators

Logical operators are used to combine two or more true/false conditions.

let hasAadhaarCard = true;
let hasPanCard = false;

// To open a bank account, you need both (let's assume).
let canOpenAccount = hasAadhaarCard && hasPanCard;
console.log(canOpenAccount); // Output: false (because hasPanCard is false)

// To get a SIM card, you need either one.
let canGetSim = hasAadhaarCard || hasPanCard;
console.log(canGetSim); // Output: true (because hasAadhaarCard is true)

5. Unary Operators

A unary operator works on only one operand. We have already seen some!

• ++ (Increment): Increases a number value by 1.

• -- (Decrement): Decreases a number value by 1.

• ! (Logical NOT): We saw this in logical operators. It takes one boolean value and inverts it.

• typeof: This operator returns a string indicating the data type of a value. It's very useful for checking your data.

let score = 10;
score++; // score is now 11
console.log(score);

let lives = 3;
lives--; // lives is now 2
console.log(lives);

console.log(typeof "Hello"); // Output: "string"
console.log(typeof 123);     // Output: "number"
console.log(typeof true);    // Output: "boolean"

6. The Ternary Operator

This is the only operator in JavaScript that takes three operands. It's a short way to write an if-else statement. It is heavily used in react and also in backend because it’s much simpler and easy to understand.

The structure is: condition ? value_if_true : value_if_false

let age = 20;

let message = (age >= 18) ? "You can vote." : "You cannot vote.";

console.log(message); // Output: "You can vote."

This is much shorter than writing a full if { ... } else { ... } block for simple cases.

Operator Precedence

Just like in math, JavaScript has an order in which it runs operators. For example, multiplication (*) is done before addition (+). This is called operator precedence.

let result = 5 + 2 * 3; // JavaScript will do 2 * 3 first.
console.log(result); // Output: 11 (not 21)

If you want to control the order, you can use parentheses (). Operations inside parentheses are always done first.

let result2 = (5 + 2) * 3; // (5 + 2) is done first.
console.log(result2); // Output: 21

You don't need to memorize the whole order, but just be aware that it exists.

Wrapping Up

Operators are the building blocks that allow us to work with our data. We've covered the most important ones you'll use every day. Understanding them is a huge step in your JavaScript journey.

The best way to learn is by doing. Open your browser console (right-click on a page and click "Inspect", then go to the "Console" tab) and try these examples. Create your own variables and see what happens. Practice is key!

Enjoy the content here?

Sign up on our platform or join our WhatsApp channel here to get more hands-on guides like this, delivered regularly.

See you in the next blog. Until then, keep practicing and happy learning!