srishcodes
JS Things: var, let, const | SrishCodes

JS Things: var, let, const | SrishCodes

Srish Codes's photo
Srish Codes
·

3 min read

Hi everyone, welcome back to SrishCodes where I teach you interesting tech concepts that you should know about as a current or aspiring software developer. Today I will be sharing with you about var, let and const using the concepts of scope, hoisting and updating and redeclaration.

Hoisting

Before we continue, let's first introduce the concept of hoisting. Hoisting is a JS mechanism where variables and function declarations are moved to the top of their scope before code execution.

var

Scope

var declarations are scoped to the nearest function block.

var global = "globally scoped";

function fooBar() {
    var local = "locally scoped";
}

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

Hoisting

var declarations are hoisted to the top and initialized as undefined.

// writing this code
console.log(global);
var global = "globally scoped";

// is interpreted as
var global;
console.log(global); // undefined
global = "globally scoped";

Updating and Redeclaration

Both updating and redeclaration of var is allowed. This can also be a problem if you are unaware that you previously declared the another var with the same variable name.

// updating
var global = "globally scoped";
global = "updated";

// redeclaration
var global = "globally scoped";
var global = "redecalared";

let

Scope

let is block scoped i.e. any code bounded by {}.

let global = "global";
let times = 4;

if (times > 3) {
    let block = "block scoped";
    console.log(block); // block scoped
}
console.log(block) // error: Uncaught ReferenceError: block is not defined

Hoisting

Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

// writing this code
console.log(global);
let global = "globally scoped";

// is interpreted as
let global;
console.log(global); // Reference Error
global = "globally scoped";

Updating and Redeclaration

It can be updated but not re-declared. This makes let a better choice as you can use the name for a variable again as long as the previous variable is in another scope.

// updating
let global = "globally scoped";
global = "updated";

// redeclaration
let global = "globally scoped";
let global = "redecalared"; // error: Identifier 'global' has already been declared

const

Scope

Like let, const can only accessed within the block it was declared.

const global = "global";
let times = 4;

if (times > 3) {
    const block = "block";
    console.log(block); // "block"
}
console.log(block) // block is not defined

Hoisting

Just like let, const declarations are hoisted to the top but are not initialized.

// writing this code
console.log(global);
const global = "globally scoped";

// is interpreted as
const global;
console.log(global); // Reference Error
global = "globally scoped";

Updating and Redeclaration

It cannot be updated or redeclared.

// updating
const global = "globally scoped";
global = "updated"; // error : Assignment to constant variable. 

// redeclaration
const global = "globally scoped";
const global = "redecalared"; // error: Identifier 'global' has already been declared

However, properties of objects declared with const can be updated.

const greeting = {
    message : "hi",
    times : 2
}

// updating properties of const objects is allowed
greeting.message = "hello";

// this is not allowed
const greeting = {
    words : "Hello",
    number : "five"
} //error :  Assignment to constant variable.

And that was all for this now! If you are still reading, make sure to follow me for more as I have some exciting stuff coming up. Until next time!

JavaScript