Init function in javascript and how it works

by

The way I usually explain this to people is to show how it’s similar to other JavaScript patterns.

First, you should know that there are two ways to declare a function (actually, there’s at least five, but these are the two main culprits):

function foo() {/*code*/}

and

var foo = function() {/*code*/};

Even if this construction looks strange, you probably use it all the time when attaching events:

window.onload=function(){/*code*/};

You should notice that the second form is not much different from a regular variable declaration:

var bar = 5;
var baz = 'some string';
var foo = function() {/*code*/};

But in JavaScript, you always have the choice between using a value directly or through a variable. If bar is 5, then the next two statements are equivalent:

var myVal = bar * 100; // use 'bar'
var myVal = 5 * 100;   // don't use 'bar'

Well, if you can use 5 on its own, why can’t you use function() {\*code*\} on its own too? In fact, you can. And that’s called an anonymous function. So these two examples are equivalent as well:

var foo = function() {/*code*/}; // use 'foo'
foo();                           

(function(){/*code*/})();        // don't use 'foo'

The only difference you should see is in the extra brackets. That’s simply because if you start a line with the keyword function, the parser will think you are declaring a function using the very first pattern at the top of this answer and throw a syntax error exception. So wrap your entire anonymous function inside a pair of braces and the problem goes away.

In other words, the following three statements are valid:

5;                        // pointless and stupid
'some string';            // pointless and stupid
(function(){/*code*/})(); // wonderfully powerful

[EDIT in 2020]

The previous version of my answer recommended Douglas Crockford’s form of parens-wrapping for these “immediately invoked anonymous functions”. User @RayLoveless recommended in 2012 to use the version shown now. Back then, before ES6 and arrow functions, there was no obvious idiomatic difference; you simply had to prevent the statement starting with the function keyword. In fact, there were lots of ways to do that. But using parens, these two statements were syntactically and idiomatically equivalent:

( function() { /* code */}() );
( function() { /* code */} )();

But user @zentechinc’s comment below reminds me that arrow functions change all this. So now only one of these statements is correct.

( () => { /* code */ }() ); // Syntax error
( () => { /* code */ } )();

Why on earth does this matter? Actually, it’s pretty easy to demonstrate. Remember an arrow function can come in two basic forms:

() => { return 5; };       // With a function body
() => { console.log(5); };

() => 5;                   // Or with a single expression
() => console.log(5);

Without parens wrapping this second type of arrow function, you end up with an idiomatic mess:

() => 5();              // How do you invoke a 5?
() => console.log(5)(); // console.log does not return a function!

More Related Contents:

  1. Javascript unknown error
  2. jquery get id of input selected text
  3. What does “this” refer to in arrow functions in ES6?
  4. Origin null is not allowed by Access-Control-Allow-Origin
  5. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  6. JavaScript for…in vs for
  7. Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
  8. Why Does Firebase Lose Reference outside the once() Function?
  9. How to use onClick() or onSelect() on option tag in a JSP page?
  10. Using http rest apis with angular 2
  11. Uncaught TypeError: Illegal invocation in JavaScript
  12. Converting any string into camel case
  13. How do I POST with multipart form data using fetch?
  14. Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)
  15. What is the best way to limit concurrency when using ES6’s Promise.all()?
  16. How to know when all Promises are Resolved in a dynamic “iterable” parameter?
  17. ES6 classes : what about instrospection?
  18. How to make div fixed after you scroll to that div?
  19. Difference between “.innerHTML” and “.value” in JS
  20. How do I print debug messages in the Google Chrome JavaScript Console?
  21. Date.getDay() javascript returns wrong day
  22. Socket.io Client: respond to all events with one handler?
  23. Redeclaring a javascript variable
  24. Remove a character at a certain position in a string – javascript [duplicate]
  25. How to detect the installed Chrome version?
  26. Render value without data-binding
  27. Why is setTimeout(fn, 0) sometimes useful?
  28. Can javascript tell the difference between left and right shift key?
  29. Why is .forEach returning undefined?
  30. Emulate clicking a link with Javascript that works with IE

Leave a Comment