Let’s get started.
Variables
Variables are used to store data. When writing programs, it is convenient to use variables instead of the actual data, as it’s much easier to write pi instead of 3.141592653589793 especially when it happens several times inside your program. The data stored in a variable can be changed after it was initially assigned, hence the name “variable”. Variables are also useful for storing data that is unknown to the programmer when the code is written, such as the result of later operations.
There are two steps required in order to use a variable. You need to:
- Declare the variable
- Initialize it, that is, give it a value
In order to declare a variable, you use the var statement, like this:
var a;
var thisIsAVariable;
var _and_this_too;
var mix12three;
For the names of the variables, you can use any combination of letters, numbers, and the underscore character. However, you can’t start with a number, which means that this is invalid:
var 2three4five;
To initialize a variable means to give it a value for the first (initial) time. You have two ways to do so:
- Declare the variable first, then initialize it, or
- Declare and initialize with a single statement
An example of the latter is:
var a = 1;
Now the variable named a contains the value 1.
You can declare (and optionally initialize) several variables with a single var statement; just separate the declarations with a comma:
var v1, v2, v3 = 'hello', v4 = 4, v5;
Variables are Case Sensitive
Variable names are case-sensitive. You can verify this statement using the Firebug console. Try typing this, pressing Enter after each line:
var case_matters = 'lower';
var CASE_MATTERS = 'upper';
case_matters
CASE_MATTERS
To save keystrokes, when you enter the third line, you can only type ca and press the Tab key. The console will auto-complete the variable name to case_matters. Similarly, for the last line—type CA and press Tab. The end result is shown on the following figure.
Throughout the rest of this article series, only the code for the examples will be given, instead of a screenshot:
>>> var case_matters = 'lower';
>>> var CASE_MATTERS = 'upper';
>>> case_matters
"lower"
>>> CASE_MATTERS
"upper"
The three consecutive greater-than signs (>>>) show the code that you type, the rest is the result, as printed in the console. Again, remember that when you see such code examples, you’re strongly encouraged to type in the code yourself and experiment tweaking it a little here and there, so that you get a better feeling of how it works exactly.
Operators
Operators take one or two values (or variables), perform an operation, and return a value. Let’s check out a simple example of using an operator, just to clarify the terminology.
>>> 1 + 2
3
In this code:
- + is the operator
- The operation is addition
- The input values are 1 and 2 (the input values are also called operands)
- The result value is 3
Instead of using the values 1 and 2 directly in the operation, you can use variables. You can also use a variable to store the result of the operation, as the following example demonstrates:
>>> var a = 1;
>>> var b = 2;
>>> a + 1
2
>>> b + 2
4
>>> a + b
3
>>> var c = a + b;
>>> c
3
The following table lists the basic arithmetic operators:
Operator symbol |
Operation |
Example |
+ |
Addition |
>>> 1 + 2 3 |
– |
Subtraction |
>>> 99.99 – 11 88.99 |
* |
Multiplication |
>>> 2 * 3 6 |
/ |
Division |
>>> 6 / 4 1.5 |
% |
Modulo, the reminder of a division |
>>> 6 % 3 0 >>> 5 % 3 2 It’s sometimes useful to test if a number is even or odd. Using the modulo operator it’s easy. All odd numbers will return 1 when divided by 2, while all even numbers will return 0. >>> 4 % 2 0 >>> 5 % 2 1 |
++ |
Increment a value by 1 |
Post-increment is when the input value is incremented after it’s returned. >>> var a = 123; var b = a++; >>> b 123 >>> a 124 The opposite is pre-increment; the input value is first incremented by 1 and then returned. >>> var a = 123; var b = ++a; >>> b 124 >>> a 124 |
— |
Decrement a value by 1 |
Post-decrement >>> var a = 123; var b = a–; >>> b 123 >>> a 122 Pre-decrement >>> var a = 123; var b = –a; >>> b 122 >>> a 122 |
When you type var a = 1; this is also an operation; it’s the simple assignment operation and = is the simple assignment operator.
There is also a family of operators that are a combination of an assignment and an arithmetic operator. These are called compound operators. They can make your code more compact. Let’s see some of them with examples.
>>> var a = 5;
>>> a += 3;
8
In this example a += 3; is just a shorter way of doing a = a + 3;
>>> a -= 3;
5
Here a -= 3; is the same as a = a – 3;
Similarly:
>>> a *= 2;
10
>>> a /= 5;
2
>>> a %= 2;
0
In addition to the arithmetic and assignment operators discussed above, there are other types of operators, as you’ll see later in this article series.
Primitive Data Types
Any value that you use is of a certain type. In JavaScript, there are the following primitive data types:
- Number—this includes floating point numbers as well as integers, for example 1, 100, 3.14.
- String—any number of characters, for example “a”, “one”, “one 2 three”.
- Boolean—can be either true or false.
- Undefined—when you try to access a variable that doesn’t exist, you get the special value undefined. The same will happen when you have declared a variable, but not given it a value yet. JavaScript will initialize it behind the scenes, with the value undefined.
- Null—this is another special data type that can have only one value, the null value. It means no value, an empty value, nothing. The difference with undefined is that if a variable has a value null, it is still defined, it only happens that its value is nothing. You’ll see some examples shortly.
Any value that doesn’t belong to one of the five primitive types listed above is an object. Even null is considered an object, which is a little awkward—having an object (something) that is actually nothing. The data types in JavaScript the data types are either:
- Primitive (the five types listed above), or
- Non-primitive (objects)
Finding out the Value Type —the typeof Operator
If you want to know the data type of a variable or a value, you can use the special typeof operator. This operator returns a string that represents the data type. The return values of using typeof can be one of the following—”number”, “string”, “boolean”, “undefined”, “object”, or “function”. In the next few sections, you’ll see typeof in action using examples of each of the five primitive data types.
Numbers
The simplest number is an integer. If you assign 1 to a variable and then use the typeof operator, it will return the string “number“. In the following example you can also see that the second time we set a variable’s value, we don’t need the var statement.
>>> var n = 1;
>>> typeof n;
"number"
>>> n = 1234;
>>> typeof n;
"number"
Numbers can also be floating point (decimals):
>>> var n2 = 1.23;
>>> typeof n;
"number"
You can call typeof directly on the value, without assigning it to a variable first:
>>> typeof 123;
"number"
Octal and Hexadecimal Numbers
When a number starts with a 0, it’s considered an octal number. For example, the octal 0377 is the decimal 255.
>>> var n3 = 0377;
>>> typeof n3;
"number"
>>> n3;
255
The last line in the example above prints the decimal representation of the octal value. While you may not be very familiar with octal numbers, you’ve probably used hexadecimal values to define, for example, colors in CSS stylesheets.
In CSS, you have several options to define a color, two of them being:
- Using decimal values to specify the amount of R (red), G (green) and B (blue) ranging from 0 to 255. For example rgb(0, 0, 0) is black and rgb(255, 0, 0) is red (maximum amount of red and no green or blue).
- Using hexadecimals, specifying two characters for each R, G and B. For example, #000000 is black and #ff0000 is red. This is because ff is the hexadecimal for 255.
In JavaScript, you put 0x before a hexadecimal value (also called hex for short).
>>> var n4 = 0x00;
>>> typeof n4;
"number"
>>> n4;
0
>>> var n5 = 0xff;
>>> typeof n5;
"number"
>>> n5;
255
Exponent Literals
1e1 (can also be written as 1e+1 or 1E1 or 1E+1) represents the number one with one zero after it, or in other words 10. Similarly, 2e+3 means the number 2 with 3 zeros after it, or 2000.
>>> 1e1
10
>>> 1e+1
10
>>> 2e+3
2000
>>> typeof 2e+3;
"number"
2e+3 means moving the decimal point 3 digits to the right of the number 2. There’s also 2e-3 meaning you move the decimal point 3 digits to the left of the number 2.
>>> 2e-3
0.002
>>> 123.456E-3
0.123456
>>> typeof 2e-3
"number"
Infinity
There is a special value in JavaScript called Infinity. It represents a number too big for JavaScript to handle. Infinity is indeed a number, as typing typeof Infinity in the console will confirm. You can also quickly check that a number with 308 zeros is ok, but 309 zeros is too much. To be precise, the biggest number JavaScript can handle is 1.7976931348623157e+308 while the smallest is 5e-324.
>>> Infinity
Infinity
>>> typeof Infinity
"number"
>>> 1e309
Infinity
>>> 1e308
1e+308
Dividing by 0 will give you infinity.
>>> var a = 6 / 0;
>>> a
Infinity
Infinity is the biggest number (or rather a little bigger than the biggest), but how about the smallest? It’s infinity with a minus sign in front of it, minus infinity.
>>> var i = -Infinity;
>>> i
-Infinity
>>> typeof i
"number"
Does this mean you can have something that’s exactly twice as big as Infinity—from 0 up to infinity and then from 0 down to minus infinity? Well, this is purely for amusement and there’s no practical value to it. When you sum infinity and minus infinity, you don’t get 0, but something that is called NaN (Not A Number).
>>> Infinity - Infinity
NaN
>>> -Infinity + Infinity
NaN
Any other arithmetic operation with Infinity as one of the operands will give you Infinity:
>>> Infinity - 20
Infinity
>>> -Infinity * 3
-Infinity
>>> Infinity / 2
Infinity
>>> Infinity - 99999999999999999
Infinity
NaN
What was this NaN you saw in the example above? It turns out that despite its name, “Not A Number”, NaN is a special value that is also a number.
>>> typeof NaN
"number"
>>> var a = NaN;
>>> a
NaN
You get NaN when you try to perform an operation that assumes numbers but the operation fails. For example, if you try to multiply 10 by the character “f“, the result is NaN, because “f” is obviously not a valid operand for a multiplication.
>>> var a = 10 * "f";
>>> a
NaN
NaN is contagious, so if you have even only one NaN in your arithmetic operation, the whole result goes down the drain.
>>> 1 + 2 + NaN
NaN