Blog, COLDSURF

🌊

πŸ’»

🎧

πŸŽ₯

πŸ“–

πŸ“·

πŸ§‘πŸ»β€πŸ’»

Difference Between const, let, and var

Article Referenced Before Starting:
Link to the original article

Var

  • Scope: The scope of a var variable is either global or function-scoped.
  • When a var variable is declared outside a function, its scope is global. Any variable declared using var outside a function is accessible across the entire window.
  • When a var variable is declared inside a function, its scope is function-scoped, meaning it can only be accessed within that function.
Example Code:
var tester = "hey hi";

function newFunction() {
	var hello = "hello";
}

console.log(hello); // error: hello is not defined

var variables can be re-declared and updated.

Within the same scope, you can modify a var variable as shown below, and no error will occur.
var greeter = "hey hi";
var greeter = "say Hello instead";

var greeter = "hey hi";
greeter = "say Hello instead";

Hoisting in var

  • Hoisting: A JavaScript mechanism where variable and function declarations are moved to the top of their scope.
console.log(greeter);
var greeter = "say Hello";
This would be interpreted by JavaScript as:
var greeter;
console.log(greeter); // greeter is undefined
greeter = "say Hello";
var variables are hoisted to the top of the scope and initialized as undefined.

Issues with var

var greeter = "hey hi";
var times = 4;

if (times > 3) {
	var greeter = "say Hello instead";
}

console.log(greeter); // "say Hello instead"
Even though greeter is declared at the top, inside the if block it is redeclared and reassigned.

Let

let was introduced as an improvement over var and is now the preferred method for variable declarations.
Let’s explore why let solves some of the issues we encountered with var.

Block-scoped let

A block is a chunk of code bound by {}, and everything inside the braces is block-scoped.
A variable declared with let can only be accessed within its block.
let greeting = "say Hi";
let times = 4;

if (times > 3) {
	let hello = "say Hello instead";
	console.log(hello); // "say Hello instead"
}
console.log(hello) // hello is not defined

let can be updated, but it cannot be re-declared.

let greeting = "say Hi";
greeting = "say Hello instead"; // This is allowed

let greeting = "say Hi";
let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared
Re-declaring a variable with let in the same scope is not allowed.
However, defining the same variable in a different scope will not result in an error.
let greeting = "say Hi";
if (true) {
	let greeting = "say Hello instead";
	console.log(greeting); // "say Hello instead"
}
console.log(greeting); // "say Hi"

Hoisting in let

Similar to var, let declarations are hoisted to the top of their scope. However, unlike var, let is not initialized. If you try to use a let variable before its declaration, a ReferenceError will occur.

Const

A const variable maintains a constant value.
const declarations share some similarities with let declarations.

Block-scoped const

Just like let, a const variable is only accessible within the block where it was declared.

const cannot be updated or re-declared.

const greeting = "say Hi";
greeting = "say Hello instead"; // error: Assignment to constant variable.

const greeting = "say Hi";
const greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

Hoisting in const

Similar to let, const declarations are hoisted to the top of their scope, but they are not initialized.

Summary

  • var has a global or function scope, while let and const are block-scoped.
  • var allows updates and re-declarations within the same scope, while let allows updates but not re-declarations, and const allows neither updates nor re-declarations.
  • All three are hoisted to the top of their scopes, but only var is initialized with undefined. let and const are not initialized, and referencing them before declaration will throw a ReferenceError.
  • var and let can be declared without initialization, but const must be initialized at the time of declaration.
← Go home