JavaScript function access to object property

Question

Why does the following code return just an empty string:

var a = {
     name:"321",
     foo: function(){
        console.log(name);
    }
}

a.foo();

Check the browser's console. It should print nothing. Change name to this.name and you should see 321 printed! — Noah
– Noah, Commented Jul 26, 2016 at 16:19
@Noah, actually it will print something. Empty string! See window.name — Patrick Roberts
– Patrick Roberts, Commented Jul 26, 2016 at 16:21

Rich Linnell · Accepted Answer · 2016-07-26 16:19:54Z

7

because you haven't scoped name to anything so it's looking for a global variable. try replacing

console.log(name);

with

console.log(this.name);

answered Jul 26, 2016 at 16:19

Rich Linnell

9935 silver badges14 bronze badges

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

6 Comments

user2598794 Over a year ago

I understand that 'this.name' works. I just wonder why function hasn't access to 'name' property.

DrakaSAN Over a year ago

@user2598794 Because without this, the code will search a scoped variable named name, and another property of the same object isn t considered inside the scope. If you had a global var name, you would see it value.

user2598794 Over a year ago

@DrakaSAN Why 'name' in the object isn't considered inside the scope? And where it starts the search?

DrakaSAN Over a year ago

@user2598794 In your example, it start inside a.foo, then continue in the global code. I don't know the reason JS act like that though.

mcfedr Over a year ago

JS is built on functions and their closures. The associated object can easily change, and a single function could be in multiple objects.

|

matharumanpreet00 · Accepted Answer · 2016-07-26 16:27:29Z

1

you can use this keyword like this - console.log(this.name); .In result of your code, you see an empty string and not a undefined error because window.name variable already exists and has nothing to do with the name variable in your object

answered Jul 26, 2016 at 16:27

matharumanpreet00

3092 silver badges5 bronze badges

Comments

DrakaSAN · Accepted Answer · 2016-07-27 08:38:51Z

1

Following comments on Rich Linnell answer:

foo is for the object's function scope exemple, and bar for callbacks's scopes.

Code:

var foo = "global",
    bar = "global",
    a = {
    foo: (callback) => {
        // var foo = 'local';
        console.log('foo: ' + foo);
        callback();
    }
};

(() => {
    // var bar = "parent";
    a.foo(() => {
        // var bar = "local";
        console.log('bar: ' + bar);
    });
})();

edited Jul 27, 2016 at 8:38

answered Jul 26, 2016 at 16:39

DrakaSAN

7,9268 gold badges58 silver badges98 bronze badges

2 Comments

user2598794 Over a year ago

I commented out only the '1' name and it prints me "name: 3". And if I commented '1' and '3' it prints empty string. Looks like it doesn't see function scope at all.

DrakaSAN Over a year ago

@user2598794: Ah, yes, I forgot that in that case it skip to the global scope, unlike callbacks. I ve edited my example.

Collectives™ on Stack Overflow

JavaScript function access to object property

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related