Isaiah Clifford Opoku

Posted on Jun 4, 2023 • Edited on Jun 7, 2023

Part (2): Operators and Expressions in JavaScript

#javascript #webdev #coding #beginners

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.

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

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

* 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

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 )

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)

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)

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

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)

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)

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)

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)

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)

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

!= (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

=== (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

!== (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

> (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

< (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

>= (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

<= (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

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

|| (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

! (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

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

+= (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

=== (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

!== (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

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

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;

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

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)

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)

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)

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)

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)

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)

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

DEV Community