Javascript self calling function vs <script> tag placed directly after the HTML element [duplicate]

Question

Using script tag:

<div id="first">
    me is first
</div>
<script type="text/javascript">
    var first = document.getElementById("first");
    console.log(first);
</script>

Self-invoking function:

<div id="second">
    me is second
</div>
<script type="text/javascript">
    (function(){
        var second = document.getElementById("second");
        console.log(second);
    })();
</script>

What is the difference in usage between self-calling function and <script> tag placed after the html element. I've been debugging for finding a difference. But they seems act same. Or is it just about good/bad practice?

They are virtually idential. The only difference is that in the second case second is not polluting the global scope. — Niet the Dark Absol
– Niet the Dark Absol, Commented May 13, 2014 at 22:01

Alexis King · Accepted Answer · 2014-09-22 05:22:44Z

7

The self-executing function creates a new internal scope which contains the second variable and prevents it from leaking into the global namespace. The plain <script> block's first variable, however, will be added into the global scope.

Keep in mind that individual script blocks do not have their own scope, they all operate within the same global scope, which is necessary for scripts to interoperate.

edited Sep 22, 2014 at 5:22

answered May 13, 2014 at 22:01

Alexis King

44.1k17 gold badges144 silver badges218 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user115014 · Accepted Answer · 2014-05-13 22:35:07Z

3

The difference between the two examples you've posted is essentially one is storing a variable (var second) within a function and one is not (var first).

In your second example you are assigning the element object to a variable inside an anonymous, self-invoking function (no name is attributed to it so it's value is never stored, and the following parenthesis attached at the end call that function).

An example of a named variable is...

function yourFunctionName () {
  console.log("I'm a function with a name");
}

An anonymous function is a function without a name, even though it's assigned to the variable anon_function its' still anonymous...

var anon_function = function(){
  console.log("I'm anonymous");
}

The return value of the above function is stored in the anon_function variable.

The trailing parenthesis tell the function to execute straight away as if you were calling a named function.

function(){
  console.log("I'm anonymous and self-invoking");
}()

Once the function is run and then terminates, variables created inside the function are discarded and the global object remains as it was.

The parenthesis that wrap the entire function are 'recommended' to help programmers distinguish from normal functions:

(function(){
  console.log("I'm anonymous, self-invoking and wrapped in parenthesis just for clarity");
})()

There is a short pdf article about self-invoking functions here and a good article on anonymous functions here

answered May 13, 2014 at 22:35

user115014

9221 gold badge14 silver badges23 bronze badges

1 Comment

FloatingRock Over a year ago

I tried running the last self-invoking function you listed, where I defined a variable a = 1;. Using Firebug in Firefox, I was able to read the value of a outside the function.

geoff · Accepted Answer · 2014-05-13 22:01:45Z

2

In the first example, you can maniuplate the variable first within the JavaScript console.

In the self-invoking function, var second is protected by the function "wrapper", and cannot be modified by an external JavaScript console. This kind of function is known as an anonymous function, since it has no name (unlike function doStuff()).

Generally, it is better to write code with a self-invoking function, since variables inside the anonymous function will stay within that scope, and not propagate up into the global scope.

answered May 13, 2014 at 22:01

geoff

2,2741 gold badge19 silver badges36 bronze badges

Collectives™ on Stack Overflow

Javascript self calling function vs <script> tag placed directly after the HTML element [duplicate]

3 Answers 3

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Linked

Related