JavaScript - Let, Var & Const

Hey folks, hope you all are doing well! In today's article, we're gonna discuss JavaScript let, var & const.

VAR

Before ES6, var declarations ruled. There are issues associated with variables declared with var. That is why it was necessary to introduce new ways to declare variables. First, let's get to understand var.

Scope of var

• var declarations are globally scoped or function scoped.

• The scope is global when a var variable is declared outside a function. This means that it can be accessed anywhere in the script.

var x = 'Outside of a function'  // x is declared globally

const myFunction = () => var x = 'Inside a function'  //  x is declared locally

• var is function scoped when it is declared inside a function. This means that it is available and can be accessed only inside that function.

const myFunction = () => {
    var x = 27
    console.log(x)  //  27
}

console.log(x)  //  ReferenceError: x is not defined

Re-declaration & Re-assign

• var variables can be re-declared and re-assign.

var name = 'Bobby'
var name = 'Deadpool'

Hoisting

• Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

• var declarations are hoisted to the top of their scope and initialized with a value of undefined.

console.log(name)  //  undefined
var name = 'Bobby Sadhwani'

LET

let keyword was introduced in ES6. let is now preferred for variable declaration.

Scope of let

• let declarations are block scoped.

• Anything within curly braces is a block.

• So a variable declared in a block with let is accessible inside that block only.

{
  let name = 'Bobby Sadhwani'
  console.log(name)  //  Bobby Sadhwani
}

console.log(name)  //  ReferenceError: name is not defined

Re-declaration & Re-assign

• let variables cannot be re-declared but can be re-assign.

let name = 'Bobby'
let name  //  //  SyntaxError: Identifier 'name' has already been declared

name = 'Deadpool'
console.log(name)  //  Deadpool

Hoisting

• let declarations are hoisted to the top of their scope, but they are not initialized with any value. So if you try to use a let variable before the declaration, you'll get a Reference Error.

console.log(name)  //  ReferenceError: name is not defined
let name = 'Bobby Sadhwani'

CONST

const keyword was introduced in ES6. Variables declared with the const maintain constant values.

Scope of const

• const declarations are block scoped.

• Anything within curly braces is a block.

• So a variable declared in a block with const is accessible inside that block only.

{
  const name = 'Bobby Sadhwani'
  console.log(name)  //  Bobby Sadhwani
}

console.log(name)  //  ReferenceError: name is not defined

Re-declaration & Re-assign

• const variables can neither be updated nor re-declared.

• const must be initialized during declaration.

const name = 'Bobby'
const name  //   SyntaxError: Missing initializer in const declaration

name = 'Deadpool'
console.log(name)  //  TypeError: Assignment to constant variable.

Hoisting

• const declarations are hoisted to the top of their scope, but they are not initialized with any value. So if you try to use a const variable before the declaration, you'll get a Reference Error.

console.log(name)  //  ReferenceError: name is not defined
const name = 'Bobby Sadhwani'

Final Words

And that’s it for this blog.

I hope you’ve found this blog a good referencing resource and thank you for reading.

If this blog was helpful, please do like, comment and share. Thanks, see you in the next article.✌️