Five things to know about var, let, and const in JavaScript

5 must know about var, let and const in JSIn this shot, we will go over some basic notions about var, let, and const, the keywords you use almost every day when coding software in JavaScript.

Let’s get started.

1. They are all used to create bindingsalso known as variables

Do you remember what we use to help us catch and hold values? We use these three words for that purpose, but they don’t all mean the same thing.

  • var: Short for “variable.” This is the old-fashioned way we used in pre-2015 JavaScript.
  • const: Short for “constant.” This is the modern way to create bindings.
  • let: This is another modern way.
var name = "Sarah";
const greeting = "Hello";
console.log(greeting + " " + name);
// Hello Sarah
let age = 1;
console.log("You're " + age);
// You're 1

2. Only var has global scope

As a reminder, the visibility and lifetime of a given variable is determined by its scope. As such, a variable is not visible/accessible outside the scope in which it is declared.

A variable has global scope if it is declared outside a function, block… scope. It can be accessed from anywhere in your program.

userScore = 4;
var userScore;

3. They are all function-scope

Function-scope means that you cannot access them outside the function.

Let’s try to access var out of the doSomething() function.

function doSomething() {
var someVar = "Something";
}
console.log(someVar)

When you run this code, you’ll get a ReferenceError saying that x is not defined.

You’ll get the same thing if you try to replace var with let or const.

4. Only const and let are block-scope

The block scope is defined with curly braces ({}).

function listFruits () {
if(true) {
const fruit1 = "orange"; //it exists in block scope
let fruit2 = "avocado"; //it exists in block scope
var fruit3 = "banana"; // it exists in function scope
}
//console.log(fruit1);
//console.log(fruit2);
console.log(fruit3);
}
listFruits();

As you can see in the code above, only fruit3 is accessed, because var does not have block scope. Try uncommenting lines 8 and 9, and you will get a ReferenceError.

5. let and var can be reassigned, but const cannot

const is still unique as long as the program lives. var and let can be reassigned as much as needed.

var name = "Sarah";
const greeting = "Hello ";
console.log(greeting + name);
// if we try to set the greeting again, we get an error
//greeting = "Hi";
name = "Patience";
console.log(greeting + name)
let age = 1;
console.log("You're " + age);
age = 5; // we reset the age but no error
console.log("You're " + age);

Try uncommenting line 7. You will get a SyntaxError because the const greeting is read-only once it is declared.

Conclusion

There are three different ways to declare a variable in JavaScript. You can use var, let, or const. They don’t all necessarily mean the same thing. While they are all function scope variables, var is a global scope variable and let and const are block scope ones. It is possible to reassign let and var, but not const.

As a rule of thumb, always use const to declare your variables unless they are likely to change in the runtime of your program, in which case you can use let. You should avoid the var keyword as much as possible for variable declaration.

Attributions:
  1. undefined by undefined