In this article, we'll look at how to use these operators in greater detail through code examples.

How to Use the Greater Than > Operator in JavaScript

You can use the greater than operator to check if the value on the left is greater than the value on the right. It is represented by the > symbol.

The result will return a Boolean value of true if the value on the left is greater than the value on the right, and false if it is not.

Here is an example of checking if 5 is greater than 3:

console.log(5 > 3); // true

Since the number 5 is greater than 3, the result will be true.

If we switch the two values, then the result will be false:

console.log(3 > 5); // false

How to Use the Less Than < Operator in JavaScript

You can use the less than operator to check if the value on the left is less than the value on the right. It is represented by the < symbol.

The result will return a Boolean value of true if the value on the left is less than the value on the right, and false if it is not.

Here is an example that checks if the number 3 is less than 5:

console.log(3 < 5); // true

Since 3 is less than 5, the result will be true.

But if we switch the two values, then the result will be false:

console.log(5 < 3); // false

How to Use the Greater Than or Equal To >= Operator in JavaScript

If you need to check if the value on the left is greater than or equal to the value on the right, you can use the greater than or equal to operator. It is represented by the >= symbol.

The result will return a Boolean value of true if the value on the left is greater than or equal to the value on the right, and false if it is not.

Here is an example of that checks if the number 5 is greater than or equal to 5:

console.log(5 >= 5); // true

Since the number 5 is equal to 5, the result will be true.

If we change the left value to be the number 3, then the result will be false:

console.log(3 >= 5); // false

How to Use the Less Than or Equal To <= Operator in JavaScript

If you need to check if the value on the left is less than or equal to the value on the right, you can use the less than or equal to operator. It is represented by the <= symbol.

The result will return a Boolean value of true if the value on the left is less than or equal to the value on the right, and false if it is not.

Here is an example of that checks if the number 3 is less than or equal to 5:

console.log(3 <= 5); // true

If we change the left value to be the number 6, then the result will be false:

console.log(6 <= 5); // false

How to Use Comparison Operators in a Conditional Statement

It is common to use comparison operators inside conditional statements like an if statement.

In this example, we have an application that asks the user for their age and displays a response based on the age they entered:

For the HTML, we'll use a form to ask the user for their age. Below the form, we'll display the message based on the age entered.

<h1 class="title">How old are you?</h1>

<main>
  <form id="form">
    <div class="input-container">
      <label for="age">Enter your age: </label>
      <input type="number" id="age" required min="1" max="120" />
    </div>

    <button class="submit-btn" id="submit-btn">Submit age</button>
  </form>

  <p class="result-para" id="result"></p>
</main>

Next, we'll use a method called getElementById to go through the HTML document to find the elements that match the ids we specify.

We can use the method to get the form element, age input and result paragraph, and assign them to const variables:

const ageInput = document.getElementById("age");
const form = document.getElementById("form");
const resultParagraph = document.getElementById("result");

We then want to create an array of strings to show the user based on their age.

const responsesArr = [
  "Oh wow! You are just a kid.",
  "Nice! It looks like you are old enough to drive in the States.",
  "Awesome! It looks like you are old enough to vote in the States.",
  "Cool! It looks like you are old enough to drink in the States.",
];

Then we need to create a function called displayResponse with a parameter called age. This function will be responsible for displaying the messages based on the age entered.

function displayResponse(age) {

}

Inside that function, we need to check if the user's age is less than 16. If it is, we'll display the first message in the responsesArr array.

We'll use the textContent property to change the text inside the resultParagraph element.

if (age < 16) {
  resultParagraph.textContent = responsesArr[0];
}

If the user is between 16 and 18, we will display the second message in the responsesArr array.

else if (age >= 16 && age < 18) {
    resultParagraph.textContent = responsesArr[1];
  }

If the user is between 18 and 21, we will display the third message in the responsesArr array.

else if (age >= 18 && age < 21) {
    resultParagraph.textContent = responsesArr[2];
}

If the user is 21 or older, we will display the last message in the responsesArr array.

else {
    resultParagraph.textContent = responsesArr[3];
  }

The last part of this function is to reset the form after the user submits their age.

ageInput.value = "";

Here is the complete function:

function displayResponse(age) {
  if (age < 16) {
    resultParagraph.textContent = responsesArr[0];
  } else if (age >= 16 && age < 18) {
    resultParagraph.textContent = responsesArr[1];
  } else if (age >= 18 && age < 21) {
    resultParagraph.textContent = responsesArr[2];
  } else {
    resultParagraph.textContent = responsesArr[3];
  }
  ageInput.value = "";
}

The last part of this application is to add an event listener that checks when the user submits their input into the form, and display that message based on the age entered.

We are going to use the addEventListener method to listen for the submit event on the form. When the form is submitted, we will prevent the default behavior of the form and call the displayResponse function with the value of the age input.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  displayResponse(ageInput.value);
});

Here is a complete interactive example on CodePen:

Conclusion

