lukeprosserBlogProjects

Variables In JavaScript

In this lesson you'll learn about one of the most foundational concepts in the JavaScript language (and programming in general): variables.

We will cover:

What is a variable?

Variables are used to store information. When writing programs we need to handle data, and variables are used to store different data temporarily while we carry out some kind of action upon it.

Variables can store all kinds of data. For example, it could be the email address of a user, a model of car, or the cost of a house. It depends what is needed for the particular program that you are writing.

Declaring a variable

Currently in JavaScript there are two recommended ways to declare variables using the let and const keywords.

let

To declare a variable, you can use the let keyword followed by the name of the variable:

let price = 10;

Above we declare a variable price with the value 10. Let's also log this variable to the console:

let price = 10;
console.log(price);

Note that you don't need to include any quotes around the variable price - you instead specify it directly.

Now if you run the code you should see the number 10 outputted to the console!

const

You can also declare variables with the const keyword:

const name = "frodo";

At this point you're probably wondering what the difference is between let and const - and rightly so! Why would there be two ways to declare variables?

const is short for constant. A variable declared with the const keyword has to be initialised (i.e. it has to be given a value), and once it has been initialised it cannot be assigned a new value. In other words, it's constant and cannot change.

If you try to declare the name variable without giving it a value, and then run the code, you will get an error. Go ahead and try it:

const name;

You should see an error: Missing initializer in const declaration.

Now try to initialise the name variable with a value and then attempt to assign a new value:

const name = "frodo";
name = "samwise";

If you try to run the code you'll see another error: TypeError: Assignment to constant variable.

In contrast, you can declare the same variable with the let keyword without assigning a value:

let name;

Run the code and notice that there is no error thrown - this code is perfectly valid JavaScript.

Similarly if you initialise the variable with a value, and then assign a new value, no error will be thrown:

let name = "frodo";
name = "samwise";
console.log(name);

The above code is perfectly valid, and the value 'samwise' is printed to the console.

When to use let vs const

A good rule of thumb to follow when declaring variables is to always use the const keyword unless the value is going to change, in which case use let.

With const the variable is going to remain constant. With let you are letting the variable be one value for the time being, but intend for it to change later.

var

During your JavaScript journey you will almost certainly see variables being declared using the var keyword. Before let and const, var was the only way to declare variables in JavaScript!

Variables declared with var can change at any point, which can lead to unexpected bugs and errors occurring within your code.

let and const were created to mitigate some of these issues.

Naming conventions

JavaScript is extremely flexible, however there are some specific rules that variable names must conform to in order for the syntax to be valid.

Variable names must be unique, and these unique names are known as identifiers.

Identifiers can be single characters, such as a and b, and can also be more descriptive and verbose, like location and totalScore.

Guidelines

Below are the general rules for variable names in JavaScript:

  • Names must begin with a letter.
  • Beyond that, names can contain letters, digits, underscores _, and dollar signs $.
  • Names can also begin with an underscore _ or a dollar sign $.
  • Names are case sensitive (x and X are different variables).
  • Reserved words (like JavaScript keywords, such as const and return) cannot be used as variable names.

Try to avoid writing variable names beginning with a dollar sign $, as this convention is already used in a number of libraries which could lead to conflicts.

All of these rules also apply to function names, too.

Casing

Variable names can be written using a variety of different casing styles. These include:

  • camelCase
  • PascalCase
  • snake_case
  • SCREAMING_SNAKE_CASE

While all of these styles are valid in JavaScript, it's best to focus on camelCase when you're starting out. This is the most common case style, and is actually utilised within the JavaScript language itself.

Summary

Congratulations! You've just learned all you need to know about variables as a beginner.

Variables are perhaps the most foundational concept in all of programming, so you'll take this knowledge with you all the way.

To recap, you've learned what variables are, how they are declared, and the various naming conventions in JavaScript.