lukeprosserBlogProjects

How To Use Operators In JavaScript

In this lesson you'll learn all about JavaScript operators, and how they can help you to carry out actions and make decisions in your code.

We will cover:

What are operators?

In JavaScript an operator is a special symbol that is used to perform operations on values. There are different types of operators available in JavaScript, and the main ones to be aware of at this stage are:

  • Assignment operators
  • Arithmetic operators
  • Comparison operators
  • Logical operators
  • String operators

There are some additional operators that we'll also touch on in this lesson.

Assignment operators

The main assignment operator = is used to assign values to variables.

For example, let's assign a numeric value to a variable:

let a = 2;

There are other types of assignment operators that we'll explore later.

Arithmetic operators

Arithmetic operators are used to perform mathematical calculations.

Addition

Let's create a new variable b and add the two values together:

let a = 4;
let b = 2;

console.log(a + b); // 6

When you run the above code you should see that the result 6 is logged to the console.

In the expression a + b, a and b are referred to as operands, and + is the operator that acts upon them.

Subtraction

As you might expect, we also have access to the other mathematical operators. We can use the - operator to subtract values:

let a = 4;
let b = 2;

console.log(a + b); // 2

Multiplication

We can use the * operator to multiply values:

let a = 4;
let b = 2;

console.log(a * b); // 8

Division

The / operator will divide two values:

let a = 4;
let b = 2;

console.log(a / b); // 2

Remainder

Another operator that you may not be familiar with is the remainder operator denoted by a percentage symbol %.

This operator will give the remaining value when one value is divided by another:

let a = 4;
let b = 2;

console.log(a % b); // 0

In the example above, 4 is divided by 2 exactly with no remainder, so the result is 0.

You may also see the remainder operator % referred to as the modulo operator.

Increment and decrement

We can increment a value by 1 using the increment operator ++:

let a = 4;
let b = 2;

console.log(++a); // 5

Note that the operator must precede the variable.

Similarly, we can decrease a value by 1 with the decrement operator --:

let a = 4;
let b = 2;

console.log(--b); // 1

Comparison operators

Comparison operators compare two values, and return a Boolean value of true or false.

Comparison operators are often used in loops and branching statements.

Equal

We can use the equal == operator (note the double =) to check if two values are equal to one another:

let a = 4;
let b = 2;

console.log(a == b); // false

This operator is often referred to as the double equals operator.

Not equal

The not equal != operator will return true if two values are not equal to one another:

let a = 4;
let b = 2;

console.log(a != b); // true

Strict equal

The strict equal === operator compares both the value and the data types:

let a = 4;
let b = 2;

console.log(a === b); // false

If the values and types are the same, the expression will return true instead:

let a = 4;
let b = 4;

console.log(a === b); // true

The strict equal +++ operator is often referred to as the triple equals operator.

Strict not equal

The strict not equal !== operator will do the opposite, returning true if the value and data types are not equal to one another:

let a = 4;
let b = 2;

console.log(a !== b); // true

JavaScript is a dynamically typed language, meaning that the types of values can change. The strict equal === and strict not equal !== operators therefore help to check the state of values at any one time.

Greater than

We can use the greater than > operator to check if one value is larger than another:

let a = 4;
let b = 2;

console.log(a > b); // true

Less than

Likewise we also have access to the less than < operator:

let a = 4;
let b = 2;

console.log(a < b); // false

Greater than or equal

In addition we can also check if one value is greater than or equal to another with the greater than or equal >= operator:

let a = 4;
let b = 2;

console.log(a >= b); // true

Less than or equal

We also have the less than or equal <= operator:

let a = 4;
let b = 2;

console.log(a <= b); // false

Logical operators

Logical operators are used to perform logical operations, and again return a Boolean result.

They are very useful when combined with comparison operators in order to make a decision within code.

Let's explore the different kinds of logical operators with some examples. We'll start by assigning number values to variables:

let a = 10;
let b = 30;
let c = 20;

Logical AND

Now let's check if c is in the range of a and b. To do this we can use the logical AND && operator, and we can store the result in a variable called isInRange:

let a = 10;
let b = 30;
let c = 20;

const isInRange = a < c && c < b;

console.log(isInRange); // true

The logical AND && operator will only return true if both operands evaluate to true.

In the example above, c (20) is greater than a (10) and less than b (30), so the expression isInRange returns true.

If c was not in range, the expression would return false. For example, if c was 5 only one of the operands (c < b) would be true, while a < c would be false.

Logical OR

Similar to logical AND is the logical OR || operator.

An expression with the logical OR operator will return true if either of the operands is true, otherwise it will return false.

In the following example we are checking if the value of c is greater than a or less than b:

let a = 10;
let b = 30;
let c = 5;

const isValid = a < c || c < b;

console.log(isValid); // true

The first operand a < c evaluates to false because 20 is not less than 5.

However, 5 is less than 30, so c < b evaluates to true. This means that the overall OR expression returns true.

Logical NOT

The logical NOT ! operator is used with a single operand. If that operand can be converted to true it will return false, otherwise it will return true.

The easiest way to understand the NOT operator is that it essentially 'flips' the Boolean value. Let's look at an example:

const isEnabled = true;

console.log(!isEnabled); // false

Above isEnabled is set to true. If we prefix it with the logical NOT ! operator to become !isEnabled it will flip the result to false.

Indeed, if we change the value of isEnabled to false, the opposite will happen:

const isEnabled = false;

console.log(!isEnabled); // true

While this can seem strange at first, in programming we often need to set values or make decisions based on the opposite Boolean state. Rest assured that you'll get more exposure to this as you move forward.

String operators

We often need to build and manipulate strings in JavaScript, and string operators can help you to achieve just that!

Concatenation

We can use the concatenation + operator to concatenate (combine) two or more strings together:

let vehicle = 'bike';

console.log(vehicle + 's'); // bikes

Note that we can use the concatenation operator as many times as needed:

const firstName = 'Frodo';
const lastName = 'Baggins';

console.log(firstName + ' ' + lastName); // Frodo Baggins

Shorthand assignment

Likewise the shorthand assignment += operator can also be used to build strings:

let vehicle = 'bike';
vehicle += 's';

console.log(vehicle);

Above the string 's' is being appended to the string stored in the vehicle variable.

This operator is most often used within loops.

Ternary operator

The ternary ? operator is a conditional operator that accepts three operands. It has the following structure:

condition ? value1 : value2

With this operator we can evaluate a condition and return one of two possible results. If the condition is true the operator will return the first value, otherwise it will return the second.

The condition is followed by the ternary ? operator, and the values are separated by a colon :.

Let's say we wanted to calculate the period of the day based on the current hour:

let hour = 8;
const period = hour >= 12 ? 'PM' : 'AM';

console.log(period); // AM

Above we're evaluating whether or not the current hour is greater than or equal to 12, and storing the result in a variable period.

The condition hour >= 12 is evaluated first. If it is true then PM is assigned to period, otherwise AM is assigned.

Summary

In this lesson you learned all about how operators work in JavaScript, the essential operators that you'll be using to build applications, and how to take advantage of them to perform actions and make decisions within your code.

That was a lot to take in! But don't worry, you don't need to memorise all of this information at once. Feel free to use this lesson as reference material when writing JavaScript code.

You will use operators consistently when building programs and it will soon come naturally.