DEV Community

  Clifford  Isaiah Opoku
Clifford Isaiah Opoku

Posted on • Updated on

Part (2): Operators and Expressions in JavaScript

Introduction

Welcome to the Operators and Expressions section of our JavaScript From Beginner to Master series. In this section, you will learn about the different types of operators in JavaScript and how to use them.

If you haven't read the previous section, I recommend doing so before continuing to get the most out of this section.

What is an Operator?

In JavaScript, an operator is a special symbol used to perform operations on operands, which can be values or variables. For example:

let x = 2;
let y = 3;
let z = x + y; // The + operator adds two numbers (2 and 3) and returns the result, 5.
Enter fullscreen mode Exit fullscreen mode

Types of Operators in JavaScript

JavaScript has several types of operators, including:

  • Arithmetic Operators - used to perform mathematical operations on numerical values (addition, subtraction, multiplication, etc.)
  • Assignment Operators - used to assign values to variables (equal, add and assign, subtract and assign, etc.)
  • Comparison Operators - used to compare two values (equal, greater than, less than, etc.)
  • Logical Operators - used to determine the logic between variables or values (AND, OR, NOT, etc.)
  • String Operators - used to concatenate two strings (addition, addition assignment, etc.)
  • Conditional (Ternary) Operator - used as a shortcut for the if statement (ternary if, else if, else)
  • Bitwise Operators - used to perform bitwise operations on numbers (AND, OR, XOR, NOT, etc.)

Let's start with the Arithmetic Operators.

Arithmetic Operators in JavaScript

Arithmetic operators are used to perform mathematical operations on numerical values (numbers). Here are some common arithmetic operators in JavaScript:

  • Subtraction Operator (-): The subtraction operator subtracts one number from another. Here's an example:
// Subtraction Operator (-) example
let firstNumber = 10;
let secondNumber = 20;
const result = firstNumber - secondNumber;
console.log(result); // Output: -10
Enter fullscreen mode Exit fullscreen mode
  • Multiplication Operator (*) The multiplication operator multiplies two or more numbers. Example:
// Multiplication Operator (*) example
let firstNum = 10;
let secondNum = 20;
const Multiplication = firstNum * secondNum;
console.log(Multiplication); // output: 200
Enter fullscreen mode Exit fullscreen mode
  • * Division Operator (/) The division operator divides one number by another. Example:
// Division Operator (/) example
let firstDivide = 30;
let secondDivide = 20;
const Division = firstDivide / secondDivide;
console.log(Division); // output: 1.5
Enter fullscreen mode Exit fullscreen mode

Next, let's take a look at the Modulus Operator or Remainder Operator in JavaScript.

  • Modulus Operator (%) The modulus operator returns the remainder of a division operation. Here are some examples:
// Modulus Operator (%) example
let firstModulus = 50;
let secondModulus = 20;
const Modulus = firstModulus % secondModulus;
console.log(Modulus); /// Output: 0 (the remainder of 50 / 20 is 10 )
Enter fullscreen mode Exit fullscreen mode

Next, let's take a look at the Increment Operator in JavaScript.

  • Increment Operator (++)* The increment operator increases a number by 1. Here are some examples:
// Increment Operator (++) example
let firstIncrement = 10;
firstIncrement++;
console.log(firstIncrement); // output: 11 ( the value of firstIncrement is increased by 1)
Enter fullscreen mode Exit fullscreen mode
  • Decrement Operator (--) The decrement operator decreases a number by 1. Example:
// Decrement Operator (--) example
let firstDecrement = 10;
firstDecrement--;
console.log(firstDecrement); // output: 9 ( the value of firstDecrement is decreased by 1)
Enter fullscreen mode Exit fullscreen mode

Assignment Operators in JavaScript

JavaScript, assignment operators are used to assign values to variables. Here are some common assignment operators in JavaScript:

  • Simple Assignment Operator (=) The simple assignment operator assigns a value to a variable. Example:
// Assignment Operator (=) example
let Assignment = 10;
console.log(Assignment); // output: 10
Enter fullscreen mode Exit fullscreen mode
  • Addition Assignment Operator (+=) The addition assignment operator adds a value to a variable and assigns the result to the variable.
