?
Solved

JavaScript IIFE

Posted on 2015-02-14
8
Medium Priority
?
113 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 84

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
Understanding Linux Permissions

Linux for beginners: How to view the permissions associated with files and directories and also how you can change them.

 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 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 84

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…
Suggested Courses

752 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