Calling Sub-Function in Javascript Different in Safari

I just came across a browser inconsistency that I have never seen before. Granted I am new to this one aspect, but still, interesting. I had an example of code that had a sub function being called in this manner:

// This will NOT work in safari.
function Foo2(){
	alert("In Foo2 Method");

	(
		function Bar2(){
			alert("In Bar2 Method");
		}
	)();
}

// Call the Foo2 method for testing.
Foo2();

In the above example, we have a sub-function that is being called via the notation ( .... )(); This notation is used for nameless functions. In this example the function does have a name, "Foo2." In IE and FireFox, this still works.

If you want to keep this notation and have it work in Safari, you cannot use a function name, as in this example:

// This will work in Safari.
function Foo(){
	alert("In Foo Method");

	(
		function (){
			alert("In Bar Method");
		}
	)();
}
Foo();

In the above example, you will see that the function call is the same ( ... )(); the only difference is that the sub-function is no longer named. It is merely the function definition "function()". This works fine so long as you don't need to refer to the function by name, say as you might in a recursive method call.

In order to recurse, you need the name and you need to change the notation a bit. To use a named function in Safari, you need to call the function explicitly as below:

// This will work in Safari.
function Foo(){
	alert("In Foo Method");

	function Bar(){
		alert("In Bar Method");
	}

	Bar();
}
Foo();

In the above example, you see that we need to call the Bar method explicitly with Bar();. Additionally, we no longer use the ( ... )(); notation and this does work in Safari and the other browsers.

Want to use code from this post? Check out the license.

Short link: https://bennadel.com/50