In JavaScript and many other programming languages, the use of operators is necessary while working with variables. For instance, assigning values to variables, adding and subtracting integers and many other operations.

So, it is important that you have a proper understanding of different types of operators we have in JavaScript and how to use them.

In this article I will show some of JavaScript operators ranging from assignment operators, to arithmetic operators, string operators, comparison operators, logical operators, type operators and finally bitwise operators.

What you should expect from this article includes:

Outline

1) What are Operators in JavaScript and why they are important

2) Types of operators in JavaScript with example

3) Conclusion

What are JavaScript Operators and why they are important

Operators are the tools used within a JavaScript’s code to perform logical or arithmetic operations. Say for instance, you want to add two numbers together, you make use of operators, or say you want to compare two values you also make use of operators and even assignment of values to variables requires the use of operators.

There are different types of operators divided into different categories in JavaScript based on their use, but for the reason of this article we are going to look at a few of them under each category.

Types of Operators In JavaScript With Example

Like I mentioned earlier, JavaScript operators are divided into categories based on the different function each operator have. These categories include:

1) Assignment Operators:

Assignment operators are used for assignment of values to variables. We have a handful of them such as =, +=,-=, etc.

So, it is worth knowing that the (=) sign when used in JavaScript is not the same thing as saying equals, but rather it is an assignment operator.

Example of assignment operator includes:

i) The (=) operator:

Like I mentioned earlier the (=) sign is an assignment operator and not a comparison operator (equals). In other-words doing something like:

let str = ”I love JavaScript”

Will assign the string value “I love JavaScript” to the variable “str” and not comparing the variable “str” with the string value.

Comparison operators will be discussed in details later in this article, but for now just know that the (=) sign is not a comparison operator but an assignment operator, and it is not the only assignment operator we have in JavaScript we also have.

ii) The += operator:

Another important assignment operator in JavaScript is the += operator, which is an addition assignment operator.

The += operator assigns values to a variable while increasing the value. For example let’s say we have a variable with a value of 5 assigned into it and we want to reassign a new value of 15 to the variable we can do so with two different methods, first we can assign 5 to the variable and then reassign a value of 5+10 to the variable which is 15, like this:

let number = 5;

number = 15

console.log(number)

this will produce 15 as an output, but a more interesting way of doing this is by using the += operator.

So instead of using the first method above, you can simply do this:

let number = 5;

number += 10

console.log(number)

This will increase the previous value of the number variable by 10 and print out 15 as an output. The addition assignment operator is very good in conditional statements and loops as they could serve as escape for the loop.

So, in case you might want to assign values to a variable while increasing the value you can make use of the += sign assignment variable.

iii) The -= operator:

Among the assignment operators in JavaScript, we have the -= operator, which performs the direct opposite of the += operator. While the += sign assigns increasing values to variable, the -= operator assigns decreasing values to variable.

For example, let’s consider the example from before, but this time let’s say we want to assign a value less than the previously assigned value, we can go ahead and use the -= operator like this:

let number = 5;

number -= 1

console.log(number)

This will produce a result with a value one less than the previously assigned value.

It is worth noting that the increasing and decreasing assignment operator does not allow spaces in between the signs, so doing something like “+ =” or “- =” will produce an error.

2) Comparison Operators:

Most often while coding especially when using conditional statements, the use of comparison operators come into play. Well, comparison operators are used in JavaScript for comparing two values.

We have a bunch of comparison operators and they are:

i) The == sign operators:

If you want to compare say two numbers or strings in JavaScript you can make use of this operator. The comparison operator works effectively when used with conditional statement.

So, let’s say we have a variable like before that we called “number” and this variable have a value of “5” passed into it.

So, we want to print out the number in our console, if number is equal to 5, we can use the equal to (==) operator to compare the values and print out the variable if the condition is true, example

let number = 5;

if (number == 5) {

console.log(number)

}

But one drawback of the equal to (==) operator is the fact that the equal to (==) operator does not compare type of value it only compares size.

For example, if we should go back to our example and put a string in place of 5 (that is we put quotes around 5) the code will still print out the variable in the console.

Example:

let number = 5

if(number == "5"){

console.log(number)

}

But not to worry, you can make use of the equal value and equal type (===) operator to get a stricter comparison, so running the second comparison with an equal value and equal type (===) operator will not print out the variable in the console, because the (===) operator checks for both the size and type of value.

ii) The != Operator:

The not equal (!=) operator performs the direct opposite of the equal to (==) operator. In the case of not equal (!=) you are simply checking if two values do not match.

For instance if, you should go back to our previous example and do something like this:

let number = 5;

if(number != 5){

console.log(number)

}

You are not going to have the variable printed out in the console again, this is because, the variable has a value of 5, but if you should say something like “number !=2” you will have the variable value printed in the console.

Example:

let number = 5;

if(number != 2){

console.log(number)}

You can also perform a strict comparison with the (!==) operator, if you want to compare values and type

Example:

let number = 5;

if(number !== “5”){

console.log(number)

}

The above code will print out 5 which is the value of the number variable, this is because “5” is a string and 5 is a number, so “5” is not the same thing as 5, this is because the (!==) operator checks for both types and value.

