7

Say I have a piece of code like this:

const number = 3;

function fooFunction() {
  let numberTwo = 5;
  var answer = number + numberTwo;
  return answer;
}

finalAnswer = fooFunction();

console.log(finalAnswer);

Assuming an ES2015 compatible browser, what would be the advantages/disadvantages of using the above code, over:

const number = 3;

function fooFunction() {
  var numberTwo = 5;
  var answer = number + numberTwo;
  return answer;
}

finalAnswer = fooFunction();

console.log(finalAnswer);

Are there any advantages or disadvantages, given they both return the same number?

Peter David Carter
  • 2,548
  • 8
  • 25
  • 44
  • As per [this answer](http://stackoverflow.com/a/11444416/668501) they are identical within a function like yours – Soren May 20 '16 at 17:47
  • What about from a security and performance point of view? – Peter David Carter May 20 '16 at 17:47
  • Per your usage above, there is no difference. – mferly May 20 '16 at 17:48
  • If there were a difference in security or performance they would not be identical – Soren May 20 '16 at 17:49
  • "*What about from a security and performance point of view?*" The difference between `let` and `var` is scope. Not performance. – mferly May 20 '16 at 17:49
  • it's just scoping (var is function scope, let is block scope). The compiler will take care of hoisting and optimization. – Joe Hanink May 20 '16 at 17:49
  • Indeed. Yet it seems to me as though the `let` function would be more secure, as the data would not be accessible outside the function. Is this correct or incorrect? If not, why doesn't it make a difference? Also, doesn't hoisting carry a performance hit? I would have thought it would. – Peter David Carter May 20 '16 at 17:50
  • `var` is function scope and not visible outside the function. `let`, being block scope means it isn't necessarily visible throughout the entire function, but they're both local to your function... – Joe Hanink May 20 '16 at 17:50
  • In your example, `var answer` is not available outside of the `fooFunction()` block. – mferly May 20 '16 at 17:51
  • Yet `var` variables are hoisted outside the function scope and available to the interpreter at a global level, while `let` is not. Is that not correct? – Peter David Carter May 20 '16 at 17:52
  • 1
    no, `var` is hoisted to the top of the function, not outside the function :) – Joe Hanink May 20 '16 at 17:53
  • But surely if a `let` defined variable remains uninitialised outside the function in which it is called, which seems to be the case, this is more secure than `var`, since the *data* is not accessible to anything but the function itself? – Peter David Carter May 21 '16 at 11:52

2 Answers2

5

As others have mentioned, in your example you can use let and var interchangeably. The difference is that let is block-scoped and var is not.

For example with var you can do this (prints 'foo'):

function printFoo(param) {
  if (param) {
    var x = "foo";
  }

  console.log(x);
}

printFoo("hello");

You cannot do this with let because let x is scoped to the if block and therefore is not defined.

Jared
  • 2,736
  • 1
  • 18
  • 23
1

Within the code sample you've provided, the two are interchangeable. Where let comes in handy is in limiting the scope to block-level as opposed to function-level. Using let inside of a for loop, for example.

It's worth noting that variables created with the var keyword are hoisted, whereas variables created with the let keyword are not.

There is an excellent breakdown of this topic by Kyle Simpson on David Walsh's blog: https://davidwalsh.name/for-and-against-let#implicit-hazards

SimianAngel
  • 631
  • 10
  • 14
  • 7
    technically, `let` variables are hoisted, but not referenceable. see temporal dead zone. `In ECMAScript 2015, let will hoist the variable to the top of the block. However, referencing the variable in the block before the variable declaration results in a ReferenceError. The variable is in a "temporal dead zone" from the start of the block until the declaration is processed.` – Joe Hanink May 20 '16 at 17:56
  • 1
    (see [Are variables declared with let or const not hoisted in ES6?](http://stackoverflow.com/q/31219420/1048572) for more detailed discussion) – Bergi May 20 '16 at 21:51