// Addition Assignment Operator (+=) example
let firstAddition = 10;
let secondAddition = 20;
firstAddition += secondAddition;
console.log(firstAddition); // output: 30 (firstAddition = firstAddition + secondAddition)
Enter fullscreen mode Exit fullscreen mode
  • Subtraction Assignment Operator (-=) The subtraction assignment operator subtracts a value from a variable and assigns the result to the variable.
// Subtraction Assignment Operator (-=) example

let firstSubtraction = 10;
let secondSubtraction = 20;
firstSubtraction -= secondSubtraction;
console.log(firstSubtraction); // output: -10 (firstSubtraction = firstSubtraction - secondSubtraction)
Enter fullscreen mode Exit fullscreen mode
  • Multiplication Assignment Operator (*=) The multiplication assignment operator multiplies a variable by a value and assigns the result to the variable.
// Multiplication Assignment Operator (*=) example

let firstMultiplication = 30;
let secondMultiplication = 40;
firstMultiplication *= secondMultiplication;
console.log(firstMultiplication); // output: 1200 (firstMultiplication = firstMultiplication * secondMultiplication)
Enter fullscreen mode Exit fullscreen mode
  • Division Assignment Operator (/=) The division assignment operator divides a variable by a value and assigns the result to the variable.
let firstDivision = 2;
let secondDivision = 40;
firstDivision /= secondDivision;
console.log(firstDivision); // output: 0.05 (firstDivision = firstDivision / secondDivision)
Enter fullscreen mode Exit fullscreen mode
  • Remainder Assignment Operator (%=) The remainder assignment operator divides a variable by a value and assigns the remainder to the variable.
// Modulus Assignment Operator (%=) example

let firstModulusAssignment = 50;
let secondModulusAssignment = 20;
firstModulusAssignment %= secondModulusAssignment;
console.log(firstModulusAssignment); // output: 10 (firstModulusAssignment = firstModulusAssignment % secondModulusAssignment)
Enter fullscreen mode Exit fullscreen mode

Assignment operators are used to assign values to variables in JavaScript. The most commonly used assignment operator is=, which assigns a value to a variable. Other assignment operators such as +=, -=, \*=, /=,and %= perform arithmetic operations on variables and assign the result to the variable.

JavaScript Comparison Operators

JavaScript provides several operators that can be used to compare values and manipulate strings. These operators are essential for building complex programs and applications. let take a look at some of the most common comparison and string operators in JavaScript.

Comparison Operators

Comparison operators are used to compare two values. Here are some common comparison operators in JavaScript:

  • == (Equal to Operator): Compares two values and returns true if they are equal.
// Equal to Operator (==) example
let firstEqual = 10;
let secondEqual = 20;
console.log(firstEqual == secondEqual); // output: false
Enter fullscreen mode Exit fullscreen mode
  • != (Not Equal to Operator): Compares two values and returns true if they are not equal.
// Not Equal to Operator (!=) example
let firstNotEqual = 10;
let secondNotEqual = 20;
console.log(firstNotEqual != secondNotEqual); // output: true
Enter fullscreen mode Exit fullscreen mode
  • === (Strict Equal to Operator): Compares two values for equality, including their data types.
// Strict Equal to Operator (===) example
let firstStrictEqual = 70;
let secondStrictEqual = 20;
console.log(firstStrictEqual === secondStrictEqual); // output: false
Enter fullscreen mode Exit fullscreen mode
  • !== (Strict Not Equal to Operator): Compares two values for inequality, including their data types.
// Strict Not Equal to Operator (!==) example
let firstStrictNotEqual = 70;
let secondStrictNotEqual = 20;
console.log(firstStrictNotEqual !== secondStrictNotEqual); // output: true
Enter fullscreen mode Exit fullscreen mode
  • > (Greater than Operator): Compares two values and returns true if the value on the left is greater than the value on the right.
