Re-assigning Variables

In all of our examples so far, we have created new variables to assign the next step of the calculation to.

• Is there any limit to the number of variables in a JS program? No, not really.
• Should you reduce or minimize the number of variables in a JS program? No, not really. You should use any variables that you feel makes your code clearer, easier to understand, and easier to debug. (Variables can help with debugging because you can print intermediate steps to check that part of the calculation.)
• Is there any advantage to re-using a variable? No. In fact, in most cases, if you re-use a variable to hold a different value, you will increase the chance of confusing anyone reading your code, including yourself. Thus, we discourage you from re-assigning to a variable.

Here's an example of poor use of re-assignment:

Ask yourself: what kind of value does val hold? It depends on where in the code you're looking; it changes from place to place. That's why we gave the variable such a vague and unhelpful name: we couldn't use anything more specific. In fact, the value even changes datatype from place to place (in the last assignment, it becomes a string). Since we know that the + operator treats strings differently from numbers, this sort of confusion can be a big problem.

The moral here is that it's not good enough for the JavaScript program to work. The underlying JavaScript code should be easy to read and understand as well!

Good Re-assignment

• Is there ever a time when you should re-use a variable? Yes.

Let's turn to that now. It makes sense to re-assign to a variable when it holds the same information (the same meaning and same datatype), but that the old value needs to be updated. For example, suppose you are counting something, and the count has changed. In an online shopping application, you might be counting the number of items the user has in her cart. Suppose that the variable item_count stores the current number of items in the cart. When she adds another item to the cart, you want to increase that variable's value by one. Here's how:

  item_count = item_count + 1;

Notice that if that were a mathematical equality statement, it would be impossible: no number can equal one more than itself. But this is not equality, this is assignment, so it says to take the current value of item_count, add one to it, and store that value back into the variable.

Here's a specific example, where we count mouse clicks:

Here's an execution box that will add one more click to your click count and report the current values.

There are three things worth noticing from the code above:

1. When we re-assign a variable, we omit the var out front. The var tells JavaScript that we are creating a new variable, and, of course, when we are re-assigning, we aren't creating a new variable.
2. Remember that = should be read as "gets". So in the first line, we are not saying that click_count is equal to click_count plus one. That would be impossible! Instead, we are saying that the value assigned to click_count should be updated to the current value of click_count plus one.

Shortcuts for Incrementing a Variable

Increasing a variable by some amount is such a common operation in programming that most languages have a shortcut syntax, and JavaScript is no exception. For example, the following two statements mean the same thing:

  item_count = item_count + 1;
  item_count += 1;

In fact, increasing a variable by one is so common that there's an even shorter cut. All three of the following mean the same thing:

  item_count = item_count + 1;
  item_count += 1;
  item_count++;

All these do is save you some typing. You don't need to use them if you don't want to.

Swapping Values is Tricky!

Re-assignment also occurs when we are moving values around. For example, suppose we are keeping a high score list of the fastest clicking users. If someone moves up on the list (gets a new personal best), we may need to sort the list. One important step in sorting is swapping values.

Digging into real sorting algorithms is outside the scope of this course, but we do want to look at the issue of swapping values, because it brings up some important issues about how computation works.

Suppose that we declare two variables as follows:

var elmo = 21;
var grover = 18;

How can we swap the values in the two variables? That is, how can we change elmo to have grover's value of 18 and change grover to have elmo's value of 21?

The following solution attempt does not work. Why?

elmo   = grover;
grover = elmo; 

Note: Your code should work no matter what values are in the two variables. We are using 18 and 21 for concreteness only, but your code should work if they are 7 and 27 or 3 and 92 or ...

The important points are these:

• Execution goes top to bottom. The computer doesn't do any steps simultaneously
• The computer doesn't understand what you mean; only what you say.