iii) greaterThan (>) operator:

The greaterThan (>) operator compares two value to see if one (usually the first value) is bigger than the other. For example, in our previous example we can use the greaterThan (>) operator to perform the same action, if the value of number is greater than another number.

Example:

let number = 5;

if(number > 2){

console.log(number)

}

This will print 5 on the console, because obviously 5 is greater than 2.

But what if we do something like this:

let number = 5;

if(number > 5){

console.log(number)

}

What do you think will happen? Well we won’t have our variable value printed out in the console, this is because number have a value of 5 and not a value greater than 5.

So, doing the above, will not give you the variable value in the console.

But you can use another kind of operator known as the greaterThanOrEqualTo (>=) operator, to compare values that are greater than or equal to each other. For example, in our case we can go ahead and say:

let number = 5;

if(number >= 5){

console.log(number)

}

iv) LessThan(<) operator:

The (<) operator does the direct opposite of what the (>) operator does.

So, if maybe you don’t want the console to show the result if number is greater or equal to 5, but rather it should do so if number less than 5, then you should make use of the (<) operator.

Example:

let number = 2;

if(number < 5){

console.log(number)

}

From the code above the value of the number variable will be printed out in the console because, number have a value of 2 which is less than 5, but what if we want to compare number with “2”, like we do something like this:

let number = 2;

if(number < 2){

console.log(number)

}

What do you think will happen? Well, the console will not show any result, this is because number have a value of 2 which is equal to 2. But you can still go ahead and have a result in the console, by using the lessThanOrEqualTo (<=) operator.

Example:

let number = 2;

if(number <= 2){

console.log(number)

}

3) Arithmetic operators:

Arithmetic operation is one thing that we cannot exclude from coding. Arithmetic operators help us to carry out these operations and some example of arithmetic operators include the addition(+) operator, subtraction (-) operator, multiplication (*) operator, division(/) operator, modulus (%) operator etc. what these operators do is self explanatory, they are just the basic arithmetic functions, like adding two numbers together, subtracting a number from another number, or multiplying two numbers.

4) Logical operators:

Logical operators explains the logic behind variables or values. For example, say you have two variables and you want to compare both variables with different values you can make use of the logical operators. Examples of logical operators are:

i) and( && ) operator:

This operator compares two conditions in if they are true and carries out what is in the statement. For example, let’s say we have two variables age and height and we want the conditional statement to run if both age and height are equal to or greater 18 and 7ft respectively, we can use the logical && operator to do this example:

let age = 18;

let height = 7;

if(age >= 18 && height >= 7){

console.log(“You are welcome”)

}

else{

console.log(“You are not eligible”)

}

Notice that you will have “You are welcome” printed out on the console. But what if you have one of variable less than the stated condition, for example height is less than 7, what do you think will happen.

let age = 18;

let height = 4;

if(age >= 18 && height >= 7){

console.log(“You are welcome”)

}

else{

console.log(“You are not eligible”)

}

Well the above example will print not eligible on the console, because height is less than although the age is up to 18.

So, it is worth knowing that the and (&&) operator makes sure that all conditions are true, but what if we want a condition where at least one condition should be true, well that leads us to the next operator.

ii) OR (||) operator:

In some cases, we might want to do something, if at least one of the conditions is satisfied. Like in our previous example, we might want to say at least even if the person is not of height 7ft but of age 18 let the console still print out you are welcome. Well in this case we are trying to say that at least one of the conditions must be satisfied.

Example:

let age = 18;

let height = 4;

if(age >= 18 || height >= 7){

console.log(“You are welcome”)

}

else{

console.log(“You are not eligible”)

}

If you do this, you will find out that the “You are welcome” will be shown on the console although one of the conditions (height) is not true. This is so because, you said, with the OR (||) operator that at least one of the conditions should be true.

5) String operator (+):

In JavaScript strings also have their own operators that could be used in carrying out operations like concatenation of strings. Concatenation simply means adding or joining two strings together. In JavaScript when the + sign is used together with strings it is not seen as addition but rather as concatenation,

Example:

var str = "5"

var number = 5

let text = string + number

console.log(text)

If you run the code above you will notice how you get “55” printed out in the console instead of “10”, this is because we just concatenated the variable “str” with “number”. If you add a string to a number, JavaScript treats that number as a string and then concatenates it with the string, this explains why we have "55" instead of "10".

So, let’s say you want to print out on the console “your age is 20” or what ever age you like. You can also make use of the (+) operator

Example:

var age = 20

console.log(“your age is” + age)

Notice how 20 and age were joined together as a single word, which is not what we want, but we can change that by placing another (+) and quotation marks in between the string and age variable like this:

var age = 20

console.log("your age is" +" " + age)

Now we have our problem sorted out.

Conclusion

So, this is all we have on JavaScript operators on this article. Although this is not all the operators we have in JavaScript, but this is a comprehensive list of the most important ones.

In this article we saw some few examples such as comparison operator examples, logical operator example and so on. Some of these operators may not look so useful to you right now, but trust me they are in fact very useful, especially when you start using them on real life projects, like the use of the logical operators.