0

What is the difference between the following pieces of javascript?

I see the first one often in minified code, but the second one costs fewer bytes, and they seem to do the same thing. Why do minifiers use the first one, not the second?

!function() {
    let myLocalVar = 5;
    console.log('Hello world', myLocalVar);
}();

{
    let myLocalVar = 5;
    console.log('Hello world', myLocalVar);
}
Antoni
  • 356
  • 5
  • 17
  • 6
    The first is an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE), and the second is a [block](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block). Be aware that `var` is not block scoped and will be accessible outside it. Use `let` or `const` if you need block scoping. – evolutionxbox Oct 12 '22 at 14:37
  • I mean the difference in how this is executed with local variables, local scope, etc. or for what reason minifiers use the IIFE instead of a block – Antoni Oct 12 '22 at 14:38
  • That's quite a broad question, since they're two quite different things. – evolutionxbox Oct 12 '22 at 14:39
  • Asynchronous vs synchronous. Synchronous = a function is only read and executed when it is called. Asncronous a function is read and awaits for its call to execute. Easily said: Its like 2 students. One reads the book and can answer a professor's question as soon as he asks it but might read the book while he never get asked about it. The other student starts reading the book as soon as the professor asks and therefore needs time until he can answer the question. – tacoshy Oct 12 '22 at 14:42
  • 2
    @tacoshy did you comment on the right question? (It's a good comment, but it doesn't seem relevant) – evolutionxbox Oct 12 '22 at 14:43
  • 2
    The problem at hand is that `const` and `let` are "fairly new" to JS and before that, there were no block scoped variables. Depending on the ES-version you have to support, your environment may simply not support block scoped variables. – Thomas Oct 12 '22 at 14:43
  • @tacoshy both code snippets run synchronously, your comment would make sense if i had an `async function` there – Antoni Oct 12 '22 at 14:50
  • @tacoshy nothing is async here? – VLAZ Oct 12 '22 at 14:56
  • 1
    You should have changed the second `var` only, not the first, into `let`, to make the point clear. As a side effect, that would also answer your question. – gog Oct 12 '22 at 14:59
  • 1
    The minified code probably uses `var`, not `let`. Before `let` was added to the language, IIFE was the only way to create a variable with limited scope. The minifiers probably haven't been updated to use the modern block syntax. – Barmar Oct 12 '22 at 15:29
  • @Barmar even when updated, it's just less analysis needed to determine whether you *can* use a block. Because if there *is* a `var` inside the block, then the semantics change. They might also change if the block contains a function declaration. Moreover, a block *cannot* be put in expression context, which precludes some transformations that could be applied. While an IIFE is agnostic to context, thus does not need to be handled differently. That's on top of whether there would even be big gains in updating the minifier to properly analyse and transform blocks. – VLAZ Oct 12 '22 at 15:38
  • @gog i just learned that from your comment! – Antoni Oct 13 '22 at 17:06
  • the answers on the linked question (linked by the one who marked this as duplicate) answered my question – Antoni Oct 13 '22 at 17:09

0 Answers0