With the introduction of ES6 we were given the ability to declare variables in a couple of different ways. Vanilla JavaScript uses var for all its declarations, but now we also have let and const. Do you know what the difference between them and how they are scoped?
Scope
Before digging deeper into the different types of declaring variables let’s take a quick look at the meaning of scope. Scope just means the location where variables are available.
var global = "I am in the global scope";
A variable not inside a function is said to be of global scope.
function funkyFunction(){
var local = "I am in a local scope"
}
A variable inside a function has a local scope.
if(true){
let block ="I am in a block scope"
}
There is also a block scope and this is only for variables declare with const and let. These variables need to be in curly braces.
Now That we know which scope we are in what does this mean?
var global = "I can be accessed anywhere";
Variables in the global scope can be accessed by any function. Meaning if it is in the global scope everyone has access to the variable.
var global = "I can be accessed anywhere";
function funkyFunction(){
var local = "I can only be access within this function"
console.log(global) // I can be access anywhere
}
funkyFunction();
console.log(local) // ReferenceError: local is not defined
The global scope does not have access to variables inside local scopes like functions.
function outter(){
var outterVar = "I can be access by the Inner Function"
console.log(innerVar); // ReferenceError: innerVar is not defined
function Inner(){
var innerVar = "I can NOT be access by the outter Function"
console.log(outterVar); //I can be access by the Inner Function
}
Inner();
}
outter();
The inner function does have access to its outer function local scope but the outer function does not have access to the variables inside the inner function. This is referred to as a lexical scope.
if(true){
let block = "I can only be access within the curly brackets"
const block2 = "I am also stuck inside the curly brackets"
var noBlockScope = " I can be access out outside of the curly brackets"
}
console.log(block); // ReferenceError: block is not defined
console.log(block2); // ReferenceError: block2 is not defined
console.log(noBlockScope) //" I can be access outside of the curly brackets"
Variables declared within a block ({}) are only available within the block. This only applies to let and const. Var does not have block scope and can be accessed.
Now that scoping has been discussed let’s see what other differences let, var, and const have
var myName = "Juan Restrepo"
var willChangeName = true;
if(willChangeName === true){
var myName = "Paco"
}
console.log(myName) // Paco
The main issue with var is that it can be redeclared and its value changes. This might not be an issue if you are aware of it but it can become a problem if you do not realize the myName variable has already been defined. If you have myName in other parts of your code you might get the incorrect output. This is the main reason let and const were introduce.
let myName = "Juan Restrepo";
let myName = "Paco" // error: Identifier 'myName' has already been declared
A let variable can not be re-declared.
let myName = "Juan Restrepo";
myName = 10
myName = { myRealName: "Juan Martin Restrepo"}
myName = [ "Juan Restrepo"]
console.log(myName) //["Juan Restrepo"]
let allow us to change the value contained in the variable. This is a different story with const.
const myName = "Juan Restrepo";
myName = "Paco"//Uncaught TypeError: Assignment to constant variable.
myName = 10; //Uncaught TypeError: Assignment to constant variable.
const follows the same idea as lets. It can not be re-declared and variable value can not be changed. If we change the value hold by the myName we will get an error. Variables declared with const that are objects ( array are also included) can be modified.
const listOfNames = ["juan", "paco"]
listOfNames.push("pepe")
console.log(listOfNames) //["juan", "paco", "pepe"]
listOfNames = []; // Uncaught TypeError: Assignment to constant variable.
If we look at arrays we can push Pepe into an existing array declare with a const but we can not assign anything new to it (not even an array).
const juan = {
name: "Juan Martin Restrepo",
age: 'old enought'
}
juan.age = 30; // updates the object without any errors
juan = {} // Uncaught TypeError: Assignment to constant variable.
The same idea can be used on objects. I can change and even add properties, methods to an existing object declared with const. I can not assign a new value ( in this case a new object).
Hope that helps understand the difference between const, let, and var. I will leave a small challenge for anyone who wants to attempt it. It should help you solidify what you read.
var global = " I am a global variable ";
function outter(){
var outterVar = " I live in the local scope of outter function "
function inner(){
var innerVar = " I live in the local scope of inner function "
//console.log(outterVar, innerVar, innerInnerVar); // 1: will this cause an error
innerInner();
function innerInner(){
var innerInnerVar = " I live in the local scope of innerInner function "
//console.log(outterVar, innerVar, innerInnerVar); // 2: will this cause an error
// 3. will the global variable be avaliable here?
if(global === " I am a global variable "){
let block1 = " Hi, I am block Scope "
const block2 = " Hi, Im also block Scope "
var freedom = " I am not block scope "
}
//console.log(block1, block2) //4. will this error out ?
// console.log(freedom)//5. will this error out?
}
}
inner();
}
outter();
The challenge has 5 questions. Try to answer them without running the code. Once you are sure or if you can figure it out just run the code. You will either get an error in the console or get a string. I can explain the answers if someone needs additional help. Just leave a comment with the questions and I will reply back.
Top comments (0)