This question already has answers here:
Location of parenthesis for auto-executing anonymous JavaScript functions?
(4 answers)
Closed 6 years ago.
There is a piece of code :
(function aaa(){alert("555")})()
and this :
(function aaa(){alert("555")}())
What is the difference?
If you put the first one together twice, it only runs the first one before producing a TypeError:
(function aaa(){alert("555")})()(function aaa(){alert("555")})()
If you put the second one together twice, it runs both of them before producing a TypeError:
(function aaa(){alert("555")}())(function aaa(){alert("555")}())
In short, they're two different style choices for scoping code to avoid cluttering the global namespace, but the second one in my experience tends to be favored more since it's less prone to erroring when multiple scopes are concatenated together. It's best to always begin the scope with a semicolon to ensure that it executes when concatenated like so:
;(function aaa(){alert("555")}());(function aaa(){alert("555")}())
Related
This question already has answers here:
Location of parenthesis for auto-executing anonymous JavaScript functions?
(4 answers)
Closed 6 years ago.
I am learning module pattern in Javascript, and have come across these two ways to create a module:
var Module = (function () {
// code
})();
var Module = (function () {
// code
}());
is there a significant difference in these two approaches? if not, which is considered the better practice? Thanks.
Both are the same. The outer round braces are forcing the inside code to be evaluated as an expression. This means that in both cases the function code is treated as function-expression as well. And then this function is immediately executed due to () braces.
So, it should be exactly the same from the point of view of JS interpreter todo list: 1) get function expression, 2) execute it right away.
It only differs from aesthetic point of view - which way it looks more natural for you.
This question already has answers here:
How does this JavaScript/jQuery syntax work: (function( window, undefined ) { })(window)?
(5 answers)
Closed 8 years ago.
I am using my js files like:
(function() {
'use strict';
angular
.module('app.someModule')
.config(config);
function config(someDependency){
//some configuration
}
config.$inject=['someDependency'];
})();
However I saw when i using closures some people injects the angular object itself the closure. Something like:
(function(angular){/*whatever logic*/})(angular);
Which one is a better usage or Are there any difference between two usage?
So I dont add global angular variable as always that don't cause any trouble?
The difference between two immediately executed functions (IIFE) is that in the second case you invoke function with one parameter angular. The benefit it can give is slightly improved performance as there is no need for Javascript engine to look up for a variable in global scope, as the angular object is available in local closure scope as a reference passed with function invocation (but of course it still points to the same Angular object, defined in global scope).
This question already has answers here:
What is the purpose of a self executing function in javascript?
(21 answers)
What is the (function() { } )() construct in JavaScript?
(28 answers)
Closed 8 years ago.
I see this in some HTML files that use jQuery, at the bottom:
(function() {
setTimeout(function(){window.scrollTo(0,0);},0);
})();
What does it mean to put the whole function in round brackets?
The code you gave as example is a self-executing anonymous function.
You can read more about them here.
Relevant text from that article:
What’s useful here is that JavaScript has function level scoping. All variables and functions defined within the anonymous function aren’t available to the code outside of it, effectively using closure to seal itself from the outside world.
(function() {})(); means it is self executing anonymous function. It get called immediately when java script get rendered. More details you can search it.
setTimeout is a function which accepts two parameters:
First parameter: A function
Second parameter: an integer value in milliseconds.
By calling the setTimeout function, the function from first parameter will be called/invoked after the amount of time specified in the second parameter.
This question already has answers here:
Location of parenthesis for auto-executing anonymous JavaScript functions?
(4 answers)
Closed 9 years ago.
Is there any differences between javascript modules:
(function(){}())
vs
(function(){})()
First from book "good parts" by Crockford.
Second is code generated with Typescript.
There is no different. Also you can write the third option if your function doesn't return any value
!function(){}()
No, there is no difference between those two functions and how they're called. In both cases, you're creating an anonymous function and executing it immediately.
The only reason the "outer" parens are required is that when the JavaScript parser is expecting to see a statement, if it sees function it assumes what follows will be a function declaration. But we want to give a function expression, so by giving it an initial (, we put it into a state where it's expecting an expression.
But where the () to call the function go (after the } or outside the wrapping parens) doesn't make any difference.
No there is no difference, they both work the same. I tend to use the latter... it just seems to make more sense. (function(){}) defines the function and then you call it with (). In either case though, use a (leading)semicolon before the first (. Reference
This question already has answers here:
How does the (function() {})() construct work and why do people use it?
(15 answers)
Closed 9 years ago.
I have downloaded an external JavaScript file and want to create a HTML5 User Interface for it. I don't understand why the JavaScript code (see bellow) initiates his main function like that.
//JavaScript Code
(function(Raphael) {
// some codes here
})(window.Raphael);
Why is that function between parentheses?
What does the "window.Raphael" mean?
This is an example of a self invoking anonymous function.
You are passing in window.Raphael into this function which is essentially "renamed" to Raphael inside the function.
That is an immediately executing function (IIFE). Meaning one thats defined and executed immediately afterwards.
In this case, its also using RaphaelJS which is an SVG library. The IIFE accepts a global variable presumably defined by Raphael that is accessible at window.Raphael