I'm learning JavaScript and going through this tutorial on jQuery's website.

In following example

    // A function being attached to an object at runtime
    var myName = "the global object";
    var sayHello = function ()
    {
        console.log("Hi! My name is " + this.myName);
    };
    var myObject = {
        myName: "Rebecca"
    };
    var secondObject = {
        myName: "Colin"
    };

    myObject.sayHello = sayHello;
    secondObject.sayHello = sayHello;

    sayHello();              // "Hi! My name is the global object"
    myObject.sayHello();     // "Hi! My name is Rebecca"
    secondObject.sayHello(); // "Hi! My name is Colin"

I don't see expected output when sayHello() is invoked. Instead variable is undefined. But if I define global variable by assigning it to window.myName it works.

I'm using Chrome Version 25.0.1364.152 m.

Is tutorial incorrect or am I missing something ?

Full HTML is here:

UPDATE: Accepted answer explains what happened. I also want to mention possible solution - declaring global variable above without var. Because of following:

Furthermore, variables that are declared inside a function without the var keyword are not local to the function — JavaScript will traverse the scope chain all the way up to the window scope to find where the variable was previously defined. If the variable wasn't previously defined, it will be defined in the global scope, which can have unexpected consequences.

I'm learning JavaScript and going through this tutorial on jQuery's website.

In following example

    // A function being attached to an object at runtime
    var myName = "the global object";
    var sayHello = function ()
    {
        console.log("Hi! My name is " + this.myName);
    };
    var myObject = {
        myName: "Rebecca"
    };
    var secondObject = {
        myName: "Colin"
    };

    myObject.sayHello = sayHello;
    secondObject.sayHello = sayHello;

    sayHello();              // "Hi! My name is the global object"
    myObject.sayHello();     // "Hi! My name is Rebecca"
    secondObject.sayHello(); // "Hi! My name is Colin"

I don't see expected output when sayHello() is invoked. Instead variable is undefined. But if I define global variable by assigning it to window.myName it works.

I'm using Chrome Version 25.0.1364.152 m.

Is tutorial incorrect or am I missing something ?

Full HTML is here: http://pastebin./4M27vDB4

UPDATE: Accepted answer explains what happened. I also want to mention possible solution - declaring global variable above without var. Because of following:

Furthermore, variables that are declared inside a function without the var keyword are not local to the function — JavaScript will traverse the scope chain all the way up to the window scope to find where the variable was previously defined. If the variable wasn't previously defined, it will be defined in the global scope, which can have unexpected consequences.

• javascript
• jquery

• Works here (Chrome 25). How are you running your code? – Benjamin Gruenbaum Commented Mar 8, 2013 at 7:02
• This seems to work fine on my Chrome 25 – Hanky Panky Commented Mar 8, 2013 at 7:03
• 5 Maybe you have put this code inside $(function() { ... }); closure? In this case context inside it will not be window and you will get undefined as you describe. – dfsq Commented Mar 8, 2013 at 7:05
• sounds like you are putting that sample code inside a function body, which means the first "var myName" creates a local variable to that function instead. If you use window.myName, you are explicitely assigning to global scope. – Timothée Groleau Commented Mar 8, 2013 at 7:05
• right, so it's like we said, your "var MyName" assignment is inside a function: "$(document).ready(function () { ... });" – Timothée Groleau Commented Mar 8, 2013 at 7:07

2 Answers 2

You have put this code inside

$(document).ready(function ()
    // ...
}); 

closure. In this case context inside it will not be window (it will be document object) and you will get undefined as you describe.

in your program you have used this.myName. this keyword is used to point current object. when you call only sayHello() then in that case "this" means "window" because default current object is window. Now you have not defined window.myName then it will give "undefined".