Follow me on Twitter

One of the earliest hurdles to jump over for JavaScript beginners is the concept of a variable. In this blog post accompaniment to my JS in <3 YouTube Series, I'll go into a bit more detail about what variables are and how we use them.

Introduction: "The book is good!"

Imagine the following conversation:

Anna: I'm reading a book at the moment.
Friend: Oh?
Anna: Yeah, the book is called Clean Code and is about ways of making code more readable. I heard about it online and decided to buy it.
Friend: Do you like the book?
Anna: Yeah the book is good but there are some confusing parts.

Now yes, this conversation is a bit clunky, but it's designed to show how we already use structures similar to variables in everyday life. After I mention the name of the book, I don't need to mention it again: instead, I simply say "the book" or "it".

Similarly, JavaScript variables are ways of naming certain values so you don't have to explicitly state them over and over again later.

Variables are labels representing pieces of information

Here is a simple example of using let to assign the value "Hello" to a variable called greeting.

let greeting = "Hello";
console.log(greeting);

EXAMPLE 1 "My Mum": Different variables and constants can hold the same value

There is no restriction on how many variables (or constants) can hold the same piece of information. My mum's name is Virginia, but she isn't only called Virginia. I call her "mum", my daughter calls her "grandma", and I also have a nickname for her which is "marzipan". This common concept can be expressed in JavaScript as such:

var mum = "Virginia";
const grandma = "Virginia"; // This is technically a constant and not a variable! Be careful!
let marzipan = "Virginia";

console.log(greeting, mum); // Logs "Hello Virginia!"
console.log(greeting, grandma); // Logs "Hello Virginia!"
console.log(greeting, marzipan); // Logs "Hello Virginia!"

If we wanted to do a strict comparison of these terms, the program would tell us they are identical. Just as in real life, they are all the same person.

console.log(mum === marzipan) // Logs TRUE

EXAMPLE 2 "The Report": Variables can change (vary) depending on context or results

Another way in which variables can be similar to natural language is the way in which their meaning can change over time.

For example, I might be talking about my previous work for Australian Associated Press, and mention a report that my boss received each day about the news. In the context of this situation, "the report" refers to that summary.

var theReport = "A 10 page summary of the news today";

Later, I read a news article about something and notice a different report. Suddenly, 'the report' has a different meaning for me.

theReport = "A legal case against the Prime Minister of Australia";

Years later, working in project management, I hear about a report a client is working on. This time, "the report" is referring to an environmental impact statement which has to be submitted for minesite approval.

theReport = "An environmental impact statement";

Similarly, JavaScript allows us to redefine and update variables according to context, or depending on the results of different processes. This means we can use variable names like result or count which can change over time. As long as we use let or var to define them and are within the scope of those variable declarations (more on that concept later: don't worry if it doesn't make sense now!) then we can reuse and update them as needed.