Working with comparison operators like the greater than, greater than or equal to, less than and less than or equal to operators is a common task in JavaScript. They are used to compare two values and return a Boolean value of true or false based on the comparison.

I hope you enjoyed this article and found it helpful.

Happy coding!

In this hands-on guide, we'll explore truthy and falsy values, and understand the mechanics of short-circuiting in JavaScript.

You can get all the source code from here.

Table of Contents

• Understanding Truthy and Falsy Values
• What is Short-Circuiting in JavaScript?
• Practical Use Cases
• Conclusion

Understanding Truthy and Falsy Values

In JavaScript, every value has an inherent Boolean interpretation when evaluated in a Boolean context. Values that evaluate to true are considered truthy, while that evaluate to false are falsy.

Let's explore some examples:

// Truthy Values
if ('Hello') {
    console.log('Truthy!'); // Output: Truthy!
}

if (42) {
    console.log('Truthy!'); // Output: Truthy!
}

if (['apple', 'banana']) {
    console.log('Truthy!'); // Output: Truthy!
}

// Falsy Values
if ('') {
    console.log('Falsy!'); // This code block is not executed
}

if (0) {
    console.log('Falsy!'); // This code block is not executed
}

if (null) {
    console.log('Falsy!'); // This code block is not executed
}

Here's a breakdown of the code above:

Truthy Values

• 'Hello': Any non-empty string in JavaScript is considered truthy. In this case, the string 'Hello' is non-empty, so the condition evaluates to true.
• 42: Any non-zero number (positive or negative) is considered truthy. Since 42 is a non-zero number, the condition evaluates to true.
• ['apple', 'banana']: Arrays in JavaScript are considered truthy, regardless of their contents. Since the array ['apple', 'banana'] is non-empty, the condition evaluates to true.

Falsy Values

'' (empty string): An empty string in JavaScript is considered falsy. Therefore, the condition evaluates to false, and the code block inside the if statement will not be executed.

0: The number zero is considered falsy in JavaScript. Therefore, the condition evaluates to false, and the code block inside the if statement will not be executed.

null: The null value is considered falsy in JavaScript. Therefore, the condition evaluates to false, and the code block inside the if statement will not be executed.

In JavaScript, values other than false, 0, '' (empty string), null, undefined, and NaN are considered truthy. Understanding these truthy and falsy values is crucial when writing conditional statements and logical operations in JavaScript.

Understanding truthy and falsy values is crucial as they play a significant role in conditional statements and logical operations.

What is Short-Circuiting in JavaScript?

Short-circuiting is a behavior exhibited by logical operators (&&, ||) where the evaluation of the second operand is skipped if the outcome can be determined by evaluating the first operand alone.

Let's examine how short-circuiting works with practical examples:

The && Operator

The && operator returns the first falsy operand, or the last truthy operand if all operands are truthy.

const value = 0;
const result = value && 'Truthy Value';
console.log(result); // Output: 0

In this example, value evaluates to 0, which is a falsy value. Since the first operand is falsy, the expression short-circuits, and the result is 0.

const value = 'Hello';
const result = value && 'Truthy Value';
console.log(result); // Output: Truthy Value

Here, value evaluates to a non-empty string, which is truthy. Therefore, the second operand 'Truthy Value' is returned, as it's the last truthy operand.

The || Operator

The || operator returns the first truthy operand, or the last falsy operand if all operands are falsy.

const name = '';
const displayName = name || 'Guest';
console.log(displayName); // Output: Guest

In this example, name evaluates to an empty string, which is falsy. Therefore, the expression short-circuits, and 'Guest' is assigned to displayName.

const name = 'Alice';
const displayName = name || 'Guest';
console.log(displayName); // Output: Alice

Here, name evaluates to a non-empty string, which is truthy. Therefore, the first operand 'Alice' is returned, as it's the first truthy operand encountered.

Practical Use Cases

Providing Default Values

Short-circuiting is commonly used to provide default values for variables.

const options = {};
const limit = options.limit || 10;
console.log(limit); // Output: 10 (default value)

