why property 'a' is not accessible from 'fn'

Question

var red = {a: 2};

red.fn = function(b){
    console.log("A: "+a ", B : "+b);
}

red.fn(20);

this gives error:

a is not defined

But i suspect a is already available as a global object to the function fn then why is it not accessible. Any explanation would be helpful.

`this.a` will be accessible. As `this` inside `fn()` will refer to `red` object when called as `red.fn(20)`. The error clearly states that `a` is not defined, `red.a` is. — Tushar, Jan 28 '17 at 13:21

score 6 · Answer 1 · edited May 23 '17 at 12:33

6

Because unlike some other languages, the this. qualifier is not optional in JavaScript (because it works fundamentally differently from most other languages that have this; more here). You need to write it explicitly:

red.fn = function(b){
    console.log("A: " + this.a + ", B : " + b);
// ---------------------^^^^^
}

(You were also missing + in there...)

edited May 23 '17 at 12:33

Community

1
1

answered Jan 28 '17 at 13:22

T.J. Crowder

1,031,962
187
1,923
1,875

Good catch on `+` there. :) – Tushar Jan 28 '17 at 13:24

Console-buche · Answer 2 · 2017-01-28T13:59:45.083

0

Here you go

var red = {a: 2};

red.fn = function(b){
    console.log("A: "+this.a+ ", B : "+b);    //update this line
}

red.fn(20);

EDIT : for a to be accessible within fn as you first tried, it should have been declared as a global variable in the first place, such as var a = 2. It'd still be a valid way to access it as a global object variable, but then you should have gone for console.log("A: "+red.a+ ", B : "+b);

Now, this.a implies you're using the object's properties (edited after RobG's comment), where a is accessible.

edited Jan 28 '17 at 13:59

answered Jan 28 '17 at 13:22

Console-buche

405
3
12

3

You should add some explanation about what you changed. – Carcigenicate Jan 28 '17 at 13:23
1

"*this.a implies you're using the object's scope*. Objects have properties, functions (i.e. execution contexts) have scope. ;-) – RobG Jan 28 '17 at 13:56

score 0 · Answer 3 · answered Jan 28 '17 at 13:44

Here the variable a would be translated to window.a which is undefined.

So it takes the matter up to the scope of the variable a. Like already mentioned in the answers in the post, we could use the encapsulated variable by using this.a or we could also use red.a.

Including few examples to explore further:

window.a:

a = 5;

var red = {
  a: 2
};

red.fn = function(b) {
  console.log("A: " + a + ", B : " + b);
}

red.fn(20);

object.a or red.a:

a = 5;

var red = {
  a: 2
};

red.fn = function(b) {
  console.log("A: " + red.a + ", B : " + b);
}

red.fn(20);

How it should translate as posted with local function scope:

var red = function() {
  var a = 2;

  this.fn = function(b) {
    console.log("A: " + a + ", B : " + b);
  };
};

var redObj = new red();
redObj.fn(20);

This explanation cleared all my doubts. more than what i could have asked for. Big Thanks. — Vignesh Sharma, Jan 28 '17 at 14:19

why property 'a' is not accessible from 'fn'

3 Answers3