Variables and constants

We have talked a lot about types and how we can use them logically. Now we will talk about storing this data, so that we can use them later on, and using them again and again.

In JavaScript previous to EcmaScript 6 (also called JavaScript 2015), we had the variable var. var is a JavaScript keyword, so that when you write var, JavaScript knows that this is an variable. There are a lot of other keywords also, which are reserved, meaning that you can't name a variable or function with that keyword.

A variable can store a string, number or boolean. Later we'll explore arrays and objects, which can also be stored in a variable. Store is not quite right though. A variable only references a value.

When declaring a new variable, you start with the keyword var followed by the variable's name and it's value.

var age = 21;

It is possible to declare a variable without using the var keyword if the variable name haven't been declared previously. This is not good practice. To avoid such errors, write "use strict"; at the top of the script.

"use strict";
var age = 22;

The equal symbol says that the variable name on the left side should be equal to the value on the right. Variable names can be any word that isn't a reserved keyword and they can't include spaces. Digits can be part of the variable name, but they can't be the first character. Variable names also can't have a punctuation marks in it, except $ and _.

A variable that references a value is not tied to that value forever. You can reassign a value by typing the variable's name, followed by a new value:

var age = 21
console.log(age)

>> 21

age = 22
console.log(age)

>> 22

With EcmaScript 6, we were introduced to the variable let and the constant const. let works similar to var in that it can be reassigned, but let is scoped differently that var. What does this mean?

Scoping is the code which a variable lives inside. Don't worry if that wasn't clear, I have an example! But first the difference between those two in words. var is scoped to the nearest function block, while let is scoped to the nearest enclosing block. Both variable types are global (visible from wherever in the code) if they are declared outside any block.

Okay, so the example:

function whatever(){
  // bip is not visible here
  for (let bip = 0; i < 10; i++) {
    // bip is only visible in here
    // there is a separate bip variable for each interaction
    // of the loop (you'll learn about loops later)
  }
  // bip is not visible here
}

function whatever2(){
  // bop is visible here
  for (var bop = 0; i < 10; i++) {
    // bop is visible to the whole function
  }
  // bop is visible here
}

If you're writing in "strict mode, i.e. that you've written "use strict"; at the top of the document, var will let you re-declare the same variable within the scope. let will not let you do this.

"use strict";
let animal = "cat";
let animal = "dog";

>> SyntaxError: Identifier one has already been declared

"use strict";
var animal = "cat";
var animal = "dog";

>>                  // no problem

And then we have const, which is a constant. That means that the value can't be changed. How is this useful, you may ask? Let me explain. First, you declare a constant this way:

const bestMovie = "Star Wars";

If you try to reassign the constant's value, you will get an error.

const bestMovie = "Star Wars";
bestMovie = "Star Trek";

>> Uncaught TypeError: Assignment to constant variable

To avoid errors and to get better performance, you should use `const` whenever possible. But sometimes, e.g. in a for loop, you need to use let or var. You can set the constant's value to an array, and still change the content of the array, but not reassign the constant to another value:

const myList = [];
myList

>> []

myList.push("First element");
myList

>> ["First element"]

You might have noticed that my one-word variables are in all lower case, and that the ones with more than one word have the first word written with lower case and that the following words start with an upper case letter. This is called camel casing, and is the naming convention in JavaScript, e.g. "myAge".

There are no rules for naming, other than the ones mentioned earlier, but it makes naming easier if everyone follows the same convention. Remember to give your variables and constants a meaningful name, so that it's easy to understand what their value mean.

To summarise, we have two variables and one constant: var, let and const. var is function scoped, let and const are block scoped. const can't be reassigned, var and let can.

Safari versions below version 9 does not support JavaScript ES6 fully, thus letand constwould not work. You can see the compatibility table for ES6 here.