Hoisting: Function & Variables Declaration act as a priority stack

[eulier1]

Yes, I promise I've read the Contributions Guidelines (please feel free to remove this line).

---

"I already searched for this issue":

Edition: (2nd)

Book Title: Scope and Closures

Chapter: 5

Section Title: Hoisting : Yet Another Metaphor

Question:

Given the following code

greeting();

function greeting() {
    console.log(`Hello there!`);
}

var greeting;

What would be the value of greeting?.

It turns out my intuition was not right. Which is greeting undefined. But When I evaluate at the Dev Tools it, runs the function.

The observable behavior is like the JS Compiler holds identifier names references like a stack for functions and variables definitions, that match the order you describe in the Hoisting: Yet Another Metaphor, last secction. Function definitions are hoisted first and have more priority than variable definitions.

[getify]

Not sure that "priority stack" is the right mental model.

Think of declaration in terms of idempotence... meaning no matter how many declarations (var or function, not let / const) there are for the same identifier within a scope, they all just declare a single variable. Doesn't really matter the order.

But separately, declaration requires a value to be initialized before execution starts. If you've only used var, it'll be initialized to undefined at the top of the scope. But if any of the declarations used function, it'll be the function value (last one wins if multiple functions) initialized at the top of the scope.

Don't think of var x as being var x = undefined -- these are not equivalent. Moreover, even if there is an explicit = undefined, it's not hoisted. Any = assignments that are explicitly in the code, survive until runtime and are executed inline on their respective lines of code, not hoisted at compile time.

[eulier1]

My confusion was, what's is the initialize value of hoisting declaration identifier, when they have the same name using function and var declaration in the same scope like the example above :

typeof greeting();

function greeting() {
    console.log(`Hello there!`);
}

var greeting;

So Js (Devtools JS enviroment, so certain conditions may apply), will prefer to initialize this identifier (function/var declaration) with the same name to the last hoistable function declaration (function, generator or async function) as a value when hoisting.

• var only

• var & function declaration last (with the same name)

• var & async function declaration last (with the same name)

• var & generator declaration last (with the same name)

[getify]

I wouldn't trust anything you're seeing with respect to such behaviors by testing in the JS console. It's notoriously not a real JS environment (like a plain JS context) but a synthetic environment designed to be more ergonomic for individual command testing (the main use-case of console usage).

Similarly, node scripts have certain quirks and pollution that also can throw off such things.

The only truly fool-proof way to do this is to put your code in a .html file inside a <script> block (or in a separate .js file loaded by <script src>).

---

In any case, I think you will see, as I said before:

1. any function declaration trumps any var declaration, in terms of the separate behavior of auto-initialization of value.
2. the last function declaration of any type "wins"

I understand it's tempting to think of this as a priority stack, but it's not really that. There's no need to keep around stuff in a stack, as only one final value/behavior is going to kick in, deterministically, depending on what you've coded.

---

So it's actually more like this (pseudo):

var declarations = {};

function handleDeclaration(type,name,value) {
   if (declarations[name] == null) declarations[name] = {};
   var declaration = declarations[name];

   if (declaration.type == null || declaration.type == "var") {
      if (type == "function") {
         declaration.type = "function";
         declaration.value = value;
      }
      else {
          declaration.type = "var";
          declaration.value = undefined;
      }
   }
   else if (declaration.type == "function") {
      declaration.value = value;
   }
}

handleDeclaration("var","foo",2);   // "var" / "foo" / undefined
handleDeclaration("var","foo");   // "var" / "foo" / undefined
handleDeclaration("var","foo",true);   // "var" / "foo" / undefined

handleDeclaration("var","foo");   //  "var" / "foo" / undefined
handleDeclaration("function",function(x) { /* .. */ });   // "function" / "foo" / function(x)...

handleDeclaration("function",function(x) { /* .. */ });   // "function" / "foo" / function(x)...
handleDeclaration("var","foo");   // "function" / "foo" / function(x)...

handleDeclaration("var","foo");   // "var" / "foo" / undefined
handleDeclaration("function",function(x) { /* .. */ });  // "function" / "foo" / function(x)...
handleDeclaration("var","foo");   // "function" / "foo" / function(x)...
handleDeclaration("function",function(y) { /* .. */ });   // "function" / "foo" / function(y)...
handleDeclaration("function",function(z) { /* .. */ });   // "function" / "foo" / function(z)...
handleDeclaration("var","foo");   // "function" / "foo" / function(z)...

[eulier1]

Thank you for your patience and fast response.
I would like to use this Issue for a Closure, hope you don't mind.

In the code from chapter 7, scope and closures.

    ajax(
        https://some.api/student/${ studentID },
        function onRecord(record) {
            console.log(
                ${ record.name } (${ studentID })
            );
        }
    );
}```

The parsing phase can be described as identifying bindings and scope.

1. lookupStudentRecord identifier registered
2. Parser enters lookupStudentRecord's scope
3. Parser encounters the ajax() call
4. Parser sees function onRecord(record) {...}
4.1  onRecord identifier is created
4.2  A new scope is created for onRecord
4.3  Parameter 'record' is registered in onRecord's scope