JavaScript Variables

Before explaining what a variable is, I want you to change the code you’ve written in the index.js file.

Change the code in that file as follows:

let message = "Hello World!"
console.log(message)

Next, run the code using the node index.js command. You’ll see the same output as when you write the 'Hello World!' message directly inside the console.log() function. How can this be?

This is because the message written in the code above is a variable.

In programming, a variable is simply a name that you give to a value so that you can access that value later. You can think of a variable as a label that can be tagged to a certain value, so you can refer to the value using the label.

To declare a variable, you need to type the keyword let followed by the variable name.

The first line in the code tells JavaScript to associate the message variable with the value Hello World!:

let message = "Hello World!"

In the second line, JavaScript is instructed to print the value of message, and that’s exactly what it does.

You can change the value of your variable by re-assigning another value as follows:

message = "Hello World!"
print(message)
message = "Nice weather!"
print(message)

Run the file and you’ll see two lines printed as the output:

Hello World!
Nice weather!

Variables are used to reference data so that you can use the same data multiple times in your program.

Next, let’s see some rules for naming variables in JavaScript.

Variable naming

JavaScript has a few naming rules that you need to know to avoid naming errors.

Variable names can only contain alphabet letters, numbers, and underscores (_). This means you can name your variable messagemessage_1message_2.

The first character of the variable name must not be a number. message_1 is okay. 1_message is not.

You can’t use reserved keywords such as console because they are used by JavaScript to do certain things. There are many other keywords used by JavaScript that you’ll learn in the following sections such as iffor, and while.

Variable names are case-sensitive, which means MessageMESSAGE, and message can be used to create three different variables. But of course, I don’t recommend using similar names as it causes confusion.

Sometimes, you need more than one word to declare a variable name. JavaScript has two naming conventions that are used worldwide:

  1. camelCase
  2. snake_case

Camel case is a naming convention that uses an uppercase letter for the first character for subsequent words. Here’s an example:

let myAwesomeVariable

The snake case naming convention uses an underscore to separate words. Here’s an example:

let my_awesome_variable

Both are acceptable naming conventions, but you should stick to one of them in your code to avoid confusion.

Constant variable

There are times when you need to store a value that never changes in a variable.

A constant variable is a variable that doesn’t change its value as long as the program is running. In other programming languages, changing the value of a constant will produce an error.

In JavaScript, a constant variable is declared using the const keyword.

The following shows how to declare 2 constants in JavaScript:

const FILE_SIZE_LIMIT = 2000
const MAX_SPEED = 300

The naming convention for a constant is to use all uppercase letters, although using lowercase letters also works. The uppercase is just a standard to make constants stand out more.

The var keyword

The var keyword is used to declare variables with a global scope. This keyword was the only keyword you can use to declare variables before JavaScript released the new let and const keyword in 2015.

As of today, you should avoid using var if you can, since var can introduce bugs that you can avoid by using the let keyword.

To show you what I mean, consider the following example:

if(true) {
    var name = "Nathan";
}

console.log(name)

The code above will print the name variable just fine, but it really should not because the variable name is declared inside the if block.

This is because any variable declared using the var keyword is accessible from everywhere. The scope of that variable is global.

On the other hand, the let keyword has a block scope, which means the variable is only accessible from the block and all its child blocks.

But why bother with scoping the variable? This is because when you have hundreds or thousands of code lines, it can become frustrating to trace an error that occurs because of global variables.

There’s a principle in software development called the "principle of least privilege", which means you don’t expose any part of your program that’s unnecessary to get the job done.

Block scoping a variable ensures that a variable is exposed and accessible only in parts of your codebase that require the variable.

A variable declared using the let keyword is identical to a variable declared using var except for the scope level.

if(true) {
    let name = "Nathan";
}

console.log(name)  // Error: name is not defined

This also means that you now have varlet, and const keywords to declare a variable. Which one to use?

In general, you can declare a variable with const first. When you code your application and realize that you need to change the variable assignment, you can change the declaration to let.

If you know from the start that the variable’s value will change, then you can use let immediately. Just don’t use var today or people might get mad at you.

Exercise #2

Write a program with three variables, each with the following value:

  1. The first variable contains your name
  2. The second variable contains your age
  3. The third variable contains your occupation

Then print the variables using the console.log() method. Here’s the example output:

John Doe
Student
19

Summary

How you use variables to make a program that does what you want it to do is one of the most important skills you can have as a programmer.

But before you learn more about how to make use of variables, let’s learn about data types in JavaScript.

Complete and Continue