— JavaScript, beginner, tutorial, learn-modern-javascript — 2 min read
By the end of this tutorial, you will be able to:
var
, let
, and const
and how to use them correctlyvar
, 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.
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 declared4
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.
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-scopedconst
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: orange6 console.log("anotherFruit inside block: ", anotherFruit); // anotherFruit inside block: apple7}8
9console.log("fruit outside block: ", fruit); // ReferenceError: fruit is not defined10console.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);
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.
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!