JS Fundamentals: var, let, and const

Var, let and const are different type of variable declarations. In this article, I'll be doing a quick rundown of the differences between var, let, and const.

I would say this is more for readers who are just getting started with Javascript or are maybe new to ES6 and its features.

Things to note, before continuing:

• SCOPE: where the variables are available for use.
• HOISTING: a JS mechanism where variables and function declarations are moved to the top of their scope before execution. (this is more for variables declared with var)

VAR

Before ES6, var was the only type of declaration used.
It's best practice to only use var when ABSOLUTELY NECESSARY. Most programmers think var is too editable and presents issues like accidentally overriding code you were trying to keep or introducing security issues due to the global access that var has.

• SCOPE: global/function-based
• HOISTING: hoisted to the top of its scope, initialized with undefined
• var can be updated
• var can be redeclared

Scope Example:

var howdy; // howdy = undefined
console.log(howdy); // this would print out undefined
howdy = "hi there" // howdy value is updated to "hi there"
console.log(howdy); // this would print out "hi there"

Since howdy is called first without being assigned, howdy gets stored with an undefined variable in the first line. In the second line, our console.log will return undefined. After we assign a value on line 3, our console log will update the howdy variable and assign it to "hi there". So on line 4, our console log will be "hi there".

LET

Let is preferred for variable declaration.

• SCOPE: block (let would only be available within that block)
• HOISTING: Hoisted to the top, NOT initialized, which means you'll get a Reference Error if you try to call the variable before it's been declared.
• Let can be updated.
• Let can not be re-declared.

What is a block?
A block of code closed in with curly braces {}. Anything inside the curly braces is part of that block.

function blockScope(){
  let car = honda
  console.log(car); // "honda"
}
console.log(car) // car is undefined

Since the car variable was declared inside of our block, it has block scope. We do not have access to it outside of the block. So when we console.log on the last line, we will get an error, undefined.

Let CAN NOT be re-declared

// we can re-assign egg's value
let egg = "over-easy"
egg = "sunny-side up"

//we CAN'T re-declare egg after that first time
let egg = "sunny-side up"
let egg = "hard-boiled" //error: egg has already been declared

CONST

Variables declared with const will keep a consistent value, meaning if you assign a string to your egg value, you won't want to change the value to an integer later. The value type stays constant.

• SCOPE: block
• HOISTING: Hoisted to the top, but NOT initialized. (like our let variable)
• const can not be updated
• const can not be redeclared
• while var and let can be declared without a value, const MUST be initialized with a value.

Hope this was helpful. Any questions or additions? Please leave a comment. Also, thanks for reading :)

Photo by Aleksandar Pasaric from Pexels