Solved

JavaScript IIFE

Posted on 2015-02-14
8
100 Views
Last Modified: 2015-02-14
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/
0
Comment
Question by:Isaac
  • 4
  • 3
8 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40610191
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
 
LVL 5

Author Comment

by:Isaac
ID: 40610195
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
 
LVL 5

Author Comment

by:Isaac
ID: 40610196
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
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 40610197
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 5

Author Comment

by:Isaac
ID: 40610203
Thanks!
Once I defined myApp, it worked.

Working version

http://jsfiddle.net/isogunro/pfgppdr2/2/
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 40610206
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40610215
You're welcome, glad to help.
0
 
LVL 5

Author Comment

by:Isaac
ID: 40610231
Sorry Rainer! Didn't see your comment until I got the email notification and assigned points.  Your suggestion did work though. Thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now