TLDR at bottom.
If you're reading this, you're probably just starting your journey into the exciting(βπ ) world of Javascript OR you're just coming back for a refresher β and that is π!
Understanding the difference between var, let, and const is likely one of the first things you'll encounter as you learn Javascript. But first... hoisting.
Hoisting
When we refer to "hoisting" we are talking about when a variable or function is "brought to the top" of your code. The quotes around "brought to the top" are there for a reason β your code is not actually moved, but simply added to memory so that your code knows about variables and functions before a single line of code is actually executed, so that when your code executes or evaluates a variable or function, it already knows about it/knows you created it. It is the reason we are able to do something like this:
Your Code
sayName("Mike")
function sayName(name){
console.log("My dog's name is" + name)
}
// returns "My dog's name is Mike"
Your Code Interpreted
//function sayName is hoisted("brought to the top") here.. to the top of your code
sayName("Mike") //allowing you to use it here, even though the function itself is below it
function sayName(name){
console.log("My dog's name is" + name)
}
// returns "My dog's name is Mike"
Note: Only variable DECLARATIONS are hoisted. The variable will NOT be initialized/have a value until given one in execution. Check code snippets below:
Your Code
var firstName = "Mike"
console.log(`My name is ${firstName} ${lastName}.`)
var lastName = "Smith"
Your Code Interpreted
//firstName and lastName declarations are hoisted("brought to the top") here
var firstName = "Mike"
console.log(`My name is ${firstName} ${lastName}.`)
// returns "My name is Mike undefined" as lastName was not initialized with "Smith" yet, but
// your code knows it exists / was declared.
**//Note: for let and const declarations, lastName will trigger a ReferenceError and will NOT
//return undefined as it did with var declaration**
var lastName = "Smith"
console.log(`My name is ${firstName} ${lastName}.`)
//returns "My name is Mike Smith" because lastName was finally initialized / given a value
Whether it is a variable or a function, it is always "brought to the top" (hoisted) of the context/scope that it is defined in. For example, in the code snippets above we were just writing them loosey goosey outside of any functions or blocks, so our variables and functions were being hoisted globally, rather than inside of another function or block (note: var is NOT block scoped, it is only globally or functionally scoped) Meaning:
var dogName = "Mike"
function sayName(name){
var owner = "Tony"
console.log("The name of " + owner +"'s dog is " + name)
}
console.log(dogName)
// returns "Mike"
console.log(owner)
// ReferenceError: owner is not defined
// ^ this because owner is only accessible / scoped to inside of our sayName function
sayName(dogName)
// returns "The name of Tony's dog is Mike"
if (dogName === "Mike"){
var dogName = "Lucas"
// remember that var is NOT block scoped, so we are actually reassigning dogName here
}
//SO....
sayName(dogName)
//returns "The name of Tony's dog is Lucas"
PHEW. OK..
π₯ The moment you've all been waiting for
As of ES6, we can now make use of two other declarations for our variables: let and const. They are similar to var, but protect us from a lot of the tricky bits that come with var as we saw above.
TLDR: Differences of VAR, LET, and CONST
VAR
- Global / functional scope (see code snippet above)
-
can be redeclared
var five = "five" var five = "five, but a new five :)" // no errors
-
can be reassigned
var five = "five" five = "five, but a new five :)" console.log(five) // returns "five, but a new five :)" //no errors
LET
-
Block scoped
let dogName = "Mike" if (dogName === "Mike"){ let dogName = "Lucas" // this is NOT THE SAME / NOT overwriting dogName from above! console.log(dogName) // returns "Lucas" // dogName inside of the if-statement is block scoped. } console.log(dogName) //returns "Mike" since we are out of the if-statement and referring to the first dogName
-
can not be redeclared
let five = "five" let five = "five, but a new five :)" //SyntaxError: Identifier 'five' has already been declared
-
can be reassigned
let five = "five" five = "five, but a new five :)" console.log(five) // returns "five, but a new five :)" //no errors
CONST
-
Block scoped
const dogName = "Mike" if (dogName === "Mike"){ const dogName = "Lucas" // this is NOT THE SAME / NOT overwriting dogName from above! console.log(dogName) // returns "Lucas" // dogName inside of the if-statement is block scoped. } console.log(dogName) //returns "Mike" since we are out of the if-statement and referring to the first dogName
-
can not be redeclared
const five = "five" const five = "five, but a new five :)" //SyntaxError: Identifier 'five' has already been declared
-
can not be reassigned
const five = "five" five = "five, but a new five :)" //TypeError: Assignment to constant variable
-
CAN BE MUTATED
const numbers = [1,2,3,4] // π« this doesn't work const numbers = [4,3,2,1] // returns Uncaught SyntaxError: Identifier 'numbe' has already been declared // π« neither does this numbers = numbers = [4,3,2,1] // returns Uncaught TypeError: Assignment to constant variable. // β but this does numbers.push(5) console.log(numbers) // returns [1,2,3,4,5] //Same for Objects const idCard = { firstName: "Tony", lastName: "Smith", } // π« this will not work.. returns TypeError: Assignment to constant variable. idCard = { firstName: "Mike", lastName: "Jordan", } // β this works idCard.firstName = "Tom" idCard.eyeColor = "blue" console.log(idCard) //returns { firstName: 'Tom', lastName: 'Smith', eyeColor: 'blue' }
As always, refer to MDN for more info:
Hoisting: https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
VAR: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
LET: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
CONST: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
Feel free to reach out on any of my socials for questions, feedback (good and bad), or just to connect / say hello π.
Top comments (0)