DEV Community

Cover image for JavaScript Operators Explained: A Beginner’s Guide to Arithmetic, Comparison, Logical & More
WISDOMUDO
WISDOMUDO

Posted on

JavaScript Operators Explained: A Beginner’s Guide to Arithmetic, Comparison, Logical & More

Introduction

In JavaScript, operators are symbols or keywords used to perform operations on values and variables. Whether you're working with numbers, checking conditions, or making comparisons, JavaScript operators help you manage logic and control flow effectively.

As a beginner, understanding how these operators work will help you write better, cleaner, and more effective code. Our goal with this guide is to make learning JavaScript operators easy, clear, and accessible for beginners.

In the article, we'll cover the following areas:

  1. Arithmetic Operators (+, - ,* , /, %)
  2. Assignment Operators (=, +=, -=, etc.)
  3. Comparison Operators (==, ===, !=, !==, <, >, <=, >=)
  4. Logical Operators (&&, ||, !)
  5. Ternary Operator (condition? value_if_true: value_if_false)
  6. Type Operators ('typeof', 'instanceof')

Let’s now go through each type one by one.

Arithmetic Operators

These operators allow you to perform mathematical operations on numbers.

Addition (+): This operator is commonly used to add one value to another.

Example:

let output = 5 + 3; // output is 8
Enter fullscreen mode Exit fullscreen mode

Subtraction (-): Subtracts one value from another.

Example:

let output = 5 - 3; // output is 2

Enter fullscreen mode Exit fullscreen mode

Multiplication (*): Multiplies two values.

Example:

let output = 5 * 3; // output is 15
Enter fullscreen mode Exit fullscreen mode

Division ( / ): Divides one value by another.

Example:

let output = 6 / 3; // output is 2
Enter fullscreen mode Exit fullscreen mode

Modulus (%): Returns the leftover part of a division between two values.

Example:

let output = 5 % 3; // output is 2
Enter fullscreen mode Exit fullscreen mode

Assignment Operators

These are used for setting or updating variable values. They can also perform operations during an assignment.

Simple Assignment (=): In JavaScript, the equals sign (=) is called the assignment operator.

Example:

let a = 5; // a is now 5
Enter fullscreen mode Exit fullscreen mode

Addition Assignment Operator (+=): Updates the variable by adding another value to it.

Example:

a += 3; // a is now 8 (a = a + 3)

Enter fullscreen mode Exit fullscreen mode

Subtraction Assignment Operator (-=): Subtracts a value from the existing value.

Example:

a -= 2; // a is now 6 (a = a - 2)

Enter fullscreen mode Exit fullscreen mode

Comparison Operators

Comparison operators test values against each other and produce a true or false outcome.

Equality Operator (==): Checks if two values are equal (loosely).

Example:

5 == '5'; // returns true because it only compares values, not types
Enter fullscreen mode Exit fullscreen mode

Strict Equality Operator (===): Checks if two values are equal and of the same type (strict comparison).

Example:

5 === '5'; // returns false because the types are different (number vs. string)
Enter fullscreen mode Exit fullscreen mode

Inequality Operator (!=): Checks if two values are not equal (loosely).

Example:

5 != '5'; // returns false because it only compares values

Enter fullscreen mode Exit fullscreen mode

Strict Inequality Operator (!==): Checks if two values are not equal or of the same type.

Example:

5 !== '5'; // returns true because they are of different types

Enter fullscreen mode Exit fullscreen mode

<, >, <=, >=: Checks if one value is less than, greater than, less than or equal to, or greater than or equal to another value.

Example:

5 < 10; // returns true
5 >= 10; // returns false

Enter fullscreen mode Exit fullscreen mode

Logical Operators

In programming, logical operators are tools for making decisions using Boolean values such as true and false.

AND (&&): The && operator evaluates to true only when both conditions are true.

Example:

true && false; // returns false
Enter fullscreen mode Exit fullscreen mode

OR ( || ): With OR, only one of the conditions needs to be true for the whole statement to be true.

Example:

true || false; // returns true
Enter fullscreen mode Exit fullscreen mode

NOT (!): The Not operator inverts the Boolean value; !true becomes false.

Example:

!true; // returns false
Enter fullscreen mode Exit fullscreen mode

Ternary Operator

This operator allows you to simplify if-else logic into a single line with three elements: condition, true result, and false result.

Example:

let age = 20;
let canVote = age >= 20 ? 'Yes': 'No'; // canVote will be 'Yes' because the condition is true

Enter fullscreen mode Exit fullscreen mode

Type Operators

These operators are used to check types and instances.

typeof: Returns the type of a variable or value.

Example:

typeof 'Hello'; // returns 'string'
typeof 5; // returns 'number
Enter fullscreen mode Exit fullscreen mode

instanceof: checks whether a given object is of a specified class.

Example:

let person = new Person();
person instanceof Person; // returns true
Enter fullscreen mode Exit fullscreen mode

Conclusion

Operators in JavaScript are fundamental building blocks that help you perform actions on variables and data. Whether you're doing calculations, making comparisons, or testing conditions, mastering operators will make your code more powerful and efficient. Start practicing with these operators and soon you’ll be able to apply them confidently in your projects!

You can reach out to me via LinkedIn

Top comments (0)