// Greater than Operator (>) example
let firstGreater = 100;
let secondGreater = 20;
console.log(firstGreater > secondGreater); // output: true
Enter fullscreen mode Exit fullscreen mode
  • < (Less than Operator): Compares two values and returns true if the value on the left is less than the value on the right.
// Less than Operator (<) example
let firstLess = 100;
let secondLess = 20;
console.log(firstLess < secondLess); // output: false
Enter fullscreen mode Exit fullscreen mode
  • >= (Greater than or Equal to Operator): Compares two values and returns true if the value on the left is greater than or equal to the value on the right.
// Greater than or Equal to Operator (>=) example
let firstGreaterEqual = 100;

let secondGreaterEqual = 20;

console.log(firstGreaterEqual >= secondGreaterEqual); // output: true
Enter fullscreen mode Exit fullscreen mode
  • <= (Less than or Equal to Operator): Compares two values and returns true if the value on the left is less than or equal to the value on the right.
// Less than or Equal to Operator (<=) example
let firstLessEqual = 100;
let secondLessEqual = 20;
console.log(firstLessEqual <= secondLessEqual); // output: false
Enter fullscreen mode Exit fullscreen mode

Logical Operators

Logical operators perform logical operations and return a boolean value, either true or false. Here are some common logical operators in JavaScript:

  • && (Logical AND Operator): Returns true if both operands are true, and false otherwise.
let firstLogicalAnd = 200;
let secondLogicalAnd = 20;
console.log(
  firstLogicalAnd > secondLogicalAnd && firstLogicalAnd < secondLogicalAnd
); // output: false
Enter fullscreen mode Exit fullscreen mode
  • || (Logical OR Operator): Returns true if either of the operands is true, and false otherwise.
// Logical OR Operator (||) example

let firstLogicalOr = 200;
let secondLogicalOr = 20;
console.log(
  firstLogicalOr > secondLogicalOr || firstLogicalOr < secondLogicalOr
); // output: true
Enter fullscreen mode Exit fullscreen mode
  • ! (Logical NOT Operator): Returns the opposite of the operand.
// Logical NOT Operator (!) example

let firstLogicalNot = 10;
let secondLogicalNot = 20;
console.log(!(firstLogicalNot > secondLogicalNot)); // output: false
Enter fullscreen mode Exit fullscreen mode

String Operators in JavaScript

JavaScript provides several string operators that can be used to manipulate and concatenate strings. Here are some common string operators in JavaScript:

  • + (Concatenation Operator): Concatenates two strings and returns a new string that is the combination of the two strings.
let firstConcatenation = "Hello";
let secondConcatenation = "World";
console.log(firstConcatenation + secondConcatenation); // output: HelloWorld
Enter fullscreen mode Exit fullscreen mode
  • += (Compound concatenation assignment operator): Concatenates a string to the end of another string and returns a new string that is the combination of the two strings.
let firstConcatenationAssignment = "Hello";
let secondConcatenationAssignment = "World";
firstConcatenationAssignment += secondConcatenationAssignment;
console.log(firstConcatenationAssignment); // output: HelloWorld
Enter fullscreen mode Exit fullscreen mode
  • === (Strict equality operator): Compares two strings for strict equality and returns true if they are equal.
// Strict equality operator (===) example

let firstStrictEquality = "Hello";
let secondStrictEquality = "World";
console.log(firstStrictEquality === secondStrictEquality); // output: false
Enter fullscreen mode Exit fullscreen mode
  • !== (Strict inequality operator): Compares two strings for strict inequality and returns true if they are not equal.
// Strict inequality operator (!==) example

let firstStrictInequality = "Hello";
let secondStrictInequality = "World";
console.log(firstStrictInequality !== secondStrictInequality); // output: true
Enter fullscreen mode Exit fullscreen mode

There's also a typeof operator that returns the type of the operand.

// typeof operator example

let firstTypeof = "Hello";
console.log(typeof firstTypeof); // output: string
Enter fullscreen mode Exit fullscreen mode

I hope you have your around this topic. Let's move on to the next topic.

Javascript Conditional (Ternary) Operator

The conditional operator is the only JavaScript operator that takes three operands. The operator can have one of two values based on a condition. The syntax is as follows:

