Skip to content
Code with Hou
LinkedInGithubTwitter

Learn Modern JavaScript - JavaScript Variables - var, let, const

— JavaScript, beginner, tutorial, learn-modern-javascript — 2 min read

Introduction

By the end of this tutorial, you will be able to:

  • understand the differences between var, let, and const and how to use them correctly

JavaScript Variables - var, let, const

In JavaScript, variables can be declared with either var, let, or const.

NOTE: let and const were introduced in ES6 and are the preferred variable declaration methods for this course.

Variable Update

var variables can be updated and re-declared within its scope.

Take a look at the code below. What will be logged to the console? Why?

1var color = "red";
2var color = "yellow";
3console.log(color);

"yellow" is logged because var variables can be updated and re-declared within its scope.

While let variables can be updated, they cannot be re-declared.

Take a look at the code below. What will be logged to the console? Why?

1let color = "red";
2let color = "yellow";
3console.log(color); // SyntaxError: Identifier 'color' has already been declared
4

5let greeting = "hello";
6greeting = "hi";
7console.log(greeting); // 'hi' is logged, since `let` variables can be updated

If the variable needs to change (like in a for loop), you should use let.

const variables can neither be updated nor re-declared. In my opinion, you should always use const unless you know the variable is going to change. By using const, you’re telling your future self as well as your code collaborators that the variable shouldn’t change.

Take a look at the code below. What will be logged to the console? Why?

1const color = "red";
2color = "yellow";
3console.log(color); // TypeError: Assignment to constant variable.

Setting a const variable to an object is interesting. Once you've assigned an object to const, you cannot re-assign the const variable to a different object but you can update the methods and properties on the object.

Take a look at the code below. What will be logged to the console? Why?

1const computer = {
2  type: "Macintosh",
3  os: "Catalina",
4};
5

6computer.type = "Microsoft";
7computer.os = "Windows 10";
8

9console.log(computer); // { type: 'Microsoft', os: 'Windos 10' }

Take a look at the code below. What will be logged to the console? Why?

1computer = {
2  type: "Chromebook",
3  os: "Chrome OS",
4};
5

6console.log(computer); // TypeError: Assignment to constant variable.

Variable Scope

Scope describes the part of the program where variables are accessible by the program.

var is globally or function-scoped.

Take a look at the code below. What will be logged to the console? Why?

1var fruit = "apple";
2var fruitEaten = 3;
3

4if (fruitEaten > 2) {
5  var fruit = "orange";
6}
7

8console.log(fruit); // "orange"

Take a look at the code below. What will be logged to the console? Why?

1const printColor = () => {
2  var color = "red";
3};
4console.log(color); // ReferenceError: color is not defined

const and let are blocked-scoped

const and let are blocked-scoped, so a variable declared within a block (e.g., the space in-between of the curly brackets of an if...else statement) can only be accessed within that block.

Take a look at the code below. What will be logged to the console? Why?

1shouldEatFruit = true;
2if (shouldEatFruit) {
3  let fruit = "orange";
4  const anotherFruit = "apple";
5  console.log("fruit inside block: ", fruit); // fruit inside block: orange
6  console.log("anotherFruit inside block: ", anotherFruit); // anotherFruit inside block: apple
7}
8

9console.log("fruit outside block: ", fruit); // ReferenceError: fruit is not defined
10console.log("anotherFruit outside block:", anotherFruit); // ReferenceError: anotherFruit is not defined

Take a look at the code below. What will be logged to the console? Why?

1let number = 1;
2

3if (number === 1) {
4  let number = 2;
5  console.log("inside block: ", number);
6}
7console.log("outside block: ", number);

Variable Hoisting

Hoisting describes the default JavaScript behavior of moving variable declarations to the top of their scope.var, let, and const are all hoisted, albeit a little differently.

During hoisting, var variables are initialized to undefined, so trying to access a variable declared with var before the declaration returns undefined.

Take a look at the code below. What will be logged to the console? Why?

1console.log(animal);
2var animal = "rabbit";

How about this?

1var flower = "rose";
2const printFlower = () => {
3  console.log(flower);
4  var flower = "hibiscus";
5};
6printFlower();

Trying to do the same with let or const will return a ReferenceError, as they are not initialized during hoisting.

Take a look at the code below. What will be logged to the console? Why?

1console.log(flower);
2let flower = "rose"; // ReferenceError: Cannot access 'flower' before initialization

As you can see, let helps the developer avoid undesirable ways of writing code (e.g., trying to access a variable before it's declared in the code) while allowing variables declared with it to be updated. In short, you shouldn’t ever have to use var again.

Want more content like this? Subscribe to get the latest updates in your inbox

Share your Feedback

What did you like or didn't like about this post? Let me know what worked well and what can be improved. Your feedback is much appreciated!