JavaScript Operators – Complete Guide With Examples

Let us do a quick recap of what we covered last time. We wanted to represent Jason in JavaScript.

And we saw the following code for representation:

 In this blog, we will answer the questions we were left with and cover the following topics:

Data Types	Operators
Boolean, Object	Comparison Operators

Remember, you can always code along with this article! Log in to codedamn playgrounds and start an HTML/CSS playground for yourself. It is free to use.

You can find all the code files on the playground here.

Object Data Type

First of all, let us figure out a way to represent Jason more neatly in the code. Think about it, what would you do? Think about a structure in real life where all this information is easily available for a single person. If you thought of a student ID card, well then we think alike! An ID card has all the information we would need for a student and it usually has the following format:

If you notice, for the three ID cards that we have, they represent:

• Same information for different individuals
• Have the same format
• Are easily identifiable, i.e., ID = 1, will refer to Jason Bourne and so on.

We can do the same thing in JavaScript as well! Let me show you how!

Notice, a few things:

• The box gets replaced by curly braces
• The ID, gets replaced by the variable name “idOne”
• Rest of it, remains the exact same

Isn’t that easy?

Next, let us represent Jason, with all the hobbies!

We have successfully represented Jason as a JavaScript object, i.e., a bunch of key-value pairs, where keys are like properties or attributes, and values are the actual values that correspond to a property. The two benefits we have seen till now are:

• Easier to understand and write code
• Can be done for multiple people (read as, objects) like Pichai and Jobs earlier

And don’t worry, we will discuss the square bracket syntax, used to form arrays in a blog soon to come.

The general syntax is very easy:

Yes! You can have objects as values to keys. Read that again!

Let us console.log a few things about Jason from the Object data type.

Alright! So clearly, we can still use the Object data type to produce the same output as we did in the previous article. But the method is slightly different. 

Let’s list them down:

• Dot Notation: varName.key

The student ‘dot’  key will return the value associated with that key. So student.name returns “Jason Bourne”

• Bracket Notation: varName[key]

The student[key] will do the same thing but has a different syntax. So student[“name”] returns 22.

In the image, you will see that hobbies is followed by [0]. You will learn more about indexing and arrays in a different blog post but for now, just understand adding the [0] returns the first value in the array, which is Coding.

Check out the nested object as well:

If education was a separate object, you would have written education.postgrad to get computer science. Since education is inside nestedObject, you add another dot before education. You can also do the following:

• nestedObject.education[“postgrad”]
• nestedObject[“education”].postgrad
• nestedObject[“education”][“postgrad”]

Phew! That was a lot. If you have made it this far and are still with me, you are amazing! 

We just have one more data type to discuss along with comparison operators.

---

Boolean Data Type

true or false

That is it. The boolean data type. A variable is given a value of true or false is referred to as the variable holding a boolean data type.

For instance, in our example:

Larry’s age is less than 25 years, so we set the variable isAgeLessThan25 to true, because that is correct. Similarly, we set the isSalaryMoreThan200K variable to false because the salary is $120,000!

That is it for the boolean data type! But wait, what should you do with this information? That’s where comparison operators come in.

---

Comparison Operators

Boolean data types standalone are not very useful. But they are the output of any comparison that you will make in JavaScript and for computers in general. They dictate a lot of things and you will see them in full action when you learn about loops and control flows. For now, it is imperative that you understand how to do comparisons and what they return. 

If I ask you, is Larry’s salary equal to $120,000, or more or less than that? How would you do that in JavaScript?

You would have to use the “>”, “<” symbols for checking more than or less than a certain value. 

To check if the salary is equal to 120000, you would have to use the “==” operator. It basically checks whether the value on the left-hand side is equal to the right-hand side.

Each of these comparisons returns a true or false value! A boolean value.

Okay, then here is another question for you! What do you think will be the output of the following code:

Note very carefully that, while in line 12, 120000 is a Number data type, in line 16 it is a String data type because it is inside double-quotes.

If your instinct was to say, that the output will be false because you cannot compare different data types, you would usually be right! However, JavaScript is very intelligent. If it sees you do something like you did in line 16, it will understand that you actually wanted to compare numbers. JS will then go ahead and convert “120000” into 120000. It will convert the RHS String type into Number type and then return true! This is called Type Conversion. Try it out.

The issue with this is, in many cases, you might not want JS to act all intelligent and do the work for you.

So to avoid that, you can use the “===” operator! 

When you use the “===” operator, JavaScript actually compares the type of the object as well. So line 17, returns “false” because a Number type is not the same as a String type.

It is a good practice to use “===” wherever possible.

JavaScript provides multiple other comparison operators too! Given two variables, x and y:

Operator	Description	Example
==	Equal To	x == y
!=	Not Equal To	x != y
===	Strict Equal To	x === y
!===	Strict Not Equal To	x !== y
>	Greater Than	x > y
>=	Greater Than Equal To	x >= y
<	Less Than	x < y
<=	Less Than Equal To	x <= y

Conclusion

In this blog, we saw a lot of detail about the Object data type. We also learned about Boolean data types and the Comparison operators and we touched upon type conversions. And that’s pretty much it for this article.

In the next one, we will understand Type Conversions in greater detail and delve into some simple arithmetic operations like addition, subtraction, multiplication, and division.

Till then, practice, practice, and practice on codedamn playgrounds.