4

Can someone please explain in great detail why in the following function, the return value is 1.5? Does javascript parse bottom to top or there is more to it?

    (function f() {
        function f() { return 1; }
        return f();
        function f() { return 2; }
        function f() { return 1.5; }
    })();
Stan A
  • 133
  • 8
  • 6
    This behavior is called **hoisting**. Google it! – Florent Jan 28 '14 at 17:25
  • One I learn answer added an example back in time read may be you find helpful [JavaScript 'hoisting'](http://stackoverflow.com/questions/15311158/javascript-hoisting/15313200#15313200) – Grijesh Chauhan Jan 28 '14 at 17:36

3 Answers3

4

Functions are 'hoisted' to the top of the scope they live in.

So your code actually reads:

(function f() {
    function f() { return 1; }
    function f() { return 2; }
    function f() { return 1.5; }
    return f();
})();

QED:

(function f() {
    function f() { return 1; }
    return f();
    function f() { return 1.5; }
    function f() { return 2; }
})(); //=> 2
KooiInc
  • 119,216
  • 31
  • 141
  • 177
  • @GrijeshChauhan that's ok, I'm not primarily in it for the votes ;) – KooiInc Jan 28 '14 at 17:31
  • @kooilnc then add some theory, defined what is hosting.. I feel it is incomplete if someone new to it.... – Grijesh Chauhan Jan 28 '14 at 17:34
  • That's why I added a link (http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html). To keep the answer short, and because Ben Cherry explains it pretty good. – KooiInc Jan 28 '14 at 17:35
  • @kooilnc Thanks Kooilnc,, I didn't read it (as I am not web-dev) I will read it ... – Grijesh Chauhan Jan 28 '14 at 17:38
  • I saw the link I agree... thanks! btw I pick a [book](http://www.amazon.in/JavaScript-jQuery-The-missing-Manual/dp/9350235625?tag=googinhydr17902-21) today I read first-1 chapter feel it is good.. do you have any suggestion. – Grijesh Chauhan Jan 28 '14 at 17:40
  • 1
    A lot of scripting I learned by ... scripting and trying to answer questions @SO. There are excellent online sources for free to learn more, like http://eloquentjavascript.net/print.html or http://www.codecademy.com/tracks/jquery. I have tried reading books on programming, but most of the time they bore me or I end up (re)coding the examples before I finish the book and forget about it. – KooiInc Jan 28 '14 at 18:10
  • So if I understand this correctly, JS interpreter first looks at all declarations and then the rest of the code. Correct? – Stan A Jan 28 '14 at 20:26
  • @KooiInc Thanks Kooilnc I like fist [link very](http://eloquentjavascript.net/contents.html) much... and downloaded HTML-zip. thanks! – Grijesh Chauhan Jan 29 '14 at 06:44
1

jsFiddle Demo

As a result of hoisting, this is equivalent to

(function f(){
 var f;
 f = function(){ return 1; };
 f = function(){ return 2; };
 f = function(){ return 1.5; };
 return f();
})();

Hoisting can be tricky, as there are two aspects of it occurring here. First, the variable definition is hoisted

Every definition of a variable is really a declaration of the variable at the top of its scope and an assignment at the place where the definition is.1

Next, each function initialization is hoisted

Functions initializations happen at the top of the parent function (above vars). Since vars declarations with names already existent as a parameter or a function are no-ops, we get some surprising results.1

1: Scope Cheatsheet MDN

Travis J
  • 81,153
  • 41
  • 202
  • 273
1

when js interprer comes to the function first it looks for all var and function constructions (but not anonymous functions ) and atirs them in the order it has found them, after this it starts to execute code from start of the function. in your case f function which returns 1.5 is the last, so it pverides the previos 2 f functios

Vlad Nikitin
  • 1,929
  • 15
  • 17