Why do I need to use the “this” keyword when accessing a parameter for an anonymous self-executing function?

Question

I'm just getting started learning Javascript and I've been playing around with anonymous self-executing functions. I made some code that doesn't work the way I would expect. Why is the "this" keyword needed to get the value of variable "shoutIt" in this instance?

The first alert displays "Did it work? (1) undefined" while the second displays "Did it work? (2) [YES!]".

Thanks!

var shoutIt = "[YES!]";

//creating an anonymous, self-executing function
(
    function (shoutIt) {
        shoutItDebug = shoutIt;
        shoutItDebug = this.shoutIt;
        alert("Did it work? (1) " + shoutIt); //doesn't work, undefined
        alert("Did it work? (2) " + this.shoutIt) //works
})();

Answer 1

There are two variables called shoutIt here: one is the global variable defined by var shoutIt , and the other is a variable defined by the formal argument in function (shoutIt) { ...

When you run a non-method function (ie, of the form foo() rather than bar.foo() ) in non-strict mode, this is equal to the global object (in the browser, window ). Inside the function, this.shoutIt refers to the shoutIt variable in the global scope.

By contrast, shoutIt refers here to the function argument with that name, instead of the global variable, which is one scope level up. (The global variable is "shadowed" by the more immediate variable of the same name.) The function isn't called with any arguments, so the value of shoutIt within the function is undefined .

If you want to pass in a value to use as the argument named shoutIt , supply one in the invoking parentheses:

(function (shoutIt) {
    ...
})(someValue);

Answer 2

because your anonymous function is expecting shoutIt as an argument but you are passing nothing to it.

Basically your function expects a parameter shoutIt . This parameter will be in the local scope of the function. If nothing is passed, and when the compiler will fetch the value of shoutIt it will access it from the local scope now and wont go to the global level. At the local level since you are not passing anything to the function, it gives you undefined

There are two solutions to it

1) Pass the value of shoutIt

var shoutIt = "[YES!]";

//creating an anonymous, self-executing function
(
    function (shoutIt) { //expecting that value
        shoutItDebug = shoutIt;
        shoutItDebug = this.shoutIt;
        alert("Did it work? (1) " + shoutIt);
        alert("Did it work? (2) " + this.shoutIt)
})(shoutIt);**strong text** //passing argument to the function

OR

2) Do not pass any parameter

var shoutIt = "[YES!]";

//creating an anonymous, self-executing function
(
    function () {
        shoutItDebug = shoutIt;
        shoutItDebug = this.shoutIt;
        alert("Did it work? (1) " + shoutIt); 
        alert("Did it work? (2) " + this.shoutIt) 
})();

How 'this' works

Basically 'this' refers to the context in javascript. By default it points to the window object. Try doing

console.log(this) //outputs the window object

Whatever is defined at the global level automatically gets linked to the window object.

Answer 3

You're parameter is named the same as the variable outside of the function and you're not passing a variable into the function.

With your example you could do a couple different things to get it to work as you expect it.

A. Pass shoutIt into the function

var shoutIt = "[YES!]";
//creating an anonymous, self-executing function
(
    function (shoutIt) {
        shoutItDebug = shoutIt;
        shoutItDebug = this.shoutIt;
        alert("Did it work? (1) " + shoutIt); //doesn't work, undefined
        alert("Did it work? (2) " + this.shoutIt) //works
})(shoutIt);

B. Change the name of the parameter in your function definition.

var shoutIt = "[YES!]";

//creating an anonymous, self-executing function
(
    function (shoutItAgain) {
        shoutItDebug = shoutIt;
        shoutItDebug = this.shoutIt;
        alert("Did it work? (1) " + shoutIt); //doesn't work, undefined
        alert("Did it work? (2) " + this.shoutIt) //works
})();