condition ? value1 : value2;
Enter fullscreen mode Exit fullscreen mode

The condition is evaluated. If itโ€™s truthy, value1 is returned, otherwise, value2 is returned.

Here's an example:

// Conditional (Ternary) Operator example
let age = 20;
let isAdult = age >= 18 ? "Yes" : "No";
console.log(isAdult); // output: Yes
Enter fullscreen mode Exit fullscreen mode

The conditional operator can be used to assign values or execute functions based on a condition in a more concise way than using an if-else statement. However, it can also make the code harder to read if it is overused or if the expressions are too complex. Therefore, it is important to use the conditional operator judiciously and only when it makes the code clearer and more concise.

Bitwise Operators in JavaScript

Bitwise operators perform operations on binary representations of numbers. JavaScript provides six bitwise operators that allow you to manipulate the binary representation of numbers at the bit level.

Bitwise AND (&)

The bitwise AND operator returns a number where the bits of that number are set to 1 if the corresponding bits of both numbers are 1. Otherwise, it returns 0.

// Bitwise AND (&) example

let firstBitwiseAnd = 5; // binary: 0101
let secondBitwiseAnd = 3; // binary: 0011
console.log(firstBitwiseAnd & secondBitwiseAnd); // Output: 1 (binary: 0001)
Enter fullscreen mode Exit fullscreen mode

Bitwise OR (|)

The bitwise OR operator returns a number where the bits of that number are set to 1 if the corresponding bits of either of the two numbers are 1. Otherwise, it returns 0.

// Bitwise OR (|) example

let firstBitwiseOr = 5; // binary: 0101
let secondBitwiseOr = 3; // binary: 0011
console.log(firstBitwiseOr | secondBitwiseOr); // Output: 7 (binary: 0111)
Enter fullscreen mode Exit fullscreen mode

Bitwise XOR (^)

The bitwise XOR operator returns a number where the bits of that number are set to 1 if the corresponding bits of either of the two numbers are 1, but not both. Otherwise, it returns 0.

// Bitwise XOR (^) example

let firstBitwiseXor = 30; // binary: 0001 1110
let secondBitwiseXor = 20; // binary: 0001 0100
console.log(firstBitwiseXor ^ secondBitwiseXor); // Output: 10 (binary: 0000 1010)
Enter fullscreen mode Exit fullscreen mode

Bitwise NOT (~)

The bitwise NOT operator returns a number where the bits of that number are flipped. It returns the oneโ€™s complement of the number.

// Bitwise NOT (~) example

let firstBitwiseNot = 5; // binary: 0000 0101
console.log(~firstBitwiseNot); // Output: -6 (binary: 1111 1010)
Enter fullscreen mode Exit fullscreen mode

Left shift (<<)

The left shift operator returns a number where the bits of the first number are shifted to the left by the number of places specified by the second number. The bits shifted out of the left side of the number are discarded. The bits shifted in on the right side are filled with 0.

// Left shift (<<) example
let firstBitwiseLeftShift = 5; // binary: 0000 0101
console.log(firstBitwiseLeftShift << 1); // Output: 10 (binary: 0000 1010)
Enter fullscreen mode Exit fullscreen mode

Right shift (>>)

The right shift operator returns a number where the bits of the first number are shifted to the right by the number of places specified by the second number. The bits shifted out of the right side of the number are discarded. The bits shifted in on the left side are filled with 0.

// Right shift (>>) example
let firstBitwiseRightShift = 5; // binary: 0000 0101
console.log(firstBitwiseRightShift >> 1); // Output: 2 (binary: 0000 0010)
Enter fullscreen mode Exit fullscreen mode

Remember, bitwise operators can make your code harder to read if overused or if the expressions are too complex. Therefore, it is important to use them judiciously and only when they make the code clearer and more concise.

Finally, we have come to the end of this section . I hope you have understood the JavaScript operators. If you have any questions, please feel free to ask in the comments section below.

You find all the code at GitHub

You can also feel free to connect with me on Twitter and LinkedIn

Top comments (0)