JavaScript IIFE

Hi All,

I thought an iffe is supposed to execute immediately.  I am starting to think that my concept of the function is wrong.  Please help.  How come below, the alert() inside the IIFE does not execute once I run it?

http://jsfiddle.net/isogunro/bmxh4quq/1/
LVL 5
IsaacSharePoint Client Side DeveloperAsked:
Who is Participating?
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
Turns out that in Firefox at least, 'myapp' is undefined which causes an error that halts the javascript.  This demo with a simpler IIFE works fine.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>JS Functionz</title>
<script type="text/javascript">
<!--
//To prevent pollution of the global namespace, create an empty object and assign it to a variable.  you can then add members to it.

function vehicle() {
    alert("HELLO VEHCILE");
}

/*
(function () {
    this.myApp = myApp || {}; //Creates the namespace object if it does not already exist
    var ns = this.myApp;
    alert("Should see this since it's a IIFE");
    var vehicleCount = 5;
    var vehicles = [];
    ns.Car = function () {};
    ns.Truck = function () {};

    var repair = {
        decription: 'changed spark plugs',
        cost: 100
    };

    alert("Problem: " + repair.description + " Cost: " + repair.cost);

}());
*/

(function(){
  alert("HELLO IIFE"); 
}());

// -->
</script>
</head>
<body onload="vehicle()">
<h1>JS Functionz</h1>
</body>
</html>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
There is nothing to trigger the functions.  In this simple version, I call the first function in 'onload'.  I'm not sure how you 'call' the anonymous function.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>JS Functionz</title>
<script type="text/javascript">
<!--
//To prevent pollution of the global namespace, create an empty object and assign it to a variable.  you can then add members to it.

function vehicle() {
    alert("HELLO VEHCILE");
}

(function () {
    this.myApp = myApp || {}; //Creates the namespace object if it does not already exist
    var ns = this.myApp;
    alert("Should see this since it's a IIFE");
    var vehicleCount = 5;
    var vehicles = [];
    ns.Car = function () {};
    ns.Truck = function () {};

    var repair = {
        decription: 'changed spark plugs',
        cost: 100
    };

    alert("Problem: " + repair.description + " Cost: " + repair.cost);

}());

// -->
</script>
</head>
<body onload="vehicle()">
<h1>JS Functionz</h1>
</body>
</html>

Open in new window

0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
I thought a immediately invoked function gets called when the page loads without calling it.  Isn't clicking 'Run' in jsfiddle the same as loading?  IIFE is supposed to be different from a regular function or so I thought from my readings.
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
IsaacSharePoint Client Side DeveloperAuthor Commented:
I'm not talking about the Vehicle() function.  I'm talking about the IIFE
sorry for the confusion.

(function () {
    this.myApp = myApp || {}; //Creates the namespace object if it does not already exist
    var ns = this.myApp;
    alert("Should see this since it's a IIFE");
    var vehicleCount = 5;
    var vehicles = [];
    ns.Car = function () {};
    ns.Truck = function () {};

    var repair = {
        decription: 'changed spark plugs',
        cost: 100
    };

    alert("Problem: " + repair.description + " Cost: " + repair.cost);

}());

Open in new window

0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Thanks!
Once I defined myApp, it worked.

Working version

http://jsfiddle.net/isogunro/pfgppdr2/2/
0
 
Rainer JeschorCommented:
Hi,
IE dev tools just show, that Javascript stops right at the moment when you try to assign the undefined object myapp
this.myApp = myApp || {}; //Creates the namespace object if it does not already exist

Open in new window


Fix for this:
simply turn the two objects around:
this.myApp = {} || myApp; //Creates the namespace object if it does not already exist

Open in new window


http://jsfiddle.net/EE_RainerJ/ey2hfvbf/

HTH
Rainer
0
 
Dave BaldwinFixer of ProblemsCommented:
You're welcome, glad to help.
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Sorry Rainer! Didn't see your comment until I got the email notification and assigned points.  Your suggestion did work though. Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.