What is a Variable in JavaScript?

What is a Variable in JavaScript, and what does it do?

In JavaScript, and in programming languages in general, a variable is a container that you use to store references to values so you can do things with them when you need to. These values could be pretty much anything, from strings (text) to numbers, to functions, even other variables.

A few examples:

• String value: let name = 'James'
• Number value: let amount = 100
• Function value: let myFunction = function() {}
• Variable value: let fullName = firstName + lastName

Imagine that you want to store a reference to a list of people that you want to access and do things with later:

// Assign list (array) of people to the peopleList variable
let peopleList = ['Arnold', 'Linda', 'Sylvester', 'Dolph']

// Log out the list
console.log(peopleList)

Now, instead of typing the entire list every time you need to use it, you can access and manipulate the list by simply referencing the peopleList variable, that points to the list (array) of people.

The code above consists of 3 main elements:

• a reference variable named peopleList
• an assignment Operator: =
• an array/list of string values: ['Arnold', 'Linda', 'Sylvester', 'Dolph']

You can look at the assignment operator (=) as the glue that connects the variable name reference on the left to the value on the right (numbers, strings, functions, variables, etc.).

So what can you do with a list of people?

Many things. One of the most common things to do in programming is CRUD operations, so let’s use that to learn:

• Create
• Read
• Update
• Delete

We did the Create part when we created the people list.

Read just means get. Let’s say we want to get the peopleList above. We already tried that with console.log() but we can also show the list in an alert popup box:

// Get list of people in a popup box
alert(peopleList)

Or let’s say we only want to read/get the value of the first person in the people list:

// Get first person from people list
console.log(peopleList[0])

// logs out Arnold

Note: In JavaScript, arrays (lists) are zero-based, which means that JavaScript counts from zero. 0 is 1, 1 is 2, etc.

That’s why [0] logs out Arnold who is first in the array.

Update means to change the existing value(s). Let’s try swapping out Sylvester with Keanu and then log out the result:

let peopleList = ['Arnold', 'Linda', 'Sylvester', 'Dolph']

peopleList[2] = 'Keanu'

console.log(peopleList)

// result: ["Arnold", "Linda", "Keanu", "Dolph"]

Delete means exactly what you imagine (remove stuff). Let’s try removing Arnold from the people list (we’ll reuse the code from above):

let peopleList = ['Arnold', 'Linda', 'Sylvester', 'Dolph']

peopleList[2] = 'Keanu'

// Remove first item from array (Arnold)
peopleList.shift()

// result: ["Linda", "Keanu", "Dolph"

If you want to remove the last array item, swap shift() out with pop().

Moving forward

This is obviously just scraping the surface of JavaScript variables, but it should give you a good idea about what we use them for, and how flexible they are.