Javascript Variables & Constants Tutorial

What is a variable

A variable is a data container that stores behind-the-scenes data temporarily in a system’s memory (RAM) while the program runs. We give these variables meaningful names to allow us to easily work with the data inside.

A variable can store a single type of data, such as a string of characters that form a sentence or a number.

In many other programming languages such as C, we must explicitly declare what type of data the variable will hold. In Javascript however, the translator will automatically infer the data type from the value stored inside the variable.

How to declare a variable

To declare a variable, we write the keyword let , followed by the name we want to give the variable and we terminate the statement with a semicolon ( ; ).

let uniqueName;

This will create an empty variable with whatever unique name we give it. This variable is now ready to accept data to store.

let message;

How to assign data to a variable

Now that we have a variable, we can add some data inside of it. To assign data to a variable, we write its name, followed by the = operator and then any data we want to give it. Lastly, we end the statement with a semicolon again.

uniqueName = value;

Now the variable will have data stored inside it and we can use it.

// declaration
let message;

// assign data
message = "Hello World";

How to initialize a variable with a value

If we know the data we want to store beforehand, we can directly assign data to the variable when we declare it. This is called variable initialization.

To initialize a variable, we write the let keyword and the name we want to give it, then the assignment operator ( = ) and the data we want to assign to the variable.

let uniqueName = data;

// initialization
let message = "Hello World";

How to use a variable

To use a variable, we simply refer to it by its name. The translator will pull the data from the variable and substitute it wherever we use it.

We can modify the code from our first application.

<script>

  let message = "Hello World";

  document.write(message);
  // document.write("Hello World");

</script>

In the example above, we create a variable called message with the words “Hello World”. Where we previously wrote the words directly into the document.write() function, we now write the variable name.

When we save the document and open it in the browser, we can see that the words inside the variable are displayed on the page.

As another example, let’s do some simple math with variables.

<script>

  let x = 5;
  let y = 3;
  let result = x + y;

  document.write("5 + 3 = ", result);

</script>

In the example above, we add the value of y to the value of x and store the result in a variable called result. Then we print the result to the webpage.

So the translator substitutes the variable name with its value. The example above would essentially look like this.

8 = 5 + 3
document.write("5 + 3 = ", 8);

How to change data in a variable

A variable is mutable, which means that we can change the data inside the variable while the code is running. We don’t have to set up a new variable each time we need data.

To change (mutate) the data inside a variable, we simply assign the new data to it with the assignment operator.

<script>

  let message = "<p>Hello World</p>";
  document.write(message);

  // mutate data
  message = "<p>Greetings</p>";
  document.write(message);

</script>

In the example above, we mutate the message variable to hold a new value.

What is a constant

A constant is the same as a variable except that it’s value cannot change during runtime.

This is useful so that the application doesn’t accidentally change a value that shouldn’t be changed, such as the value of pi or gravity.

How to declare/initialize a constant

We cannot declare a constant without a value. If we want to create a constant, we must initialize it with a value.

To initialize a constant, we use the const keyword instead of the let keyword.

const uniqueName = value;

We write the name in all capital letters as a convention. It allows us to easily distinguish between regular variables and constants.

const PI = 3.14;

How to use a constant

Using a constant is the same as using a variable. We simply refer to the constant’s name where we need to.

<script>

  const PI = 3.14;
  let radius = 3;

  // calculate the area of a circle
  let area = PI * radius * radius;

  document.write(area);

</script>

In the example above, we use the constant PI to calculate the area of a circle.

Variable & Constant naming rules and conventions

There are a few rules we should consider when naming our variables and constants.

1. A name must start with a letter (a to z or A to Z), an underscore ( _ ), or a dollar sign ( $ ).
2. A name cannot start with a number, but may contain numbers.
3. A name cannot be the same as a Javascript keyword.
4. Names are case sensitive. For example let a and let A are different variables.

// correct
let message;
let _message;
let $message;
// incorrect
let #LostSock#TheStruggleIsReal;
let (^_^);

// correct
let mamboNumber5;
// incorrect
let 21JumpStreet;

// correct
let aUniqueName;
// incorrect
let const;

// case sensitive
let learning;
let Learning;
let LEARNING;

It’s also a good idea to always follow the naming conventions, especially when working as part of a team.

1. Variable names should use camelCase. The first letter of the word is lowercase. If there are multiple words, they are written together and each subsequent word is capitalized.
2. Constants can be capitalized, but should use camelCase.
3. Names should not be abbreviated.
4. Names should be singular, not plural.

// correct
let name;
let firstName;

const name;
const lastName;

// incorrect
let Name;
let FirstName;
let first_name;

// correct
let deleteMe;
// incorrect
let delMe;

// correct
let employeeList;
// incorrect
let employees;

It should be noted though that you may be required to follow different conventions by your employer. It doesn’t really matter which convention you follow, the key is consistency.

In this tutorial course we will be following the conventions above, as well as some others that we’ll get to when needed.

Summary: Points to remember

• Variables and constants are temporary data containers, when the application stops (for whatever reason) the data inside is lost.
• Variables can be mutated at runtime, whereas constants cannot.
• Variables use the let keyword at declaration and initialization, and constants use the const keyword.
• Constants cannot be empty, they must be initialized with a value.