Solved

JavaScript IIFE

Posted on 2015-02-14
8
108 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
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 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
 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

679 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