JavaScript Variables – Programming Foundations #07

What are JavaScript variables? In programming, a variable is used to store a value. By now you’ve already used a few variables yourself. Let’s take it a step further and look at more examples of variables in JavaScript. 

In this article we will discuss all about variables and datatypes in JavaScript. You will learn all about giving valid names to your variables and understand JavaScript variable scope. We will also be discussing JavaScript global variable and local variables. 

javascript variables
variables in JavaScript

JavaScript variables can be described as place holders for storing data

Assigning a value to a variable is known as variable initialization. 
We use the var statement when declaring a variable in JavaScript. The statement must always be ended with a semi-colon.

Variables can store different types of data including

  • Numbers eg: 35, 980, 476
  • Strings eg: “Cockroach Cluster”
  • Booleans eg: true or false

Numbers

var dragons = 3;

The statement above has declared a JavaScript variable named dragons and it has been given the value 3.

Unlike some programming languages, JavaScript does not treat integer values and floating-point values differently. Rather, JavaScript considers all numbers to be floating-point values. 

var nightsWatch = 500; //this is an integer
var volume = 4.5; //this is a floating-point value

Strings

var motto = "Winter is coming"; //"Winter is coming" is a string
var name = "Jon Snow"; //"Jon Snow" is a string

The first statement declares a variable named motto and it has been assigned a string of characters.  The second statement has also assigned a string to the variable called name.

Booleans

var isLargest = true;
var isQualified = false;

True or false variables in JavaScript are called booleans

javascript variables

Other JavaScript Datatypes

Variables can hold other values besides numbers, strings and booleans. A JavaScript variable is said to be an undefined variable if a value is not assigned to it.

var whiteWalkers; //this is an undefined variable

The variable above has not been given an equal sign or been assigned a value, it has only been declared and you can use it at later point in your code.

You can also declare null JavaScript variables where you assign no real value to the variable. You can also take away the value of any variable just by assigning null to it.

var giants = null;
var dragons = null;

A JavaScript variable can also store a data type known as Objects. We will be studying Objects in a later article.

Naming your variables

Before moving on to JavaScript variable scope, let’s see how you can name your variables. By now you know that variables have a name and that they can be given a value. 

game of thrones

So how can you name your variables? Well, you can give them any name you want as long as you stay within the guidelines below.

  • You must begin your variable name with a letter, a underscore or a dollar sign. The first character of your variable name cannot be a number. For example 3dragons is invalid but $3dragons or _3dragons are valid variable names.
  • Remember that JavaScript is a case-sensitive language. For instance, Walkers and walkers would be considered as different variables. 
  • Do not use any JavaScript keywords as names for your variables. What is a JavaScipt keyword? Let’s see some examples below.

Keywords are built-in words used by JavaScript to do very specific tasks. For example you cannot use keywords like true, false, var or function as variable names. 

Here’s a few common JavaScript keywords. You cannot use them to name your variables.

if, for, while, function, switch, true, false, class, delete, case, super, var, break, catch, else, class, default, private, public, if, try, void, with, export, import

Always try to choose meaningful names for your variables. For example variable names like foo or z don’t make a lot of sense. 

To make your variable names easier to read, you can use ”camel case” when creating variables with more than a single word. Look at these examples where we used camel case to make reading the variable name easier. 

var motherofdragons; //this is difficult to read
var motherOfDragons; //using camel case makes for easier reading

var winteriscoming; //without camel case
var winterIsComing; //with camel case

JavaScript Variables and JavaScript Variable Scope

The scope of a JavaScript variable determines what parts of your code can use the variable. In other words, the scope of a variable is the area of your program where that variable can be seen.

There are two variable scopes when using variables in JavaScript. They are Global and Local. To understand JavaScript variable scope, you first need to know a bit about functions

Functions refer to blocks of code that can be reused again and again. Using functions makes your code look more organized and easier to read. We will discuss functions further in another article. For now, take a look at this example of a function.

function displayQuote() {
    var quote = "You know nothing Jon Snow";
    alert(quote);
}
displayQuote();
javascript variables
a simple JavaScript function / variables in JavaScript

When you run the above code you’ll get an alert box that displays the quote on your browser. 

Now let’s get back to studying JavaScript global variable and local variables. 

A JavaScript global variable can be used anywhere inside the code. A global variable is declared in the main body of the program and not within any functions present in the code. Therefore it has a global scope and you can use it anywhere you please within the program. 

A local variable however is visible only inside the function where it was declared. It is important to remember that if you have a local variable and a global variable with the same name, the global variable will be ignored inside the body of the function where the local variable exists. Take a look at this example. 

var quote = "Hold the door!"; //this is a global variable
function displayQuote() {
    var quote = "Winter is coming"; // a local variable
    alert(quote);
}
displayQuote();
javascript global variable / local variable

When you run this code, the browser will put up an alert box displaying the quote “Winter is coming”. The global variable has been ignored as the local variable of the same name takes precedence over the JavaScript global variable.

On a final note, it’s alright to play about with variable names at this stage, but make sure to keep your JavaScript variables professional when it comes to writing real programs. Check out our guide to writing clean and flawless code to step up your code writing game.  

What’s next? Learn all about using the JS while loop and the if, else and JavaScript else if statement.

Like this tutorial? Check out our other Python tutorials and cool tips and tricks that can help you get stuff done. 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.