Scope of an object literal within a function inside the object

Question

I am running three snippets of code. The first one works, while the second and third does not work. I am not sure I understand why the second and third does not work.

user2 = { 
          handle :"mytext", 
          alertName: function(){
                     alert(this.handle);}
        };
user2.handle;  //"mytext"
user2.alertName() // alerts "mytext"

Here, I understand that handle is assigned to the user2 object and is a key on the user2 object. Hence, when I call user2.alertName(), this.handle refers to user2.handle, so prints out the correct value.

However, why doesn't the following two versions of code work:

user2 = { 
          handle :"mytext", 
          alertName: function(){
                     alert(handle);}
        };

user2.handle;  //"mytext"
user2.alertName()  // gives error that handle is not defined in the console

and

user2 = { 
          handle :"mytext", 
          alertName: function(handle){
                     alert(handle);}
        };

user2.handle;  //"mytext"
user2.alertName()  //gives undefined in the alert popup

As far as I understand scope, handle which is defined at user2 object should be available to function which is a sub-scope of user2. Am I missing something basic here.Apologies if this seems like a noob question, but I think I got it and always keep coming back here. And I can't get a clear answer anywhere as to why the second or the third doesn't make sense when I look for documentation.

Answer 1

In your second and third code:

user2 = { 
          handle :"mytext", // handle is a property 
          alertName: function(){
                     alert(handle);}
        };

1. "handle" is a property of the object user2.
2. this is the object who's method you are invoking.
3. "handle" is a property of this inside the method "alertName".

Since, handle is not a variable defined, hence the error. In the third case you're defining handle as an argument in the method signature but not passing any in the call, so it comes out as undefined.

Answer 2

user2 = { 
          handle :"mytext", 
          alertName: function(){
                     alert(handle);}
        };

user2.handle;  //"mytext"
user2.alertName()  // gives error that handle is not defined in the console

handle is a property of the object , so you need to access the property of the object via this which refers to the object .

alert(handle); throws error coz its trying to find a variable named handle which is not in scope.

If you define the varibale handle globally , then you can access it in your user2 object .

var handle="google";

user2 = { 
          handle :"mytext", 
          alertName: function(){
                     alert(handle);}
        };

alert(user2.handle);  //"mytext"
user2.alertName()  // gives error that handle is not defined in the console

Answer 3

In second example, function 'alertName' expects a parameter 'handle'. Call user2.alertName() without parameter results in undefined.

For works should be this:

user2.alertName(user2.handle);

Answer 4

I will start with the code example followed by an explanation.

var user2 = { 
  handle :"mytext", 
  alertName: function() {
    //var handle is not defined in the current lexical scope or globally.
    alert(handle);
  }
};

user2.handle;  //"mytext"
user2.alertName()  // gives error that handle is not defined in the console

Explanation: you are defining user2.alertName . Within this function you are calling alert(handle) . From what I can see handle is not defined within the current lexical scope, or globally, hence undefined is alerted.

var user2 = { 
  handle :"mytext", 
  alertName: function(handle){
    alert(handle);
  }
};

user2.handle;  //"mytext"
user2.alertName()  //gives undefined in the alert popup

Explanation: You are defining user2.alertName . This function takes a parameter which is alerted. When you invoke user2.alertName() you are not passing any variable or literal. hence, undefined is alerted. to alert the user2.handle use:

user2.alertName(user2.handle);

I hope this helps,

Rhys

Answer 5

user2 = { 
          handle :"mytext", 
          alertName: function(){
                     alert(this.handle);}
        };

user2.handle;  //"mytext"
user2.alertName()  // alerts "mytext"

handle is a property of the object, so you need to access the property of the object via this which refers to the object.