javascriptfunctioniife

Immediately invoked function expression without using grouping operator


I'm trying to immediately invoke a function without using IIFE pattern (enclosing a function definition inside parentheses). Here I see two scenarios:

  1. When a function declaration is invoked immediately: gives SyntaxError.

  2. When a function expression is invoked immediately: executes successfully.

Example 1: gives SyntaxError

//gives `SyntaxError`
function() {
    console.log('Inside the function');
}();

Example 2: Executes without any error

// Executes without any error
var x = function() {console.log('Inside the function')}(); // Inside the function

So, I have these doubts:


Solution

  • In your code you don't have name for the function that's the reason for syntax error. Even if you would had name it would have thrown error.

    function func(){
      console.log('x')
    }();

    The reason is the function declaration doesn't return the values of the function however when you wrap function declaration inside () it forces it be a function expression which returns a value.

    In the second example the function() {console.log('Inside the function')} is considered expression because it's on RightHandSide. So it executes without an error.

    Is there a way we can immediately invoke a function declaration without using IIFE pattern

    You can use + which will make function declaration an expression.

    +function(){
      console.log('done')
    }()

    If you don't want to use + and () you can use new keyword

    new function(){
      console.log('done')
    }

    Extra

    A very interesting question is asked by @cat in the comments. I try to answer it.There are three cases

    +function(){} //returns NaN
    (+function(){return 5})() //VM140:1 Uncaught TypeError: (+(intermediate value)) is not a function
    +function(){return 5}() //5
    

    +function(){} returns NaN

    + acts as Unary Plus here which parses the value next to it to number. As Number(function(){}) returns NaN so it also returns NaN

    (+function(){return 5;})() returns Error

    Usually IIFE are created using (). () are used to make a function declaration an expression + is short way for that. Now +function(){} is already an expression which returns NaN. So calling NaN will return error. The code is same as

    Number(function(){})()
    

    +function(){return 5;}() returns 5

    In the above line + is used to make a statement an expression. In the above example first function is called then + is used on it to convert it to number. So the above line is same as

    Number(function(){return 5}())
    

    In the proof of statement "+ runs on after the function is called" Consider the below snippet

    console.log(typeof +function(){return '5'}());

    So in the above snippet you can see the returned value is string '5' but is converted to number because of +