Question about function inside of function

programming
1

Hello,

I am reading Javascript for Absolute Beginners and I have a question about the following referenced code…

function youSayGoodbye() {
 
    alert("Goodbye!");
 
    function andISayHello() {
        alert("Hello!");
    }
 
    return andISayHello;
}

When I call the function youSayGoodbye() at https://jsfiddle.net/ I see one alert that says “Goodbye!”

Then when I initialize a variable:

var something = youSayGoodbye();

and call:

something()

I get two alerts 1st: Goodbye! and 2nd: Hello!

My questions are:

  1. The book says:
    The youSayGoodbye outer function, from the something variable’s point of view, simply goes away. Because the something variable now points to a function, you can invoke this function by just calling it using the open and close parentheses like you normally would. When you do this, the returned inner function (aka andISayHello) will execute. Just like before, you will see a dialog box appear, but this dialog box will say Hello!—which is what the alert inside this function specified.

My issue is understanding why when I use something () at https://jsfiddle.net/ (One for Hello! and One for Goodbye!) When the wording from the book makes seem it like I am just supposed to get one (Hello!).

I am confused. My apologies for so much text… please explain (wipes sweat beads from head caused by noob programming anxiety. ) Thanks!

2

I think you forgot to save your fiddle, so your jsfiddle links go to a blank document :wink: But assuming you didn’t change anything from the book (I broke mine out to make sure there wasn’t anything much more going on other than the code you posted), it goes like this.

First, what’s getting discussed is:

function youSayGoodbye() {
 
    alert("Goodbye!");
 
    function andISayHello() {
        alert("Hello!");
    }
 
    return andISayHello;
}
var something = youSayGoodbye();

With this code alone you should only see “Goodbye!”. The youSayGoodbye function runs, calls the alert, and defines but does not run andISayHello which is then returned. That function definition then gets reassigned to something. The text before what you quoted in the book covers this, mentioning that “Good Bye!” is alerted (Doh! Typo!).

After that, the something function gets called.

something();

And from that invocation, “Hello!” is additionally alerted. Focusing on just something() we say that only “Hello!” is alerted, with the understanding that “Goodbye!” has already happened.

I think what’s confusing that, for context, the code in the book showing something() includes the assignment above it:

var something = youSayGoodbye();
something();

So in this case, yes, both alerts will appear as a result of running this code, but when it sounds like it should only be “Hello!”, its because the text is focusing specifically on the results of something() and not the assignment where youSayGoodbye() is called.

In the end, what you’re seeing is correct. Both alerts occur - each of which occurring as their respective function is called, wherever that happens in the code.

1 Like
3

Thank you so much!