In the last post, we talked about conditionals and conditions in JavaScript. We also talked about control flow and Boolean data types in JavaScript.  In this post, we will be building upon all of the subsequent posts and finally talk about variables in JavaScript.

We’ve already seen variables in a few of the examples from before; anytime we typed in the keyword var followed by a symbolic name, such as x or test, we were making use of a variable. So what exactly are variables in JavaScript? A good metaphor for variables is to think of them as labels on containers that hold pieces of data. These labels let you refer to the stored data or the stuff inside the containers when you call them later in the code. Though we haven’t talked about objects yet in JavaScript, we can call the actual container an object in this case.

Declaring and Assigning a Variable

When we declare a variable we follow this syntax: var toast. Try typing this into your console. This statement, var toast is telling the compiler that the word toast, is going to be used as a label to refer to data (note: an empty or unassigned variable always has a value of undefined). In this variable, we can store any of the six basic data types of JavaScript, a string, a Boolean, a number, a null, an undefined or an object.

toastTo assign data to a variable we use the equal sign = like this, toast = 10; and now the variable toast refers to the number 10. If we type in the variable name toast in the compiler now, it should return the number 10. We can also reassign the variable toast to another piece of data like the string "burnt" by simply inputting, toast = "burnt"; into the console. Now, the variable toast will no longer refer to the number 10 but it will instead refer to "burnt".

haskellThe fact that we can reassign our variables in JavaScript makes these variables mutable. In some other languages, mainly functional programming languages like Haskell and Clojure, variables are immutable and are not subject to being reassigned. The ability to reassign variables has its advantages and disadvantages which we will talk about later. While some people might refer to JavaScript as an impure functional programming language, any variable created using the keyword var is mutable.

Rules for Variables

Like anything else in programming, variables in JavaScript are subject to different rules. For example, we can declare as many variables as we like using a structure like this: var a, b, c, d, e, f;.  We can declare and assign variables on the same line: var z = 10; and declare and assign multiple variables on the same line var firstName = "john", lastName = "doe", age = 27;. We can use this last example to easily organize a sentence string: firstName + " " + lastName " is " + age " " years old!" which will output "john doe is 27 years old!" in our console.

You may also use basic operators and methods while assigning data to a variable in JavaScript: var x = 12 + 10; will give us the value 22 as the variable x. You may also concatenate strings, use division, multiplication, or subtraction while assigning a variable. var x = 5 * 2 + 10 +"3"; is a valid declaration and assignment statement in JavaScript and x will have a value of 203.

2nd-variableThere is a set of characters and keywords that should not be used in the name of a variable in JavaScript. You should not use a numeral as your first character in a variable name: 123a is not a valid name for a variable. You also can’t use any of the reserved keywords that are functions or operators in JavaScript as a variable name (a complete list is below this post).  Also, variables are case sensitive in JavaScript; the variable FirstName is different from the variable firstName and the variable A is different from a.

Special Characters and Naming

You may use special characters in variables but the general rule is to avoid them unless there is a specific reason to use one. You may use an underscore _ or an at @ sign to start a variable in JavaScript but idiomatically, you should only use them if you can’t avoid doing so. It is fine to use an underscore _ in the middle of a variable and many people do this. we could rewrite our firstName variable as first-name or first_name and they would be perfectly acceptable.

In programming in general, there is a specific naming philosophy called camel case. In camel case you use a lowercase letter for the first word in the variable and an uppercase letter for every word there after. firstName and lastName follow the camel case naming convention. coolBlackCat is another example of this camel case convention. Pick which ever naming convention you prefer but keep things consistent, if you plan to use camel case in your program then don’t change to underscores or dashes in the middle.

Overview

In today’s post, we talked about variables and the basic rules of variables in JavaScript. We also looked at syntax rules and naming conventions. In our next post, we will start to talk about switch statements to flesh out our ability to use control flow in our programs.

List of Reserved Keywords in JavaScript:

AbstractBooleanbreakbytecase
catchcharclassconstcontinue
debuggerdefaultdeletedodouble
elseenumexportextendsfalse
finalfinallyfloatforfunction
gotoifimplementsimportin
instanceofintinterfacelongnative
newnullpackageprivateprotected
publicreturnshortstaticsuper
switchsynchronizedthisthrowthrows
transienttruetrytypeofvar
voidvolatilewhilewith