Home arrow JavaScript arrow Overview of JavaScript Variables

Overview of JavaScript Variables

This article will provide a basic overview of JavaScript variables and the functionality they can provide, as well as some examples.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
May 15, 2012

print this article

This article will provide a basic overview of JavaScript variables and the functionality they can provide, as well as some examples.

What is a JavaScript Variable?

If you are completely new to working with JavaScript, you may find it difficult to understand at first.  As with any learning process, you have to start with the basics.  This is especially true with programming and the like, because each language can be thought of as its own little universe complete with unique terms, rules, and more. 

So, when discussing variables in JavaScript, it probably helps to compare them to other parts of life.  Before we do that, let us describe what variables are.  One of the most basic ways to describe a variable in JavaScript is to think of it as a storage space.  What is this storage space good for?  It functions in storing different pieces of information. 

Okay, so now we get the basic idea behind what a JavaScript variable is by calling it a storage space that stores information.  With that in mind, how do variables work?  How are they applicable? 

If you are reading this, the chances are high that you already studied algebra at some point during your schooling.  The difficulty levels at which you learned algebra will likely differ from case to case, but we will use it as a comparison here by talking about some of its most standard concepts. 

Even if it has been many years since you opened up an algebra book, you probably remember simplistic things such as this: a = 6, b = 9, c = a + b

As you can see in this simple example, the letter “a” holds the value of 6, while the letter “b” holds the value of 9.  By knowing what these two letters store, or represent, we can move on to solve for c in the expression of c = a + b.  Plugging in the numbers for our two known letters, we get c = 6 + 9, or c = 15.  These letters are more specifically referred to as variables, just like the ones we are going to discuss in terms of JavaScript.  In algebra, these variables can serve a pair of important functions.  First, they can store values, such as in the case of (a = 6).  Second, they can store actual expressions, such as in the case of (c = a + b). 

We just took a look at how variables work in basic algebra and said that we can use such logic to understand JavaScript variables.  Similar to algebra, we can use JavaScript variables to store either values or expressions. 

What about the naming of JavaScript variables?  Do they all have to be named as letters, such as x, y, z?  No.  they can be named by just a letter, but you can also name JavaScript variables in a manner that is much more descriptive.  For example, giving a JavaScript variable a label such as cityname may be advantageous and provide easier association when it comes to data.

While you do have some flexibility when it comes to naming JavaScript variables, there are a couple of naming conventions that you should keep in mind.  First, JavaScript is a case-sensitive language.  In other words, naming a variable x is different than naming it X.  Since one is lowercase and the other uppercase, they are completely different.  The second thing to keep in mind when naming a JavaScript variable is that the name has to begin with one of the following: the underscore (_), the dollar sign ($), or a letter (x, y, z, etc.). 

How to Declare a JavaScript Variable

Now that you know the basics behind what a JavaScript variable is and its format, it is time to show you how to declare or create a JavaScript variable.  Those two terms are interchangeable, but declare is the term you will probably see used the most, so we will stick with that.

Declaring a JavaScript variable is easy to do, and it is accomplished by using the var keyword.  Here are a couple of examples that use the var keyword to declare JavaScript variables.

Example 1: var z;
Example 2: var cityname;

In Example 1, we declare or create the z variable.  Since we said you could use more descriptive names as well, we did just that in Example 2, declaring the cityname variable.  In these examples, all we did was declare variables that do not have any values.  Think of them as empty storage spaces.

How to Declare a JavaScript Variable and Assign it a Value

What if we wanted to not only declare or create variables, but also give them values at the same time?  Doing so is easy, and here are two examples:

Example 3: var z=6;
Example 4: var cityname=”Miami”;

In Example 3, we declare the z variable and assign it the value of 6.  In Example 4, we declare the cityname variable and assign it the value of Miami.  As you can see in Example 4, we put quotation marks around the value Miami.  You should always remember to put quotation marks around any text values.

Let’s say you decide to assign a value to a JavaScript variable that has not been declared.  Here is a pair of examples:

Example 5: z=6;
Example 6: cityname=”Miami”;

What these two examples do is assign values (6, Miami) to undeclared JavaScript variables.  The end result is that these two undeclared variables of z and Miami will be declared, but they will be declared as global variables.  A global variable in JavaScript is one that can be accessed by all functions and scripts on a page.  Global variables are declared outside of a function in JavaScript.  The opposite, local variables, are declared within a function in JavaScript.  These local variables are only accessible within the function. 

Before closing things out, we mentioned earlier how JavaScript variables compare to those used in algebra.  With that being said, you can use JavaScript variables to perform basic math, as shown in these two examples:

Example 7: b=a-6;
Example 8: c=b+6;


Although basic, hopefully this overview helped you understand JavaScript variables.  We explained what they do, how to declare them, and how to assign values.  Stay tuned for more JavaScript tutorials in the future.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All JavaScript Tutorials
More By wubayou

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials