Home arrow JavaScript arrow An Overview of JavaScript Operators
JAVASCRIPT

An Overview of JavaScript Operators


This article will give a basic introduction and overview to JavaScript operators. More specifically, we will discuss assignment operators, arithmetic operators, comparison operators, and logical operators. Examples will also be given to help you understand the concepts further.

Author Info:
By: wubayou
Rating: 4 stars4 stars4 stars4 stars4 stars / 4
May 24, 2012

print this article
SEARCH DEVARTICLES

This article will give a basic introduction and overview to JavaScript operators. More specifically, we will discuss assignment operators, arithmetic operators, comparison operators, and logical operators. Examples will also be given to help you understand the concepts further.

There is a wide variety of operators within JavaScript that are useful in performing different functions.  If you are new to JavaScript, learning about the different types of operators and how they work is an essential building block that you will use as you continue to advance your skills.  With that being said, let’s begin our tutorial by first taking a look at two basic categories of operators in JavaScript in the form of assignment operators and arithmetic operators.  Once you get a decent understanding of these two topics, we will move on to discuss comparison operators and logical operators.

Assignment Operators in JavaScript

When you want to assign or designate values to JavaScript variables, assignment operators are used.  Assignment operators are generally represented with the = symbol in one form or another.  Here are some examples of assignment operators in action.  For our examples, we will assume the following to be true: x=20 and y=10.

1. If our assignment operator is =, and x=y, then x=10.
2. If our assignment operator is +=, and x+=y, that translates to x=x+y, so x=30.
3. If our assignment operator is -=, and x-=y, that translates to x=x-y, so x=10.
4. If our assignment operator is *=, and x*=y, that translates to x=x*y, so x=200.
5. If our assignment operator is /=, and x/=y, that translates to x=x/y, so x=2.
6. If our assignment operator is %=, and x%=y, that translates to x=x%y, so x=0.

With assignment operators now complete, let’s move on to JavaScript arithmetic operators.

Arithmetic Operators in JavaScript

Just as their name would suggest, JavaScript arithmetic operators come in handy when you want to perform certain arithmetic operations on variables or values.  Just like we did above with our assignment operators, here are some examples of arithmetic operators in action to help you better understand how they work.  For our examples, we will assume that y=7.

1. Addition – If our arithmetic operator is +, and x=y+2, then x=9 and y=7.
2. Subtraction – If our arithmetic operator is -, and x=y-2, then x=5 and y=7.
3. Multiplication – If our arithmetic operator is *, and x=y*2, then x=14 and y=7.
4. Division – If our arithmetic operator is /, and x=y/2, then x=3.5 and y=7.
5. Modulus or division remainder – If our arithmetic operator is %, and x=y%2, then x=1 and y=7.
6. Increment – If our arithmetic operator is ++, and x=++y, then x=8 and y=8.  Also, if our arithmetic operator is ++, and x=y++, then x=7 and y=8.
7. Decrement – If our arithmetic operator is --, and x=--y, then x=6 and y=6.  Also, if our arithmetic operator is --, and x=y--, then x=7 and y=6.

While our examples of arithmetic operators above shows how they work with just simple numerical values, what about different items, such as string variables or text values?  The concept is pretty much the same, only with different pieces producing differently formatted results.  Let’s take a look at how the arithmetic operator of + can be put to use when you want to combine two string variables or text values.  This operator can also be used when you want to combine more than two string variables together.

txt1="This is";
txt2="an example";
txt3=txt1+txt2;

Once these are executed, our txt3 variable corresponds to "This isan example".  You can see that our txt1 and tx2 samples have combined to make this simple phrase, but you can also see that there is no space between the words is and an, and there needs to be one to have it make sense.  We can achieve our desired result by simply inserting a space at the end of txt1, right after the word is.

txt1="This is ";
txt2="an example";
txt3=txt1+txt2;

While this method will work, you can also achieve the desired result by adding a space into the expression itself:

txt1="This is";
txt2="an example";
txt3=txt1+" "+txt2;

The space we inserted in both examples gives us the following end result for txt3: "This is an example"

Now it is time to discuss comparison operators

Comparison Operators in JavaScript

JavaScript comparison operators are useful whenever you want to compare variables or values to see how equal or different they are.  Let’s look at some examples of comparison operators in action.  For our examples, we will assume that x=10.

1. If our comparison operator is == (equal to), then x==11 is false, and x==10 is true.
2. If our comparison operator is === (exactly equal to in value and type), then x===10 is true, and x===”10” is false.
3. If our comparison operator is != (not equal to), then x!=11 is true.
4. If our comparison operator is > (greater than), then x>11 is false.
5. If our comparison operator is < (less than), then x<11 is true.
6. If our comparison operator is >= (great than or equal to), then x>=11 is false.
7. If our comparison operator is <= (less than or equal to), then x<=11 is true.

While these examples of comparison operators look completely simple on the surface, they are very useful when you want to compare values in conditional statements and use that comparison to execute a certain action.  For instance:

if (price<50) document.write("Too cheap");

This would cause Too cheap to be written if the price is less than 50.

Logical Operators in JavaScript

While comparison operators in JavaScript compare the equality or differences of variables or values, logical operators help decipher logic between variables or values.  To show you how logical operators work, consider the following examples, where we will assume that x=8 and y=4.

1. If our logical operator is && (and), then (x < 10 && y > 1) is true.
2. If our logical operator is || (or), then (x==5 || y==5) is false.
3. If our logical operator is ! (not), then !(x==y) is true.

Conclusion

We have just shown you how assignment, arithmetic, comparison, and logical operators can be used in JavaScript.  Although our examples were basic, hopefully they gave you a little introduction into the world of operators so that you can better understand their function as you continue advancing through JavaScript.

 


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All JavaScript Tutorials
More By wubayou


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials