How to Work with Simple Variable Types in JavaScript
- Basics of Variables
- Working with Numbers
- Working with Strings
- Performing Type Conversions
- Review and Pursue
- Wrapping Up
This chapter is from the book
This chapter is from the book
This chapter is from the book
All programming comes down to taking some action with some data. In this chapter, the focus is on the data side of the equation, represented by variables. Even if you’ve never done any programming, you’re probably familiar with the concept of a variable: a temporary storage container. This chapter starts with the basics of variables in JavaScript, and then covers number, string, and Boolean variables. Along the way you’ll find plenty of real-world code, representing some of the actions you will take with these simple variable types.
Basics of Variables
I think it’s easiest to grasp variables by starting with so-called “simple” variables, also called “primitive” variable types. By simple, I mean variables that only store a single piece of information at a time. For example, a numeric variable stores just a single number; a string, just a sequence of zero or more quoted characters. Simple variables will be the focus in this chapter, with more advanced alternatives—such as arrays and objects—coming in Chapter 6, Complex Variable Types.
To be completely accurate, it’s the values in JavaScript that are typed, not the variables. Further, many values in JavaScript can be represented as either a literal or an object. But I don’t want to overwhelm you with technical details already, especially if they won’t impact your actual programming. Instead, let’s focus on this line of code:
var myVar = 'easy peasy';
TIP
Remember that you can practice much of the JavaScript in this chapter using your browser’s console window.
That’s a standard and fundamental line of JavaScript programming, declaring a variable named myVar, and assigning to it the string easy peasy. The next few pages will look at the four components of this one line in detail:
- var, used to declare a variable
- the variable’s name
- =, the assignment operator
- the variable’s value
Declaring Variables
To declare a variable is to formally announce its existence. In many languages, such as C and ActionScript, you must declare a variable prior to referencing it. JavaScript does not require you to declare variables, you can just immediately begin referencing them, as in:
quantity = 14;
(The semicolon is used to terminate a statement. It’s not required, but you should always use it.)
Now, to clarify, you don’t have to declare variables in JavaScript, but you actually should. To do that, use the var keyword:
var fullName;
or
var fullName = 'Larry Ullman';
The distinction between using var and not using var has to do with the variable’s scope, a topic that will mean more once you begin defining your own functions (see Chapter 7, Creating Functions). Undeclared variables—those referenced for the first time without using var—will have global scope by default, and global variables are frowned upon (see the sidebar for more).
Also understand that whether or not you assign a value to the variable when it’s declared has no impact on its scope. Both lines above used to declare the fullName variable result in a variable with the same scope.
As discussed in Chapter 1, (Re-)Introducing JavaScript, JavaScript is a weakly typed language, meaning that variables are not strictly confined to one type or another. Neither of the above uses of fullName decree that the variable is a string. With either of those lines of code, this next line will not cause a syntax error:
fullName = 2;
That line would most likely cause a logical or run-time error, as other code would expect that fullName is a string, but the larger point is that a JavaScript variable isn’t typed but has a type based upon its value. If fullName stores a quoted sequence of zero or more characters, then fullName is said to be a string; if fullName stores 2, then it’s said to be a number.
Note that each variable is only declared once, but you can use var to declare multiple variables at the same time:
var firstName, lastName;
You can even declare multiple variables at the same time while simultaneously assigning values:
var firstName = 'Larry', lastName = 'Ullman';
You’ll rarely see this done in the book, as I will want to better focus on each variable declaration, but lines like that one are common in real-world JavaScript code.
As a final note on the var keyword, you should always declare your variables as soon as possible in your code, within the scope in which they are needed. Variables declared outside of any functions should be declared at the top of the code; variables declared within a function definition should be declared as the first thing within that function’s code. The technical reason for this is because of something called “hoisting,” but declaring variables as soon as possible is also standard practice in languages without hoisting issues.
Variable Names
In order to create a variable, you must give it a name, also called an identifier. The rules for names in JavaScript are:
- The name must start with a letter, the underscore, or a dollar sign.
- The rest of the name can contain any combination of letters, underscores, and numbers (along with some other, less common characters).
- You cannot use spaces, punctuation, or any other characters.
- You cannot use a reserved JavaScript word.
- Names are case-sensitive.
This last rule is an important one, and can be a frequent cause of problems. The best way to minimize problems is to use a consistent naming scheme. With an object-oriented language like JavaScript, it’s conventional to use “camel-case” syntax, where words within a name are broken up by a capital letter:
- fullName
- streetAddress
- monthlyPayment
In procedural programming languages, the underscore is often used to break up words. In procedural PHP, for example, I would write $full_name and $street_address. In JavaScript, camel-case is conventional, but the most important criterion is that you choose a style and stick with it.
As a final note, you should not use an existing variable’s name for your variable. For example, when JavaScript runs in the browser, the browser will provide some variables, such as document and window. Both of these are quite important, and you wouldn’t want to override them by creating your own variables with those names. You don’t need to memorize a list of browser-provided variables, however; just try to be unique and descriptive with your variable names (e.g., theDocument and theWindow would work fine).
Assigning Values
As you probably already know or guessed from what you’ve seen in this book or online, a single equals sign is the assignment operator, used to assign a value on the right to the variable on the left. Here is the declaration of, and assignment to, a numeric variable:
var rate; rate = 5.25;
This can be condensed into a single line:
var rate = 5.25;
That one line not only declares a variable, but initializes it: provides an initial value. You do not have to initialize variables when you declare them, but sometimes it will make sense to.
Simple Value Types
JavaScript recognizes several “simple” types of values that can be assigned to variables, starting with numbers, strings, and Booleans. A number is exactly what you’d expect: any quantity of digits with or without a single decimal point. Numeric values are never quoted and may contain digits, a single decimal point, a plus or minus, and possibly the letter “e” (for exponential notation). Numeric values do not contain commas, as would be used to indicate thousands.
A string is any sequence of zero or more quoted characters. You can use single or double quotation marks, but you must use the same type to end the string as you used to begin it:
- ‘This is a string.’
- “This is also a string.”
If you need to include a single or double quotation mark within the string, you can either use the other mark type to delineate the string or escape the potentially problematic character by prefacing it with a backslash:
- “I’ve got an idea.”
- ‘Chapter 4, “Simple Variable Types”’
- ‘I\’ve got an idea.’
- “Chapter 4, \“Simple Variable Types\””
What will not work is:
- ‘I’ve got an idea.’
- “Chapter 4, “Simple Variable Types””
Note that a string does not need to have any characters in it: Both ‘’ and “” are valid strings, called empty strings.
JavaScript also has Boolean values: true and false. As JavaScript is a case-sensitive language, you must use true and false, not True or TRUE or False or FALSE.
Two more simple, yet special, values are null and undefined. Again, these are case-sensitive words. The difference between them is subtle. null is a defined non-value and is best used to represent the consequence of an action that has no result. For example, the result of a working Ajax call could be null, which is to say that no data was returned.
Conversely, undefined is no set value, which is normally the result of inaction. For example, when a variable is declared without being assigned a value, its value will be undefined (Figure 4.1):
){kind=link}
var unset; // Currently undefined.
Figure 4.1. Because this variable has not yet been assigned a value, its value is undefined.
Similarly, if a function does not actively return a value, then the returned value is undefined (you’ll see this in Chapter 7).
Both null and undefined are not only different from each other, but different from false, which is a known and established negative value. As you’ll see in Chapter 5, Using Control Structures, when used as the basis of a condition, both null and undefined are treated as FALSE, as are the number 0 and the empty string. Still, there are differences among them.
TIP
As a reminder, the combination of two slashes together (//) creates a comment in JavaScript.