JavaScript returns "result" instead of error or exception

Question

I was testing a very simple code and I was expected to get error but I got a string "result" returned by console!

Here is the code:

var person = { name: "Mohammad", last_name: "Kermani"};

var show_person = function (age){
    console.log(this.name +" is "+ age + " years old");
}

Now you now we can't use this.name when JavaScript does not know what this (object) is, then we need to use call or apply.

Now when I wrote this, I got "result" string (instead of error or warning):

show_person(20); //Returns: result is 20 years old

See Jsfiddle and what console returns.

The code with call should be like:

show_person.call(person, 20);  //Returns: Mohammad is 20 years old

What is the string "result" and why JavaScript does not return error when it does not have access to this.name?

And what will happen if we don't use an object in a function and want to get one of its properties? (Like here, I wanted to get name of person object)

Possible duplicate of [How does the "this" keyword work?](http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Andreas, Jun 07 '16 at 10:36
the output of the expression `show_person(20); ` is is 20 years old in chrome. — viveksinghggits, Jun 07 '16 at 10:36

score 5 · Accepted Answer · answered Jun 07 '16 at 10:34

5

In that context, this refers to the global window object. And window.name is "result" on jsFiddle, as it is the result frame.

answered Jun 07 '16 at 10:34

meskobalazs

15,741
2
40
63

Thanks, Does this mean when I don't tell JavaScript "This is the object you should use" it will use window objects? – Mohammad Kermani Jun 07 '16 at 10:37
1

In web browsers, on the load of the page, `this` always points to the global `window` object. That's why you can access e.g. the `setTimeout()` function, or the `sessionStorage`, etc.. – meskobalazs Jun 07 '16 at 10:38
window is the root Document model OBJECT. everything rest resides within window. Consider it as a browser's window where all your web project lives. – Giorgi Tsiklauri Jun 07 '16 at 10:47

score 1 · Answer 2 · answered Jun 07 '16 at 10:38

1

Javascript perfectly knows what this refers to. As long as your function is not enclosed in some particular environment, this reference will point to global object window.

answered Jun 07 '16 at 10:38

Giorgi Tsiklauri

9,715
8
45
66

The value of `this` primarily depends on how the function is called, not where it is defined. I don't understand what you mean by *"As long as your function is not enclosed in some particular environment"*. – Felix Kling Jun 07 '16 at 11:05
Residing in environment means that it's in global namespace rather than any particular one. So, global namespace in JS is window. I don't think I've said somethign unclear – Giorgi Tsiklauri Jun 07 '16 at 11:15
In `function foo() { function bar() { console.log(this); } bar(); }`, `this` will refer to `window` as well, even though `bar` is not global. But maybe that's not what you meant and I am misunderstanding you? – Felix Kling Jun 07 '16 at 11:23

score 1 · Answer 3 · answered Jun 07 '16 at 10:54

1

You are probably looking for something like this:

function Person (opt) {
    this.name = opt.name;
    this.lastName = opt.lastName;
    this.age = opt.age;
}

Person.prototype.showPerson = function () {
    console.log(this.name, 'is', this.age, 'old');
}

var muhammed = new Person({
    name: 'Muhammed',
    lastName: 'Kermani',
    age: 20
});

console.log(muhammed.showPerson());
console.log(muhammed.name);
console.log(muhammed.lastName);

answered Jun 07 '16 at 10:54

Rudi

2,987
1
12
18

No, I was not. I just did not know why "result" was returning out. Thanks – Mohammad Kermani Jun 07 '16 at 11:02
No problem. That question was already answered, so this was just to show an example with the correct `this` context. Using call, apply or bind is a needless workaround in your example... – Rudi Jun 07 '16 at 11:21
Thank you. That helps me to understand more – Mohammad Kermani Jun 07 '16 at 12:18

score 0 · Answer 4 · answered Jun 07 '16 at 10:39

Here is a working piece of code doing what you are trying to achieve :

function PersonShower(){
  this.person = { name: "Mohammad", last_name: "Kermani"};

}
PersonShower.prototype.show_person = function (age){
    console.log(this.person.name +" is "+ age + " years old");
}
var p = new PersonShower();
p.show_person(20);

The PersonShower is now an object with the person property (which could be passed as a constructor argument) Then a show_person method is defined for the object prototype.

This way, using this refers to the PersoShower instance.

https://jsfiddle.net/57t9sadr/4/

Hope it helps

score 0 · Answer 5 · answered Jun 07 '16 at 11:02

window.name is a reserved reference used to identify window objects. Often used to identify frames for data transport.

JSFiddle uses frame named result from which you are getting that reference from. By contrast, JSBin uses "JS Bin Output" as window.name

By default it's going to be an empty string. This is why window.name will in most browsers be an empty string, which is an going to be an exception comparing to other undefined properties.

You can learn more about window.name on MDN.

I can see that you seem to understand lexical scope. Let me know if you'd like me to explain how binding and lexical scope works.

JavaScript returns "result" instead of error or exception

5 Answers5