Basics of ECMAScript Variables

ECMAScript Basics - Part 3

Forward: In this part of the series, we look at ECMAScript Variables.

By: Chrysanthus Date Published: 25 Jul 2012

Introduction

This is part 3 of my series, ECMAScript Basics. ECMAScript has variables, similar to mathematical variables. In the strict sense, they do not behave like mathematical variables. In this part of the series, we look at the meaning of ECMAScript variables and some of the type of values that can be assigned to them. The variable name is the name you the web site designer gives.

If you think anything is missing for this article, just contact me at forchatrans@yahoo.com

Example
Consider the following statement;

    var myStr = "This is the third part";

Now, var is an ECMAScript reserved word. This means that you cannot use it arbitrarily. You use it only when you want to indicate that the next word is a variable. In the above statement, the variable is, myStr, meaning, my String. The value "This is the third part." is in quotes. It is a string. It is assigned to the variable, myStr, using what is called the assignment operator, “=”.

Consider now the following two consecutive statements:

    var myStr = "This is the third part";
    document.write(myStr);

The first statement assigns the value, "This is the third part" to the variable, myStr. The second statement writes (inserts) the value into the document. The second statement has the, write() function. What you put inside the parentheses of a function is called the Argument of the function. What we have as argument here is the, myStr, variable. This variable holds the value, which will be written into the document. There are many situations in computing where you would use the variable instead of the value. Try the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script type="text/ECMAScript">
    var myStr = "This is the third part";
    document.write(myStr);
</script>
</body>
</html>

Numbers as Values
You can use numbers as values. You can assign a number to a variable. Consider the following two statements:

    var myNum = 56.48;
    alert(myNum);

The number, 56.48 is assigned to the variable, myNum. When you are assigning a number, you do not have to put the number in quotes. The second line displays the number in an alert box. The alert function has as argument, myNum. Try the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script type="text/ECMAScript">
    var myNum = 56.48;
    alert(myNum);
</script>
</body>
</html>

Assigning a Variable to another Variable
You can assign a variable to another variable. Consider the following two statements:

    var str1 = "test";
    var str2 = str1;

The first statement assigns the string value, “test” to the variable, str1. The second statement assigns the variable, str1 to str2. The value of str2 is “test” copied from str1.

Changing the Value for a Variable
You can assign a value to a variable and then change it after that. Consider the following statements:

    var myStr = "test";
         myStr = "good";

The first statement assigns the value, “test” to the variable, myStr. The second statement assigns a new value to the same variable. The final value of, myStr is “good”. For the second statement, you do not need the reserved word, var, since you had already used it for the same variable before.

Constant
In the above section, the value, “test” is first assigned to myStr and then “good” is assigned to the same variable. This means the variable myStr is not constant.  If you want to prevent a variable from being assigned a new value, you should precede the statement with another reserved word, which is, const; but remove the reserved word, “var”. The following code illustrates this. Try it and notice that the value of the variable, myStr is not changed.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script type="text/ECMAScript">
    const myStr = "beautiful";
             myStr = "handsome";
    alert(myStr);
</script>
</body>
</html>

Boolean Variable
In some situations, you can have one of two possible values. The value can either be, true or false. Any variable that deals with these two values is called a Boolean variable. So, you can have something like:

    var myVar = true;

           or

    var myVar = false;

You do not need quotation makes around true or false.

Rule for Naming a Variable
A variable name must start with a letter or underscore, ‘_’. Within the name, you can have a letter, number or underscore.

Case Sensitivity in ECMAScript
ECMAScript is said to be case sensitive. This means that for variable names, myVar is not the same as MyVar or myvar or MYVAR, etc.

Declaring a Variable
Before you can use a variable, you have to declare it. To declare a variable, you begin with the reserved word, var and then a space then the name of the variable; just as we have been doing above. You do not have to assign a value to a variable when you declare it. You can do the assignment later. The following code illustrates this:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script type="text/ECMAScript">
    var myVar;
        myVar = "you";
    alert(myVar);
</script>
</body>
</html>

In your code, for each variable, the reserved word, var is used once. After using, var, if you need the variable name again, you use the name without, var.

Well, var is actually optional. This means that in the declaration of a variable, you can actually omit, var.

When to use Quotation Marks for Values
If your value is a number or a Boolean value, you do not have to use quotation marks; here quotation marks are optional. If your value is a string, you must use quotations marks.

String
A string is a value in quotes.

Integer
An integer is a whole number. It could be a negative number, zero or a positive number.

Floating Point Number
A floating-point number is a number with a decimal point.

Boolean Value
A Boolean value is either true or false.

Literals
When used as a value, a string, integer, floating-point number or Boolean value is called a literal.

We have seen quite a lot. Let us take a break here and continue in the next part of the series.

Chrys

Broad Network

Basics of ECMAScript Variables

ECMAScript Basics - Part 3

Introduction

Related Links

Comments