1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/bltut03.htm

was emailed to:

Thanks for sharing About.com with others!

Learn Javascript

Operators

Join the Discussion

Questions? Comments?

Related Terms

Operator Variable Concatenate

Introduction

In the last tutorial you learned how to create variables. In this tutorial we are going to look at how those variables can be manipulated using operators.

There are several different types of operators. We'll start by considering the following basic types.

  • Assignment operators assign a new value to a variable,
  • The concatenation operator joins text fields together, and
  • Arithmetic operators manipulate numbers

None of this is as complicated as it sounds because you are already familiar with many of these operators from your every day life.

The Basic Assignment Operator

The simplest of all the operators is the basic assignment operator which assigns the content of one variable to another. Here's an example:

<script type="text/javascript">
var rich = 5000;
var lotsOfMoney = 100000;
rich = lotsOfMoney;
document.write(rich);
</script>

This simple Javascript statement takes the value currently stored in the variable called "lotsOfMoney" (100000) and copies it to the variable "rich". Whatever was in "rich" before this assignment (5000) doesn't matter since it has been replaced by the new value. We do not have "var" on the front of the statement since the "rich" variable already exists.

Note that the usage of = in programming languages is different from what you learned back in school since we are using it to indicate that the value on the right is to be assigned to the variable on the left and not that the values are equal in the first place.

Arithmentic and Concatenation Operators

Before we look at the other assignment operators, let's consider the arithmetic operators since these are the next easiest to understand. Here are some examples in Javascript statements:

five = two + three;
profit = income - expenses;
income = sales * price;
payment = total / instalments;
option = randnum % choices;
b = ++a;
c = a++;
d = --a;
e = a--;

You probably recognize what some of these do. The first statement adds the contents of the "two" and "three" variables together and stores the result in the "five" variable - at least that's what it does if the variables all contain numbers. If any of these are not numbers then the + is not considered to be the arithmetic plus operator but is instead considered to be the concatenation operator. So if "two" contains 6 and "three" contains 4 then the resultant value in "five" will be 10 but if "two" contains 'te' and "three" contains 'xt' then the resultant value in "five" will be 'text' ('te' and 'xt' joined together). If either variable contains text instead of a number then the values will be joined instead of added.

The rest of these statements all expect the variables to contain numbers and will not work if any of them contain text. The subtract (-), multiply (*), and divide (/) operators subtract, multiply, and divide just like you learned back in school.

The % operator is one that you are also familiar with but not using that symbol. Remember when you first learned division you learned that when you divide 22 by 5 you get 4 with 2 left over. Well 22 % 5 gives us the 2 that is left over (what some people call the remainder and others call modulo).

The final four statements actually update the value stored in the "a" variable as well as the one on the left of the assignment operator. I will explain how this works by assuming that "a" starts off as 5 in each case. The statement b = ++a first adds 1 to the value in "a" and then assigns that value to "b" so both variables now contain 6. The statement c = a++ first assigns the value from "a" into "c" and then adds 1 to "a" so now "c" contains 5 and "a" contains 6. The statement d = --a subtracts one from "a" and then assigns the result to "d" so both variables now contain 4. I'll leave it for you to figure out what values "a" and "e" end up with after the last statement executes.

Combination Operators

Next we'll look at some more assignment operators. Like the basic assignment operator these also assign a new value to the variable to the left of the operator but with these the original value is not lost but is used in calculating the new value to be stored. Here are some examples:

joy += happiness;
price -= discount;
capital *= interest;
pie /= slices;
options %= choice;

Each of these operators combines a numeric operation with an assignment. The first statement adds together the values in the variables "joy" and "happiness" and stores the result in "joy". Similarly the second statement subtracts the value in the variable "discount" from the value in the variable "price" and stores the result in "price". I am sure that you can figure out the rest.

Using What You Know

This time we'll imagine that you are selling widgets (whatever they are) and want to offer a discount for people who purchase in bulk. If they buy nine they get the tenth one free. The price you're selling the widgets for will change at irregular intervals but the same discount will always apply.

Suppose that the code reads as follows:

<p>Buy our Widgets
$8 for one, $72 for ten</p>

Here again like in the last tutorial we have a situation where we would need to update multiple places to apply the changes and this time the change is not the same in each spot as we need to remember that the replacement for the seventy two needs to be nine times the replacement for the eight.

Javascript operators to the rescue because if we code the text into a Javascript document.write statement we can use operators to not only concatenate amount variables with the static text but we can also use it to calculate the bulk price from the single price. Here's the Javascript version:

var singlePrice = 8;
var bulkPrice = singlePrice * 9;
document.write('<p>Buy our Widgets $'
+singlePrice+' for one, $'+bulkPrice+' for ten</p>');

To change both prices now is as simple as changing the value assigned to singlePrice in the first line of the script.

©2014 About.com. All rights reserved.