JavaScript Function Leading Bang ! Syntax

javascript function leading bang ! syntax

Ideally you should be able to do all this simply as:

function(){
  // do stuff
}(); 

That means declare anonymous function and execute it. But that will not work due to specifics of JS grammar.

So shortest form of achieving this is to use some expression e.g. UnaryExpression (and so CallExpression):

!function(){
  // do stuff
}(); 

Or for the fun:

-function(){
  // do stuff
}(); 

Or:

+function(){
  // do stuff
}(); 

Or even:

~function(){
  // do stuff
  return 0;
}( );

JavaScript Bang ! Functions vs Leading Semi-Colon ; IIFEs

You always have IEFEs there. Whether you wrap them in parenthesis or prefix them with a ! is your choice, and doesn't make a difference. You need either one to force the function to be parsed as an expression. See javascript function leading bang ! syntax for details.

Whether you prefix that whole construct with a ; to prevent errors from concatenation with poor-written scripts (What does the leading semicolon in JavaScript libraries do?) is totally unrelated. You can mix the patterns as you want:

 !function(){…}() // not safe for arbitrary concatenation
 (function(){…}()) // not safe for arbitrary concatenation either
;!function(){…}()
;(function(){…}())

However, there is one case of concatenation where () vs ! does make a difference: if two scripts are concatenated so that there is a newline in between, and the former does not end in a semicolon. This does allow automatic semicolon insertion to jump in - when the next line does begin with a bang!

1 + 2             // script A
!function(){…}(); // script B
// works!

1 + 2              // script A
(function(){…}()); // script B
// runtime error: "2 is not a function" (or whatever the previous line ends in)

We learn: Always end your script with a semicolon. Use intelligent concatenation. Start your script with a semicolon if you need to be safe against dumb concatenation.

How to make function be called instantly, then be called every 5000ms

Use !function IIFE syntax with setTimeout:

!function refresh () {  document.getElementById("test").innerHTML = Date.now()  setTimeout(refresh, 5000)}()

<div id="test"></div>

What does + means in +function($)?

To guide the javascript parser, that the thing written near the unary operator + is an expression.

EDIT: You can create javascript functions anonymously. This is one of the syntaxes to create the same. By doing so, when they are called (i.e evaluated), they act like a returning a function value. You can read more from the second link which provides a good description of it.

This link explains it well

Once declared, if not named, these can be executed inline like IIFE (Immediately invoked function expressions) as well. And in this form, they can then be used to create plugins or used as namespaces and attached to window object or jquery object for use later.

Good sample file to see anonymous function code in action

http://www.programering.com/a/MTMwITMwATk.html

What does the exclamation mark do before the function?

JavaScript syntax 101: here is a function declaration:

function foo() {}

Note that there’s no semicolon; this is just a function declaration. You would need an invocation, foo(), to actually run the function.

Now, when we add the seemingly innocuous exclamation mark: !function foo() {} it turns it into an expression. It is now a function expression.

The ! alone doesn’t invoke the function, of course, but we can now put () at the end: !function foo() {}(), which has higher precedence than ! and instantly calls the function.

function foo() {}() would be a syntax error because you can’t put arguments (()) right after a function declaration.

So what the author is doing is saving a byte per function expression; a more readable way of writing it would be this:

(function(){})();

Lastly, ! makes the expression return a boolean based on the return value of the function. Usually, an immediately invoked function expression (IIFE) doesn’t explicitly return anything, so its return value will be undefined, which leaves us with !undefined which is true. This boolean isn’t used.

! preceding function in javascript?

The preceding ! takes the un-parseable statement, and allows it to to be parsed by the JS engine, which in turn returns true.

function(){}();
SyntaxError: Unexpected token (

!function(){}();
>>true

Javascript Function syntax in plain English

I'd reckon to call it function instead of formula. A function can do more things than a formula itself. A formula is something applied on one or more expressions whereas a function can contain more than one formula, even an output of a formula can be used as an input for another formula within the same function. Also, the keyword execute make more sense than run. You can also use the keyword statement to refer each expression. There is nothing wrong as long as syntactical pseudo code is correct.

Do something if multiple (AND operator) functions have been executed

Try like this:

$(document).ready(function() {
   var isInstagramLoadError = false;
   var isImagesLoaded = false;

  (function() {
    new InstagramFeed({
      'on_error': function() {
        isInstagramLoadError = true;
        checkBoth();
      }
    });
  })();
  
  $('#myDiv').imagesLoaded(function() {
    isImagesLoaded = true;
    checkBoth();
  });
  
  function checkBoth() {
    if (isInstagramLoadError && isImagesLoaded) {
      // do some stuff if both instagramLoadError and imagesLoaded functions have been executed
    };
  };
});

The issue is that you are dealing with asynchronous callback functions. Each function will run when something happens (Instagram load error or images loaded) and the order of the two cannot be guaranteed. So to deal with this, have each function update a variable and then call a common function checkBoth() to check the variables.

---

Related Topics