DEV Community

caelinsutch
caelinsutch

Posted on

2 1

Let vs. Var in JavaScript

In JavaScript, let and var are often used interchangebly. However, there are some differences in how these variables are scoped.

  1. let variables are only visible in their nearest enclosing block ({ ... }), not before or after that block.
  2. let variables are only usable after declaration in code.
  3. let variables may not be redeclared by a subsequent var or let. They can only be declared once.
  4. Global let variables are not added to the global window object.

The restrictions imposed by let reduce the visibility of the variables and can help in debugging by reducing scope.This not only makes it faster and easier to keep track of variables, but also reduced the amount of memory variables take up.

let variables generally tend to cause less problems in large programs or when using a variety of frameworks.

var may still be useful if you are sure you want the single-binding effect when using a closure in a loop (#5) or for declaring externally-visible global variables in your code (#4).

Examples

1. let is only block scoped. Enclose it in brackets, and you can't access it outside of that block.

{
    let a = 1;
}
console.log(`a is ${a}`);  // ReferenceError during parsing: "x is not defined".

If we use var instead, it will work.

2. let can only be used after declaration
This block of code will throw a ReferenceError before the code can be run because x is used before it is declared:

{
    x = x + 1;  // ReferenceError during parsing: "x is not defined" because x is defined only below.
    let x;
}

var can be used before formal declaration, so the code above would work.

3. Variables declared with let can only be declared once

let x = 1;
let x = 2;  // SyntaxError: Identifier 'x' has already been declared

4. Global variables with let aren't attached to the window

var button = "Bad naming causes error";
let link = "This name sucks too, but at least I'm only local";
console.log(link);  // OK
console.log(window.link);  // undefined, good, because it keeps declaration local
console.log(window.button);  // OK

5. Easy use with loop closure

It's easier to use let when working with variables that are used in loops that have repeating behavior.

for (let i = 0; i < 5; i++) {
    console.log(`i is ${i}`), 125/*ms*/);
}

Specifically, this outputs:

i is 0
i is 1
i is 2
i is 3
i is 4

If we delay the closure of the for loop by setting a timeout, we'll see that the behavior above doesn't change.

for (let i = 0; i < 5; i++) {
    setTimeout(_ => console.log(`i is ${i}`), 125/*ms*/);
}

However, if we use var instead of let, we'll start having some problems:

for (var i = 0; i < 5; i++) {
    setTimeout(_ => console.log(`i is ${i}`), 125/*ms*/);
}

... the loop unexpectedly outputs "i is 5" five times:

i is 5
i is 5
i is 5
i is 5
i is 5

The problem here is that var allows the same variable to be overwritten, meaning that in the 125ms of time it takes for the setTimeOut to finish, the loop has already completed and set x to 5.

Conclusion

In general, it's probably a better idea to use let to help you reduce bugs and errors in your code.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay