What's the difference between JavaScript let vs var?

General Discussions
#1

What’s the difference between JavaScript let vs var?

#2

As far as I know, let and var are both used for variable declaration in JavaScript, but they have some key differences.

var: var is function-scoped, meaning it is limited to the function within which it is declared, or globally if declared outside a function. Variables declared with var can be redeclared within the same scope without throwing an error. Variables declared with var are hoisted to the top of their function or global scope, which means they can be used before they are declared in the code.

Example:

function varExample() {
  var x = 10;
  if (true) {
    var x = 20; // This redeclaration is allowed
    console.log(x); // Outputs 20
  }
  console.log(x); // Outputs 20
}
varExample();

let: let is block-scoped, meaning it is limited to the block (within curly braces) in which it is declared. Variables declared with let cannot be redeclared within the same scope, helping to avoid accidental variable reassignment. Variables declared with let are not hoisted to the top of their block, so they cannot be used before they are declared in the code.

Example

function letExample() {
  let x = 10;
  if (true) {
    let x = 20; // This redeclaration is not allowed
    console.log(x); // Outputs 20
  }
  console.log(x); // Outputs 10
}
letExample();

In summary, var is function-scoped and hoisted, allowing for variable redeclaration within the same scope, while let is block-scoped, does not allow variable redeclaration in the same scope, and is not hoisted.

#3

Adding to Yansi, One of the key differences between let and var in JavaScript is their scope and hoisting behavior.

var : Variables declared with var are function-scoped, meaning they are accessible throughout the function in which they are declared, including any nested blocks within the function.

Variables declared with var are hoisted to the top of their function or global scope, which means they can be used before they are declared in the code. var allows for variable redeclaration within the same scope, which can lead to unintended consequences or bugs.

Example:

function varExample() {
  console.log(x); // Outputs undefined (hoisted)
  var x = 10;
  if (true) {
    var x = 20; // This redeclaration is allowed
    console.log(x); // Outputs 20
  }
  console.log(x); // Outputs 20
}
varExample();

let: Variables declared with let are block-scoped, meaning they are only accessible within the block (within curly braces) in which they are declared, including any nested blocks.

Variables declared with let are not hoisted to the top of their block, so they cannot be used before they are declared in the code. let does not allow for variable redeclaration within the same scope, which helps prevent accidental variable reassignment.

Example:

function letExample() {
  console.log(x); // Throws ReferenceError: Cannot access 'x' before initialization
  let x = 10;
  if (true) {
    let x = 20; // This redeclaration is not allowed
    console.log(x); // Outputs 20
  }
  console.log(x); // Outputs 10
}
letExample();

In summary, var is function-scoped and hoisted, allowing for variable redeclaration within the same scope, while let is block-scoped, not hoisted, and does not allow variable redeclaration in the same scope.

#4

When I first started learning JavaScript, I was a bit confused about when to use let versus var. Over time, I’ve come to appreciate the differences and advantages of each. Here’s what I’ve learned:

  1. Scope:
  • var is function-scoped. This means that if you declare a variable with var inside a function, it’s accessible throughout the entire function.
  • let is block-scoped. This means that if you declare a variable with let inside a block (like within {}), it’s only accessible within that block.

Example:

function example() {
  if (true) {
    var x = 10;
    let y = 20;
  }
  console.log(x); // Works: 10
  console.log(y); // Error: y is not defined
}

Hoisting:

  • var declarations are hoisted to the top of their scope and initialized with undefined.
  • let declarations are hoisted to the top of their block but are not initialized. This is known as the “temporal dead zone,” where the variable cannot be accessed until the declaration is encountered.

Example:


console.log(a); // undefined
var a = 5;

console.log(b); // Error: Cannot access 'b' before initialization
let b = 5;

Re-declaration:

  • var allows you to re-declare the same variable within the same scope without any issues.
  • let does not allow re-declaration within the same scope, which helps prevent accidental errors.

Example:

var c = 10;
var c = 20; // No problem

let d = 10;
let d = 20; // Error: Identifier 'd' has already been declared

Personally, I now prefer using let because it reduces the risk of scope-related bugs and makes my code more predictable and easier to maintain. However, understanding both var and let is crucial because you’ll encounter both in existing codebases.

I hope this helps clarify the differences! Happy coding! :blush: