JavaScript Operators

By /

Operators are symbols that tell JavaScript to perform an operation.

For example, you can use operators to:

  • Add two numbers
  • Subtract numbers
  • Compare values
  • Check multiple conditions
  • Assign values to variables

Let’s look at the most useful Javascript operators with simple examples.

Arithmetic Operators

Arithmetic operators are used for mathematical calculations.

OperatorMeaning
+Addition
-Subtraction
*Multiplication
/Division
%Remainder
**Power

Example: Arithmetic Operators

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Arithmetic Operators</title>
</head>
<body>

    <h1>Arithmetic Operators</h1>

    <script>
        let a = 10;
        let b = 3;

        console.log("Addition:", a + b);
        console.log("Subtraction:", a - b);
        console.log("Multiplication:", a * b);
        console.log("Division:", a / b);
        console.log("Remainder:", a % b);
        console.log("Power:", a ** b);
    </script>

</body>
</html>

Output:

Addition: 13
Subtraction: 7
Multiplication: 30
Division: 3.3333333333333335
Remainder: 1
Power: 1000

The % operator gives the remainder after division.

For example, 10 % 3 gives 1 because 1 is left after dividing 10 by 3.

Assignment Operators

Assignment operators are used to give values to variables.

The basic assignment operator is =.

let score = 50;

JavaScript also provides shortcuts for changing a value.

Example: Assignment Operators

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Assignment Operators</title>
</head>
<body>

    <h1>Assignment Operators</h1>

    <script>
        let score = 10;

        score += 5;
        console.log("After += :", score);

        score -= 3;
        console.log("After -= :", score);

        score *= 2;
        console.log("After *= :", score);

        score /= 4;
        console.log("After /= :", score);
    </script>

</body>
</html>

Output:

After += : 15
After -= : 12
After *= : 24
After /= : 6

For example:

score += 5;

means:

score = score + 5;

These shortcuts are useful when working with changing values.

Comparison Operators

Comparison operators compare two values and return either true or false.

OperatorMeaning
==Equal value
===Equal value and type
!=Not equal value
!==Not equal value or type
>Greater than
<Less than
>=Greater than or equal to
<=Less than or equal to

Example: Comparing Values

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Comparison Operators</title>
</head>
<body>

    <h1>Comparison Operators</h1>

    <script>
        let age = 18;

        console.log(age > 15);
        console.log(age < 15);
        console.log(age === 18);
        console.log(age !== 18);
    </script>

</body>
</html>

Output:

true
false
true
false

== vs ===

This is an important difference in modern JavaScript.

== compares values after allowing type conversion in some cases.

=== checks both the value and the data type.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Equality</title>
</head>
<body>

    <h1>== and ===</h1>

    <script>
        console.log(5 == "5");
        console.log(5 === "5");
    </script>

</body>
</html>

Output:

true
false

5 is a number, while "5" is a string.

In modern JavaScript, === is generally preferred when you want strict comparison.

Logical Operators

Logical operators are used to combine or reverse conditions.

OperatorMeaning
&&AND
`
!NOT

Example: Logical Operators

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Logical Operators</title>
</head>
<body>

    <h1>Logical Operators</h1>

    <script>
        let age = 20;
        let hasId = true;

        console.log(age >= 18 && hasId);
        console.log(age >= 18 || hasId);
        console.log(!hasId);
    </script>

</body>
</html>

Output:

true
true
false

The && operator returns true only when both conditions are true.

The || operator returns true when at least one condition is true.

The ! operator reverses a Boolean value.

Increment and Decrement Operators

  • The ++ operator increases a value by 1.
  • The -- operator decreases a value by 1.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Increment and Decrement</title>
</head>
<body>

    <h1>Increment and Decrement</h1>

    <script>
        let count = 5;

        count++;
        console.log(count);

        count--;
        console.log(count);
    </script>

</body>
</html>

Output:

6
5

These operators are commonly used with loops and counters.

Ternary Operator

The ternary operator is a short way to choose between two values based on a condition.

Its basic form is:

condition ? valueIfTrue : valueIfFalse

Example: Ternary Operator

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Ternary Operator</title>
</head>
<body>

    <h1>Ternary Operator</h1>

    <script>
        let age = 18;

        let result = age >= 18 ? "Adult" : "Minor";

        console.log(result);
    </script>

</body>
</html>

Output:

Adult

We will use this idea more when working with conditional statements.

Key Points

  • Arithmetic operators perform calculations.
  • Assignment operators assign or update values.
  • Comparison operators return true or false.
  • Logical operators combine conditions.
  • ++ increases a value by 1.
  • -- decreases a value by 1.
  • === checks both value and data type.
  • The ternary operator is a short way to handle a simple condition.

In the next chapter, we will use these comparisons and conditions with JavaScript Conditional Statements such as if, else, and switch.

Frequently Asked Questions (FAQs)

Q1. What are JavaScript operators?

JavaScript operators are symbols used to perform operations on values and variables. They can be used for calculations, comparisons, assignments, and logical operations.

Q2. What are JavaScript arithmetic operators?

JavaScript arithmetic operators are used for mathematical calculations. Common operators include + for addition, - for subtraction, * for multiplication, / for division, % for remainder, and ** for power.

Q3. What are JavaScript comparison operators?

HTML provides the structure, CSS controls the design, and JavaScript adds behavior. A JavaScript tutorial typically introduces these three technologies together because they form the foundation of frontend web development.

Q4. What are JavaScript logical operators?

JavaScript logical operators are used to combine or reverse conditions. && means AND, || means OR, and ! means NOT.

Q5. What are JavaScript assignment operators?

JavaScript assignment operators are used to assign or update values in variables. Along with =, JavaScript provides shortcuts such as +=, -=, *=, and /=.

Q6. What is the difference between == and === in JavaScript?

== compares values and may perform type conversion, while === compares both the value and data type. In modern JavaScript operators, === is generally preferred for strict equality comparisons.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top