In this example, options is an empty object. The code intends to assign a value to limit based on the options.limit property. However, since options.limit is not defined (it's undefined), the logical OR (||) operator is used.

The logical OR operator returns the value of the first operand if it's truthy. If the first operand is falsy (in this case, options.limit is undefined), it returns the value of the second operand (10 in this case), which acts as a default value.

Therefore, limit will be assigned the value 10 because options.limit is falsy (undefined).

Safely Accessing Nested Properties

Short-circuiting can also be used to safely access nested properties of objects.

const user = { address: { city: 'New York' } };
const city = user.address && user.address.city;
console.log(city); // Output: New York

In this example, user is an object containing another object address, which contains the city property.

The expression user.address && user.address.city is utilizing short-circuiting. It checks if user.address exists and if it does, it further checks if user.address.city exists.

If user.address is truthy (if it exists), JavaScript proceeds to evaluate user.address.city. If user.address is falsy (if it's undefined or null), JavaScript short-circuits the evaluation and doesn't proceed to evaluate user.address.city.

This prevents a potential TypeError if user.address is not defined or null.

Since user.address exists in this case, the expression evaluates to the value of user.address.city, which is 'New York'.

This technique ensures safe access to nested properties and helps avoid runtime errors in cases where objects might not be fully populated or structured as expected.

Conclusion

Short-circuiting can greatly enhance your development workflow.

You can practice these concepts in your projects to become proficient in leveraging JavaScript's short-circuiting behavior effectively.

If you have any feedback, feel free to reach out to me on Twitter and Linkedin

Let's dive deeper into understanding how they work so you can leverage their power.

You can get all the source code from here.

Table of Contents

• The Spread Operator
• Before the Spread Operator
• After the Spread Operator
• Spread Operator Use Cases
• The Rest Operator
• Before the Rest Operator
• After the Rest Operator
• Rest Operator Use Cases
• Conclusion

The Spread Operator

The spread operator, denoted by three consecutive dots (...), is primarily used for expanding iterables like arrays into individual elements. This operator allows us to efficiently merge, copy, or pass array elements to functions without explicitly iterating through them.

Consider the following array:

const arr = [1, 2, 3];
console.log("Original array:", arr); // [1, 2, 3]

Before the Spread Operator

Traditionally, if we wanted to create a new array with existing elements appended to it, we'd resort to cumbersome approaches like this:

const newArr = [5, 6, arr[0], arr[1], arr[2]];
console.log("New array (before spread operator):", newArr); // [5, 6, 1, 2, 3]

This method involves either hard-coding each element or manually looping through the array, resulting in verbose and error-prone code.

After the Spread Operator

Enter the spread operator, offering a concise and intuitive alternative:

const newArr = [5, 6, ...arr];
console.log("New array (after spread operator):", newArr); // [5, 6, 1, 2, 3]

In this example, we seamlessly integrate the contents of arr into newArr using the spread operator. No manual indexing or looping is required, making the code more readable and maintainable.

Spread Operator Use Cases

Combining Arrays

The spread operator provides an elegant solution for combining multiple arrays into a single array. By spreading each array's elements within a new array, we can concatenate them effortlessly.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log("Combined array:", combined); // [1, 2, 3, 4, 5, 6]

This approach eliminates the need for manual iteration or concatenation methods, resulting in concise and readable code.

Passing Arguments to Functions

The spread operator simplifies the process of passing variable-length arguments to functions. Instead of specifying each argument individually, we can use the spread operator to unpack an array of values into function parameters.

function sum(a, b, c) {
    return a + b + c;
}

const nums = [1, 2, 3];
const result = sum(...nums);
console.log("Result of sum:", result); // 6

This technique enhances function flexibility and reduces redundancy, especially when dealing with dynamic inputs.

Copying Arrays

The spread operator offers a concise method for copying arrays, ensuring that modifications to the copied array do not affect the original. By spreading the original array's elements into a new array, we create a distinct copy.

const original = [1, 2, 3];
const copy = [...original];
console.log("Copied array:", copy); // [1, 2, 3]

Unlike traditional methods like slice() or concat(), the spread operator provides a more intuitive and readable approach to array duplication.

The Rest Operator

While the spread operator expands elements, the rest operator condenses them into a single entity within function parameters or array destructuring. It collects remaining elements into a designated variable, facilitating flexible function definitions and array manipulation.

Before the Rest Operator

Prior to the rest operator, extracting specific elements from an array while preserving the rest required manual manipulation or looping.

Consider a scenario where we want to extract the first element from an array and collect the rest into a separate array. Before the introduction of the rest operator, achieving this task involved more verbose code:

const arr = [1, 2, 3, 4, 5];

const first = arr[0]; // Extracting the first element
const rest = arr.slice(1); // Collecting the rest of the elements

console.log("First element:", first); // 1
console.log("Rest of the elements:", rest); // [2, 3, 4, 5]

In the above example, first captures the initial element (1) by directly accessing it at index 0, while rest is obtained by slicing the array from index 1 onwards. This manual approach is prone to errors and less intuitive compared to using the rest operator.

After the Rest Operator

With the introduction of the rest operator, extracting specific elements becomes more intuitive and concise.

const [first, ...rest] = [1, 2, 3, 4, 5];
console.log("First element:", first); // 1
console.log("Rest of the elements:", rest); // [2, 3, 4, 5]

In this example, first captures the initial element (1), while rest encapsulates the remaining elements ([2, 3, 4, 5]). The rest operator empowers us to handle variable-length inputs with ease.

Rest Operator Use Cases

Handling Variable-Length Function Arguments

The rest operator simplifies the handling of variable-length arguments in functions. It allows functions to accept an indefinite number of arguments without explicitly specifying each one.

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log("Sum:", sum(1, 2, 3, 4, 5)); // Sum: 15
console.log("Sum:", sum(10, 20)); // Sum: 30

The ...numbers syntax collects all passed arguments into an array named numbers, enabling flexible function definitions.

Array Destructuring

The rest operator is commonly used in array destructuring to capture remaining elements into a separate array variable.

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log("First element:", first); // First element: 1
console.log("Second element:", second); // Second element: 2
console.log("Rest of the elements:", rest); // Rest of the elements: [3, 4, 5]

This allows for more concise and readable code when working with arrays, especially in scenarios where only the first few elements are of interest.

Conclusion

That's it! These operators simplify array manipulation and function handling, making your code more efficient and readable.

Whether it's for personal projects or technical assessments, integrating spread and rest operators will enhance your JavaScript skills and problem-solving abilities.

If you have any feedback, then please contact me on Twitter or Linkedin

These three operators will help you write clearer and less error-prone code.

The Nullish Coalescing Operator

When you’re inspecting JavaScript code, you may find an expression using a double question mark (??), as in the code below:

console.log(username ?? "Guest");

The double question mark is a logical operator that returns the expression on the right-hand side of the mark when the expression on the left-hand side is null or undefined

This operator is also known as the nullish coalescing operator. It’s a new feature introduced in JavaScript ES2020 that allows you to check for null or undefined values in a more concise way.

Nullish Coalescing Operator Syntax

The syntax for the nullish coalescing operator is very simple. It consists of two question marks ?? placed between two operands.

Here’s an example:

let firstName = null;
let username = firstName ?? "Guest";
console.log(username); // "Guest"

The code above assigns the firstName variable value as the value of the username variable.

When the firstName value is null or undefined, then the value Guest will be assigned to the username variable instead:

Result of using the nullish coalescing operator

You can also write it this way:

let username = undefined ?? "Guest";
console.log(username); // "Guest"

As you can see, you don’t need an if-else statement to check for null or undefined values.

Why JavaScript Needs This Operator

The nullish coalescing operator was created as an improved alternative to the OR operator ||.

The OR operator was originally created to provide a default or fallback value when the left-hand expression is falsy, or evaluates to false.

But after some real-world uses, it’s clear that there are times when developers want to return values that are considered falsy, such as 0 and an empty string ("")

The use of the OR operator will prevent you from returning any falsy values at all. Consider the following example:

// empty string evaluates to false in JavaScript:
let firstName = "";
let username = firstName ?? "Guest";
console.log(username); // ""

// When you use OR operator:
username = firstName || "Guest";
console.log(username); // "Guest"

By using the nullish coalescing operator, you will only replace exactly null and undefined values with the right-hand value.

The nullish coalescing operator can be used with any type of value, including numbers, strings, and objects.

Nullish Coalescing Operator Use Cases

The nullish coalescing operator is useful in a variety of situations where you need to check for null or undefined values and provide a default value.

Here are several examples of common use cases:

Handling Missing Function Arguments

When a function is called, it’s possible that some of the arguments may be omitted.

The Nullish Coalescing Operator can be used to provide default values for a missing argument as follows:

function greet(name) {
  console.log(`Hello, ${name ?? "Guest"}!`);
}

greet(); // 'Hello, Guest!'
greet("John"); // 'Hello, John!'

Accessing Object Properties

When working with objects, it’s possible that a property may not exist or is undefined.

The Nullish Coalescing Operator can be used to safely access object properties and provide a default value when the property is missing:

let user = { name: "John Doe" };
let email = user.email ?? "N/A";
console.log(email); // 'N/A'

Choosing Between a Variable and a Constant

You may want to select a value from a variable or a constant if the variable is null or undefined:

let value = null;
const DEFAULT_VALUE = 'Default';

let result = value ?? DEFAULT_VALUE;

console.log(result); // 'Default'

As you can see, the Nullish Coalescing Operator is a great feature that can make your code more concise and reliable.

Using ?? with the || and && Operators

For safety reasons, the double question mark can’t be used together with JavaScript OR (||) and AND (&&) operators without parentheses () separating the operators.

For example, the following code tries to see if either firstName or lastName variable can be used as the value of username before using "Guest" as its value:

let firstName = "John";
let lastName = "Stone";
let username = firstName || lastName ?? "Guest";
// Error: Unexpected token '??'

console.log(username);

This is because JavaScript won’t be able to determine which operator it needs to evaluate first. You need to use parentheses to clearly indicate the priority of the evaluations.

The following code will first evaluate the expressions inside the parentheses:

let firstName = null;
let lastName = undefined;
let username = (firstName || lastName) ?? "Guest";

console.log(username); // "Guest"

And that’s how you combine the nullish coalescing operator with either AND or OR operator.

The Optional Chaining Operator

Like the nullish coalescing operator, the optional chaining operator is a modern addition to JavaScript that offers a better way to do things.

The optional chaining operator ?. gives you a safe way to access properties and methods of an object, avoiding an error in the process.

One of the most common problems in JavaScript is that you can get an error when you access a property of an undefined value.

For example, suppose you have a car object as follows:

const car = {};

console.log(car.manufacturer); // undefined
console.log(car.manufacturer.address); // ❌ TypeError!

In the example above, accessing the manufacturer property returns undefined, but when you try to access the address property of the manufacturer property, JavaScript returns an error.

Even though this is how JavaScript works, a better way to handle the non-existent property would be to just return an undefined back, just like when we try to access the manufacturer property.

This is why the optional chaining operator was created. The operator returns either the value of the property, or undefined when the property is null or undefined.

To use the operator, just add a question mark in front of the dot . notation:

const car = {};

console.log(car.manufacturer?.address); // undefined

The optional chaining operator can be added anytime you use the dot notation to access a property or method.

This operator allows you to avoid the TypeError that occurs when accessing a property or calling a method from a non-existent property:

const car = {};

console.log(car.manufacturer?.address); // undefined
console.log(car.manufacturer?.drive()); // undefined

Note that the optional chaining operator only checks the value before it. If the car variable can be null, then you need to add the operator after when accessing the car object as well.

See the following example:

const car = null;

console.log(car?.manufacturer?.address); // undefined
console.log(car.manufacturer?.address); // TypeError: Cannot read properties of null

And that’s how the optional chaining operator works. It’s really useful when you’re working with objects in your project.

Next, let’s learn about the destructuring assignment.

Destructuring Assignment Operator

The destructuring assignment is a special operator that allows you to "unpack" or "extract" the values of JavaScript arrays and objects. It has become one of the most useful features of JavaScript language for two reasons:

• It helps you to avoid code repetition.
• It keeps your code clean and easy to understand.

Let’s see how you can destructure an array and an object next.

Destructuring Arrays

Here’s how you normally assign an array values to variables:

const sampleArray = ['Jane', 'John'];

const firstIndex = sampleArray[0];
const secondIndex = sampleArray[1];

The code above works, but you need two lines of code to get two elements from an array. Using the destructuring assignment, you can assign array elements into variables in one short line:

const sampleArray = ['Jane', 'John'];

const [firstIndex, secondIndex] = sampleArray;

The above code will return the same value for firstIndex and secondIndex variable. No matter how many elements you have, the destructuring will start from the zero index.

To create a destructuring assignment, you need to add square brackets [] after the let/ const keyword. When you add square brackets after the assignment (=) operator, it’s an array. If you add them before the assignment operator, it’s a destructuring assignment.

You can also use the rest operator …​ to copy the rest of the values after your assignment. Take a look at the following example:

const sampleArray = ['Jane', 'John', 'Jack', 'Aston'];

const [one, two, ...rest] = sampleArray;

The rest variable will contain an array with values of ['Jack','Aston'].

You can also put default values for these variables when the extracted value is undefined:

const [a = 'Martin', b = 10] = [true];

// a will return true
// b will return 10

You can also immediately assign the return of a function into assignments. This is frequently used in libraries like React:

const [a, b] = myFunction();

function myFunction() {
  return ['John', 'Jack'];
}

The variable a will return "John" and b will return "Jack".

Finally, you can also ignore some variables by skipping the assignment for that index:

const [a, , b] = [1, 2, 3];

// a will return 1
// b will return 3

Destructuring assignment makes unpacking array values easier and shorter, with less repetition.

Object Destructuring

Just like arrays, you can destructure objects the same way, but instead of using the square brackets ([]) you need to use the curly brackets ({}):

const user = {
  firstName: 'Jack',
  lastName: 'Smith',
};

const { firstName, lastName } = user;

You can use the colon delimiter (:) to assign the property into a different name. The example below assign the value of firstName into name:

const user = {
  firstName: 'Jack',
  lastName: 'Smith',
};

const { firstName: name, lastName } = user;

Note that you still only create two variables: name and lastName. The firstName is assigned to name, so it won’t create a separate variable.

Just like arrays, you can destructure an object returned by a function immediately:

function myFunction() {
  return { firstName: 'Jack', lastName: 'Austin' };
}

const { firstName, lastName } = myFunction();

Also, you can destructure an object from the function parameters, exactly when you define the function:

function myFunction({ firstName, lastName }) {
  return firstName + ' ' + lastName;
}

const user = {
  firstName: 'Jack',
  lastName: 'Austin',
};

const name = myFunction(user);

The destructuring assignment is a useful addition to JavaScript that makes it easier to unpack values from objects and arrays. You’re going to use it frequently when you code using a library like React.

Conclusion

JavaScript is constantly improving every year, and the three operators explained in this article are a great addition that can help you produce more concise and readable code.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy to understand and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

Until next time!

Based on the types of operations these JS operators perform, we can divide them up into seven groups:

1. Arithmetic Operators
2. Assignment Operators
3. Comparison Operators
4. Logical Operators
5. Ternary Operators
6. The typeof Operator
7. Bitwise Operators

In this handbook, you're going to learn how these operators work with examples. Let's start with arithmetic operators.

Arithmetic Operators

The arithmetic operators are used to perform mathematical operations like addition and subtraction.

These operators are frequently used with number data types, so they are similar to a calculator. The following example shows how you can use the + operator to add two variables together:

let x = 3;
let y = 8;

console.log(x + y); // 11

Here, the two variables x and y are added together using the plus + operator. We also used the console.log() method to print the result of the operation to the screen.

You can use operators directly on values without assigning them to any variable too:

console.log(2 + 1); // 3
console.log(4 + 1); // 5

In JavaScript, we have 8 arithmetic operators in total. They are:

1. Addition +
2. Subtraction -
3. Multiplication *
4. Division /
5. Remainder %
6. Exponentiation **
7. Increment ++
8. Decrement --

Let's see how these operators work one by one.

1. Addition operator

The addition operator + is used to add two or more numbers together. You've seen how this operator works previously, but here's another example:

console.log(7 + 2); // 9
console.log(2.3 + 1.5); // 3.8

You can use the addition operator on both integer and floating numbers.

2. Subtraction operator

The subtraction operator is marked by the minus sign − and you can use it to subtract the right operand from the left operand.

For example, here's how to subtract 3 from 5:

let x = 5;
let y = 3;

console.log(x - y); // 2

3. Multiplication operator

The multiplication operator is marked by the asterisk * symbol, and you use it to multiply the value on the left by the value on the right of the operator.

console.log(5 * 2); // 10
console.log(3 * 3); // 9

4. Division operator

The division operator / is used to divide the left operand by the right operand. Here are some examples of using the operator:

console.log(10 / 2); // 5
console.log(9 / 3); // 3

5. Remainder operator

The remainder operator % is also known as the modulo or modulus operator. This operator is used to calculate the remainder after a division has been performed.

A practical example should make this operator easier to understand, so let's see one:

console.log(10 % 3);

The number 10 can't be divided by 3 perfectly. The result of the division is 3 with a remainder of 1. The remainder operator simply returns that remainder number.

If the left operand can be divided with no remainder, then the operator returns 0.

This operator is commonly used when you want to check if a number is even or odd. If a number is even, dividing it by 2 will result in a remainder of 0, and if it's odd, the remainder will be 1.

console.log(1 % 2); // 1
console.log(2 % 2); // 0
console.log(3 % 2); // 1
console.log(4 % 2); // 0

6. Exponentiation operator

The exponentiation operator is marked by two asterisks **. It's one of the newer JavaScript operators and you can use it to calculate the power of a number (based on its exponent).

For example, here's how to calculate 10 to the power of 3:

console.log(10 ** 3); // 1000

Here, the number 10 is multiplied by itself 3 times (10 10 10)

The exponentiation operator gives you an easy way to find the power of a specific number.

7. Increment operator

The increment ++ operator is used to increase the value of a number by one. For example:

let x = 5;

x++;

console.log(x); // 6

This operator gives you a faster way to increase a variable value by one. Without the operator, here's how you increment a variable:

let x = 5;

x = x + 1;

console.log(x); // 6

Using the increment operator allows you to shorten the second line. You can place this operator before or next to the variable you want to increment:

let x = 5;

// Place the operator next to the variable (postfix)
x++;

// Place the operator before the variable (prefix)
++x;

Both placements shown above are valid. The difference between prefix (before) and postfix (after) placements is that the prefix position will execute the operator after that line of code has been executed.

Consider the following example:

let x = 5;
let y = 5;

console.log(x++); // 5
console.log(x); // 6

console.log(++y); // 6
console.log(y); // 6

Here, you can see that placing the increment operator next to the variable will print the variable as if it has not been incremented.

When you place the operator before the variable, then the number will be incremented before calling the console.log() method.

8. Decrement operator

The decrement -- operator is used to decrease the value of a number by one. It's the opposite of the increment operator:

let x = 5;

x--;

console.log(x); // 4

Please note that you can only use increment and decrement operators on a variable. An error occurs when you try to use these operators directly on a number value:

console.log(5--);

Output:

Uncaught SyntaxError: Invalid left-hand side expression in postfix operation

You can't use increment or decrement operator on a number directly.

Arithmetic operators summary

Now you've learned the 8 types of arithmetic operators. Excellent! Keep in mind that you can mix these operators to perform complex mathematical equations.

For example, you can perform an addition and multiplication on a set of numbers:

console.log(5 + 2 * 3); // 11

The order of operations in JavaScript is the same as in mathematics. Multiplication, division, and exponentiation take a higher priority than addition or subtraction (remember that acronym PEMDAS? Parentheses, exponents, multiplication and division, addition and subtraction – there's your order of operations).

You can use parentheses () to change the order of the operations. Wrap the operation you want to execute first as follows:

console.log((5 + 2) * 3); // 21

When using increment or decrement operators together with other operators, you need to place the operators in a prefix position as follows:

let x = 5;
console.log(2 + ++x); // 2 + 6 = 8

This is because a postfix increment or decrement operator will not be executed together with other operations in the same line, as I have explained previously.

Let's try some exercises. Can you guess the result of these operations?

console.log(5 * 3 - 2);
console.log((3 * 6) % 2);
console.log(5 + 7 - 1);
console.log((4 + 9) * 4);

let x = 5;
console.log(++x);
console.log(x++ / 3);

And that's all for arithmetic operators. You've done a wonderful job learning about these operators.

Let's take a short five-minute break before proceeding to the next type of operators.

Assignment Operators

The second group of operators we're going to explore is the assignment operators.

Assignment operators are used to assign a specific value to a variable. The basic assignment operator is marked by the equal = symbol, and you've already seen this operator in action before:

let x = 5;

After the basic assignment operator, there are 5 more assignment operators that combine mathematical operations with the assignment. These operators are useful to make your code clean and short.

For example, suppose you want to increment the x variable by 2. Here's how you do it with the basic assignment operator:

let x = 5;

x = x + 2;

There's nothing wrong with the code above, but you can use the addition assignment += to rewrite the second line as follows:

let x = 5;

x += 2;

There are 7 kinds of assignment operators that you can use in JavaScript:

The arithmetic operators you've learned in the previous section can be combined with the assignment operator except the increment and decrement operators.

Let's have a quick exercise. Can you guess the results of these assignments?

let x = 3;

x += 2 * 3;
console.log(x);

x -= 3;
console.log(x);

x %= 2;
console.log(x);

Now you've learned about assignment operators. Let's continue and learn about comparison operators.

Comparison Operators

As the name implies, comparison operators are used to compare one value or variable with something else. The operators in this category always return a boolean value: either true or false.

For example, suppose you want to compare if a variable's value is greater than 1. Here's how you do it:

let x = 5;

console.log(x > 1); // true
console.log(x > 7); // false

The greater than > operator checks if the value on the left operand is greater than the value on the right operand.

There are 8 kinds of comparison operators available in JavaScript:

Here are some examples of using comparison operators:

console.log(9 == 9); // true

console.log(9 != 20); // true

console.log(2 > 10); // false

console.log(2 < 10); // true

console.log(5 >= 10); // false

console.log(10 <= 10); // true

The comparison operators are further divided in two types: relational and equality operators.

The relational operators compare the value of one operand relative to the second operand (greater than, less than)

The equality operators check if the value on the left is equal to the value on the right. They can also be used to compare strings like this:

console.log("ABC" == "ABC"); // true

console.log("ABC" == "abc"); // false

console.log("Z" != "A"); // true

String comparisons are case-sensitive, as shown in the example above.

JavaScript also has two versions of the equality operators: loose and strict.

In strict mode, JavaScript will compare the values without performing a type coercion. To enable strict mode, you need to add one more equal = symbol to the operation as follows:

console.log("9" == 9); // true
// strict equal
console.log("9" === 9); // false

console.log("1" != 1); // false
// strict not equal
console.log("1" !== 1); // true

Since type coercion might result in unwanted behavior, you should use the strict equality operators anytime you do an equality comparison.

Logical Operators

Logical operators are used to check whether one or more expressions result in either true or false.

There are three logical operators available in JavaScript:

These operators can only return Boolean values. For example, you can determine whether '7 is greater than 2' and '5 is greater than 4':

console.log(7 > 2 && 5 > 4); // true

These logical operators follow the laws of mathematical logic:

1. && AND operator – if any expression returns false, the result is false
2. || OR operator – if any expression returns true, the result is true
3. ! NOT operator – negates the expression, returning the opposite.

Let's do a little exercise. Try to run these statements on your computer. Can you guess the results?

console.log(true && false);

console.log(false || false);

console.log(!true);

These logical operators will come in handy when you need to assert that a specific requirement is fulfilled in your code.

Let's say a happyLife requires a job with highIncome and supportiveTeam:

let highIncome = true;
let supportiveTeam = true;
let happyLife = highIncome && supportiveTeam;

console.log(happyLife); // true

Based on the requirements, you can use the logical AND operator to check whether you have both requirements. When one of the requirements is false, then happyLife equals false as well.

Ternary Operator

The ternary operator (also called the conditional operator) is the only JavaScipt operator that requires 3 operands to run.

Let's imagine you need to implement some specific logic in your code. Suppose you're opening a shop to sell fruit. You give a $3 discount when the total purchase is $20 or more. Otherwise, you give a $1 discount.

You can implement the logic using an if..else statement as follows:

let totalPurchase = 15;

let discount;

if (totalPurchase >= 20) {
  discount = 3;
} else {
  discount = 1;
}

The code above works fine, but you can use the ternary operator to make the code shorter and more concise as follows:

let totalPurchase = 15;

let discount = totalPurchase >= 20 ? 3 : 1;

The syntax for the ternary operator is condition ? expression1 : expression2.

You need to write the condition to evaluate followed by a question ? mark.

Next to the question mark, you write the expression to execute when the condition evaluates to true, followed by a colon : symbol. You can call this expression1.

Next to the colon symbol, you write the expression to execute when the condition evaluates to false. This is expression2.

As the example above shows, the ternary operator can be used as an alternative to the if..else statement.

The typeof Operator

The typeof operator is the only operator that's not represented by symbols. This operator is used to check the data type of the value you placed on the right side of the operator.

Here are some examples of using the operator:

let x = 5;
console.log(typeof x) //  'number'

console.log(typeof "Nathan") // 'string'

console.log(typeof true) // 'boolean'

console.log(typeof null) // 'object'

console.log(typeof [1, 2, 3]) // 'object'

console.log(typeof {}) // 'object'

console.log(typeof undefined) // 'undefined'

The typeof operator returns the type of the data as a string. The 'number' type represents both integer and float types, the string and boolean represent their respective types.

Arrays, objects, and the null value are of object type, while undefined has its own type.

Bitwise Operators

Bitwise operators are operators that treat their operands as a set of binary digits, but return the result of the operation as a decimal value.

These operators are rarely used in web development, so you can skip this part if you only want to learn practical stuff. But if you're interested to know how they work, then let me show you an example.

A computer uses a binary number system to store decimal numbers in memory. The binary system only uses two numbers, 0 and 1, to represent the whole range of decimal numbers we humans know.

For example, the decimal number 1 is represented as binary number 00000001, and the decimal number 2 is represented as 00000010.

I won't go into detail on how to convert a decimal number into a binary number as that's too much to include in this guide. The main point is that the bitwise operators operate on these binary numbers.

If you want to find the binary number from a specific decimal number, you can Google for the "decimal to binary calculator".

There are 7 types of bitwise operators in JavaScript:

1. AND &
2. OR |
3. XOR ^
4. NOT ~
5. Left Shift <<
6. Right Shift >>
7. Zero-fill Right Shift >>>

Let's see how they work.

1. Bitwise AND operator

The bitwise operator AND & returns a 1 when the number 1 overlaps in both operands. The decimal numbers 1 and 2 have no overlapping 1, so using this operator on the numbers return 0:

// 1 = 00000001
// 2 = 00000010
// ------------
//     00000000 = 0

console.log(1 & 2); // 0

2. Bitwise OR operator

On the other hand, the bitwise operator OR | returns all 1s in both decimal numbers.

// 1 = 00000001
// 2 = 00000010
// ------------
//     00000011 = 3

console.log(1 | 2); // 3

The binary number 00000011 represents the decimal number 3, so the OR operator above returns 3.

Bitwise XOR operator

The Bitwise XOR ^ looks for the differences between two binary numbers. When the corresponding bits are the same, it returns 0:

5 = 00000101

// 5 = 00000101
// 7 = 00000111
// ------------
//     00000010 = 2

console.log(5 ^ 7); // 2

Bitwise NOT operator

Bitwise NOT ~ operator inverts the bits of a decimal number so 0 becomes 1 and 1 becomes 0:

// 5 = 00000101
// ------------
//     11111010 = -6

console.log(~5); // -6

Bitwise Left Shift operator

Bitwise Left Shift << shifts the position of the bit by adding zeroes from the right.

The excess bits are then discarded, changing the decimal number represented by the bits. See the following example:

console.log(5 << 2);

// 5 = 00000101
// ------------ << Shift to the left by 2
//     00010100 = 20

The right operand is the number of zeroes you will add to the left operand.

Bitwise Right Shift operator

Bitwise Right Shift >> shifts the position of the bits by adding zeroes from the left. It's the opposite of the Left Shift operator:

console.log(5 >> 2); // 1

// 5 = 00000101
// ------------ >> Shift to the right by 2
//     00000001 = 1

Bitwise Zero-fill Right Shift operator

Also known as Unsigned Right Shift operator, the Zero-fill Right Shift >>> operator is used to shift the position of the bits to the right, while also changing the sign bit to 0.

This operator transforms any negative number into a positive number, so you can see how it works when passing a negative number as the left operand:

console.log(-70 >> 1); // -35
console.log(-70 >>> 1); // 2147483613

console.log(5 >> 1); // 2
console.log(5 >>> 1); // 2

In the above example, you can see that the >> and >>> operators return different results. The Zero-fill Right Shift operator has no effect when you use it on a positive number.

Now you've learned how the bitwise operators work. If you think they are confusing, then you're not alone! Fortunately, these operators are scarcely used when developing web applications.

You don't need to learn them in depth. It's enough to know what they are.

Conclusion

In this tutorial, you've learned the 7 types of JavaScript operators: Arithmetic, assignment, comparison, logical, ternary, typeof, and bitwise operators.

These operators can be used to manipulate values and variables to achieve a desired outcome.

Congratulations on finishing this guide!

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book Beginning Modern JavaScript here.

The book is designed to be easy to understand and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

Until next time!