7

So I thought I understood hoisting in JavaScript until I saw something like this:

function hoist(a) {
    console.log(a);
    var a = 10;
}

hoist(5);

The code above outputs 5, not undefined! As per my understanding, the function looks like this to the interpreter:

function hoist(a) {
    var a;  // This should overshadow the parameter 'a' and 'undefined' should be assigned to it
    console.log(a);  // so this should print undefined
    a = 10;  // now a is assigned 10
}

So what's happening here?

darKnight
  • 5,651
  • 13
  • 47
  • 87
  • 3
    You're ignoring the passed in parameter when doing your interpreter analysis. I have seen exact examples of the code you're posting except that they pass through empty parameters. This is just a regular function call that console logs the parameter. Why would it be undefined when you're passing through a value? – chevybow Aug 16 '19 at 15:01
  • "*[If you re-declare a JavaScript variable, it will not lose its value.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)*" – str Aug 16 '19 at 15:11

6 Answers6

6

You would be right if the var was called b, but the var a already exists. redeclaring a javascript variable that already exists doesn't do anything. It will not change the value to undefined. Try it.

function hoist(a) {
    var a; // no op, does not change a to  undefined.
    console.log(a);
    a = 10;
}

hoist(18);
I wrestled a bear once.
  • 22,983
  • 19
  • 69
  • 116
2

This falls back in the section Only declarations are hoisted in the MDN (to link some documentation, at least).

The second example given there is the exact one you're looking for:

num = 6;
console.log(num); // returns 6
var num; // or, really, var num = whatever.

To just recall what is said:

If you declare the variable after it is used, but initialize it beforehand, it will return the value.

briosheje
  • 7,356
  • 2
  • 32
  • 54
1

Hoisting a variable means that the variable name is known to the compiler from the beginning of the block. It does not re-introduce, overwrite, clear or reset the variable if it already exists.

Until something is assigned, the value of that variable is undefined, but hoisting itself does nothing to the value of the variable.

It so happens that a function parameter is also a way of declaring a variable, like an invisible var statement, followed by an assignment that happens as the function gets called, before any of the actual function body executes.

Peter B
  • 22,460
  • 5
  • 32
  • 69
0

Hoisting is still working as we expect, as we can see that the following snippet also outputs 5:

function hoist(a) {
  var a;
  console.log(a);
  a = 10;
}

hoist(5);

What we really have here is a function parameter, a, being redeclared inside the function where its value has already been initialized to 5.

Zaid Masud
  • 13,225
  • 9
  • 67
  • 88
0

you are correct that hoisting would work this way inside of that function.

In this particular example we pass an argument/parameter to our function and it changes how it will be interpreted. Just take a look:

function hoist(a) { // here's our 'a' parameter gets replaced by '5' that we passed while execution of this function
    var a;  // with no new value it does nothing
    console.log(a);  // so this will print 5 that we passed to this function
    a = 10;  // now a is assigned 10 and next console.log() would show a new value of 'a' variable
}
olejniczag
  • 384
  • 1
  • 10
-1

Hoisting has to do with calling a function before it is declared, as javascript will push the function declarations to the top. The parameter a and the variable a don't related to hoisting in this case.

K.G.
  • 59
  • 5