DEV Community

loading...
Cover image for What’s the difference between using “let” and “var”?

What’s the difference between using “let” and “var”?

courseprobe profile image Course Probe ・4 min read

Javascript Let vs Var

What’s the difference between let and var?

  • A variable defined using a var statement is known throughout **the function** it is defined in, from the start of the function. ()*

  • A variable defined using a let statement is only known in **the block** it is defined in, from the moment it is defined onward. ()

To understand the difference, consider the following code:

// i IS NOT known here
// j IS NOT known here
// k IS known here, but undefined
// l IS NOT known here

function loop(arr) {
    // i IS known here, but undefined
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here

    for( var i = 0; i < arr.length; i++ ) {
        // i IS known here, and has a value
        // j IS NOT known here
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    };

    // i IS known here, and has a value
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here

    for( let j = 0; j < arr.length; j++ ) {
        // i IS known here, and has a value
        // j IS known here, and has a value
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    };

    // i IS known here, and has a value
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here
}

loop([1,2,3,4]);

for( var k = 0; k < arr.length; k++ ) {
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS NOT known here
};

for( let l = 0; l < arr.length; l++ ) {
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS known here, and has a value
};

loop([1,2,3,4]);

// i IS NOT known here
// j IS NOT known here
// k IS known here, and has a value
// l IS NOT known here
Enter fullscreen mode Exit fullscreen mode

Here, we can see that our variable j is only known in the first for loop, but not before and after. Yet, our variable i is known in the entire function.

Also, consider that block scoped variables are not known before they are declared because they are not hoisted. You’re also not allowed to redeclare the same block scoped variable within the same block. This makes block scoped variables less error prone than globally or functionally scoped variables, which are hoisted and which do not produce any errors in case of multiple declarations.

Is it safe to use let today?

Some people would argue that in the future we’ll ONLY use let statements and that var statements will become obsolete. JavaScript guru **Kyle Simpson** wrote **a very elaborate article on why he believes that won’t be the case**.

Today, however, that is definitely not the case. In fact, we need actually to ask ourselves whether it’s safe to use the let statement. The answer to that question depends on your environment:

  • If you’re writing server-side JavaScript code (**Node.js**), you can safely use the let statement.

  • If you’re writing client-side JavaScript code and use a browser based transpiler (like **Traceur** or **babel-standalone**), you can safely use the let statement, however your code is likely to be anything but optimal with respect to performance.

  • If you’re writing client-side JavaScript code and use a Node based transpiler (like the **traceur shell script** or **Babel**), you can safely use the let statement. And because your browser will only know about the transpiled code, performance drawbacks should be limited.

  • If you’re writing client-side JavaScript code and don’t use a transpiler, you need to consider browser support.

  • There are still some browsers that don’t support let at all :

How to keep track of browser support

For an up-to-date overview of which browsers support the let statement at the time of your reading this answer, see **this Can I Use page**.

Resources which might be interesting:

**Get the Book: **Javascript Snippets book pdf

source: https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var


Other Dev posts:

Discussion (1)

pic
Editor guide
Collapse
ricobrase profile image
Rico Brase

There are still some browsers that don’t support let at all :

Yes, true, but one should have a look at the percentage at the top right on Can I Use?.
let is supported by over 96% of the users and therefore it's fine for the majority of use cases to be used without transpiler in browsers.

If someone hasn't cared to update his browser in the past 3 years (since 2017 let is supported by every major browser, even most of 2016, subtracting Safari beeing late to the party), you should ask yourself, if those are actually part of your target audience and if you need to provide compatibility for them.

It makes development easier by removing (in this case) unnecessary steps in the build process and your application size will usually profit, too.

PLEASE don't make newbies believe, they need to aim at 100% compatibility with every browser version ever released, making somewhat up-to-date software a requirement for your application is a valid (and often preferred) step in software development.