Self invoking function

Question

I'm a little confused over the execution flow of self invoking functions in javascript.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>

    var test = function () {
        alert("Test1##");
    }

    var test2 = function () {
        alert("Test2!!");
    }

    (function () {
        test();
    })();

</script>

</body>
</html>

Result: Test2!!. I expected it to alert Test1## since I'm calling that particular function.

However, if I include semicolon after each functions testand test2, the result is how I expect it to be: It would alert Test1##.

How does it work?

JavaScript is not a whitespace-delineated language. Put the semicolons in. — isherwood, Apr 08 '16 at 18:09
"*However, if I include semicolon after each function...the result is how I expect it to be*" - and that's why using semi-colons is a good idea. — David Thomas, Apr 08 '16 at 18:09
You must include semicolons after declaring a variable in javaScript otherwise it may print unexpected results. var test = function () { alert("Test1##"); }; var test2 = function () { alert("Test2!!"); }; (function () { test(); })(); — abhiagNitk, Apr 08 '16 at 18:12

Daniel A. White · Accepted Answer · 2016-04-08T18:12:36.293

4

You need to use some semicolons. Otherwise the statements get blended.

Why I think this is happening is that the function that calls test isn't getting called at all, but it's being passed to test2 as the first argument.

You can see that behavior here: https://jsfiddle.net/ssgagr3k/

edited Apr 08 '16 at 18:12

answered Apr 08 '16 at 18:08

Daniel A. White

187,200
47
362
445

It does work properly with semicolons, I want to understand how the js treats it when there's no semicolon. If the execution starts from the first function defined, why does it not print the statements in the first function and the ones that follow, until it encounters a semicolon? – theblackpearl Apr 08 '16 at 18:11
Daniel, You are correct. This can be tested by calling `console.log(arguments)` from within test2's function. Edit: *as well. (your test works too I suppose :P) – Joseph Marikle Apr 08 '16 at 18:13
Excellent example Daniel. Now I have more questions. Even if you remove the `test()` call in self invoking function, the result is still same. The call inside self invoking function doesn't seem to matter. Also, how is the `val` being passed to `test2()`? Appreciate your answer. – theblackpearl Apr 08 '16 at 18:18
@RohitPujar basically `test2` is treated as an self invoking function. – Daniel A. White Apr 08 '16 at 18:19
*Maybe* [this demo](https://jsfiddle.net/vt8tf56v/1) is helpful in making it understandable? That or it'll only make it more confusing. – Joseph Marikle Apr 08 '16 at 18:22
@JosephMarikle now the last set of parens are invoking another function. – Daniel A. White Apr 08 '16 at 18:28
Thanks Joseph. step 1: call `function () { alert("Test2!!"); }` and pass it the parameter `function () {test();}`. Can you please explain why is `test2()` being called instead of `test1()`. How does the execution flow begin? – theblackpearl Apr 08 '16 at 18:30
1: `function () { alert("Test2!!"); }` is passed `function () { test(); }` and executed. It doesn't matter what was passed, because it doesn't do anything with parameters. 2: After it finishes executing, the flow runs into another `()` at the very end, so it tries to execute whatever was returned by the last statement. In the original code, it just errors out. That's why I added a return with a function. To show that it was trying to execute something but the first function didn't originally return anything. Here's another example using a seperate function: https://jsfiddle.net/vt8tf56v/2/ – Joseph Marikle Apr 08 '16 at 18:33
Thanks for the example, I'm getting the perspective but with more questions. You say that `step 1: call `function () { alert("Test2!!"); }` and pass it the parameter `function () {test();}``, however if I include semicolon in `test1()`, only `test1()` is called. Which means when semicolon is included, it is not calling the `test2()`. So the execution begins with first function in the body? – theblackpearl Apr 08 '16 at 18:56
In short, can you please explain me the flow of execution in this: https://jsfiddle.net/vt8tf56v/2/ – theblackpearl Apr 08 '16 at 19:04
@RohitPujar the best thing to do is run it with a debugger and you can see exactly what's going on. – Daniel A. White Apr 08 '16 at 19:16
Debugged a simple js, put the comments here https://jsfiddle.net/6tn4zwkc/2/ – theblackpearl Apr 08 '16 at 19:27
@RohitPujar For your commented fiddle, the lines you mentioned are not executed because `test` is never called. It would be called if the final closure were ever executed, but it isn't. Instead it's passed as a parameter to test2, but test2 doesn't take a parameter, so it ignores it. – Joseph Marikle Apr 08 '16 at 20:24

Self invoking function

1 Answers1