Operators

Operators are the building blocks of any programming language, and JavaScript is no exception. They are used to perform operations on variables and values. In JavaScript, we have several types of operators: arithmetic, assignment, comparison, logical, and more. Understanding these operators, their syntax, and how they are used is crucial for writing effective JavaScript code.

Desired Outcomes:

  • Understanding Different Types of Operators
  • Learn how to perform mathematical calculations using arithmetic operators (+, -, *, /, and %).
  • Understand how to assign values to variables with assignment operators like (=, +=, -=, *=, and /). 
  • Learn how to compare values using comparison operators (==, ===, !=, !==, <, >, <=, >=).
  • Master the use of logical operators (&&, ||, !) for combining conditional statements.

Operators provide the functionality for assigning values, comparing values, performing arithmetic operations, and so on. They provide exactly defined functionalities, and to work correctly, they need to be given a precisely defined number and type of data on which they operate.

Arithmetic Operators

Arithmetic operators are most commonly used for calculations between variables and/or values, but they can also have different functionalities, such as concatenating strings. The stated operators and their purposes are as follows:

  • "+" operator - addition of numbers or concatenation of strings
  • "-" operator - subtraction and marking negative numbers 
  • "*" operator - multiplication 
  • "/" operator - division. The result of the division is always a decimal number 
  • % operator (modulo) - returns the remainder of dividing the first number by the second number 
  • "++" operator (increment) - if it is in front of a number (++x), it first increases the number's value, and then calculates the value of the expression in which the number participates. If it is behind the number (x++), it first calculates the expression and then increases the number's value by 1 
  • "--" operator (decrement) - works the same as increment (++), but decreases the value

"+" Operator:

let sum = 5 + 3; // Adds numbers
console.log(sum); // Output: 8

let stringConcat = "Hello" + " " + "World"; // Concatenates strings
console.log(stringConcat); // Output: "Hello World"

"-" Operator:

let difference = 10 - 5; // Subtracts numbers
console.log(difference); // Output: 5

let negativeNumber = -5; // Marks a number as negative
console.log(negativeNumber); // Output: -5

"*" Operator:

let product = 4 * 3; // Multiplies numbers
console.log(product); // Output: 12

"/" Operator:

let division = 10 / 2; // Divides numbers
console.log(division); // Output: 5

"%" Operator (Modulo):

let remainder = 7 % 3; // Returns the remainder of the division
console.log(remainder); // Output: 1

"++" Operator (Increment):

let a = 5;
console.log(++a); // Increments and then returns the value, Output: 6

let b = 5;
console.log(b++); // Returns the value and then increments, Output: 5
console.log(b); // Output: 6

"--" Operator (Decrement):

let c = 5;
console.log(--c); // Decrements and then returns the value, Output: 4

let d = 5;
console.log(d--); // Returns the value and then decrements, Output: 5
console.log(d); // Output: 4

Assignment operators

Assignment operators are applied to assign values to JavaScript variables. The most common assignment operator is the equals sign '='. The assignment operators and their purposes are as follows:

  • "=" operator - assigns the value of the variable or expression on the right side to the variable on the left side (x = y;) 
  • += operator - adds two variables (x = x + y;) and assigns the sum to the variable on the left side 
  • -= operator - subtracts two variables (x = x - y;) and assigns the difference to the variable on the left side 
  • "*=" operator - multiplies two variables (x = x * y;) and assigns the product to the variable on the left side 
  • "/=" operator - divides two variables (x = x / y;) and assigns the quotient to the variable on the left side 
  • "%=" operator - performs integer division of two variables (x = x % y;) and assigns the remainder of the division to the variable on the left side

"=" Operator:

let x = 5; // Assigns 5 to x
console.log(x); // Output: 5

"+=" Operator:

let y = 10;
y += 5; // Equivalent to y = y + 5
console.log(y); // Output: 15

"-=" Operator:

let z = 20;
z -= 5; // Equivalent to z = z - 5
console.log(z); // Output: 15

"*=" Operator:

let w = 4;
w *= 3; // Equivalent to w = w * 3
console.log(w); // Output: 12

"/=" Operator:

let v = 10;
v /= 2; // Equivalent to v = v / 2
console.log(v); // Output: 5

"%=" Operator:

let u = 7;
u %= 4; // Equivalent to u = u % 4
console.log(u); // Output: 3

Comparison Operators

Comparison operators compare the values of two variables or expressions and return true or false depending on the accuracy of the comparison. The comparison operators and their purposes are as follows:

  • "==" operator (equality) - returns true if the variables are equal (x == y). The variables do not have to be of the same type to return a true value 
  • "===" operator (strict equality) - returns true if the variables are equal and of the same data type (x == y) 
  • "!=" operator (inequality) - returns true if the variables are not equal (x != y). The negation of the "==" expression 
  • "!==" operator (strict inequality) - returns true if the variables are not equal (x !== y). The negation of the "===" expression 
  • ">" operator - returns true if the variable on the left side is greater than the variable on the right side (x > y)
  • "<" operator - returns true if the variable on the left side is smaller than the variable on the right side (x < y) 
  • ">=" operator - returns true if the variable on the left side is greater than or equal to the variable on the right side (x >= y) 
  • "<=" operator - returns true if the variable on the left side is smaller than or equal to the variable on the right side (x <= y)

"==" Operator (Equality):

console.log(2 == '2'); // True because the values are equal

"===" Operator (Strict Equality):

console.log(2 === '2'); // False because the types are different

"!=" Operator (Inequality):

console.log(3 != '4'); // True because the values are not equal

"!==" Operator (Strict Inequality):

console.log(3 !== 3); // False because both the value and type are equal

">" Operator:

console.log(5 > 3); // True because 5 is greater than 3

"<" Operator:

console.log(5 < 3); // False because 5 is not less than 3

">=" Operator:

console.log(5 >= 5); // True because 5 is equal to 5

"<=" Operator:

console.log(5 <= 4); // False because 5 is not less than or equal to 4

Logical operators

Logical operators connect two or more logical expressions and return true or false depending on the value of the logical expressions. 

  • "&&" operator - the logical AND operator returns true if both expressions are true 
  • "||" operator - the logical OR operator returns true if at least one expression is true 
  • "!" operator - the logical NOT operator returns true if the expression is false and false if the expression is true

"&&" Operator (Logical AND):

console.log(true && false); // False because one operand is false

"||" Operator (Logical OR):

console.log(true || false); // True because at least one operand is true

"!" Operator (Logical NOT):

console.log(!true); // False because the operand is true

Each of these examples illustrates the use of different operators in JavaScript, showing how they can be applied in various programming scenarios.

Updated on:

Part of our complete: JavaScript Fundamentals guide

Want exercises and real projects for this lesson? Get the full course.