JavaScript Object Question: get the property value of an object using the object name

Question

I would like to ask a question about javascript properties of an object. In the code below I have a javascript object. I would like to use the property "testName" inside the function "testFunction". I find out that the "this.testName" doesn't work in javascript object but if I do something like "TestObject.testName", it works properly. So in general, is it wrong to get the values of properties like "TestObject.testName" inside of the objects' functions?

const TestObject= {
    testName:"testValue",
    testFunction: ()=>{
        var result = TestObject.testName+ "result"; 
        return result ;
    }
} ```

_"I find out that the "this.testName" doesn't work in javascript"_ - it works but in your code it doesn't because of the arrow function. Any function that is supposed to be called as a _method_ should be declared using a regular function: `testFunction: function() { ... }` or using shorthand method syntax; `testFunction() { ... }` — Yousaf, Jun 10 '21 at 10:34
see the dupe about why `this` doesn't work, to answer the question as asked, yes, it is wrong (mostly). On a more general note, it's better to use classes rather than "objects with functions". — georg, Jun 10 '21 at 11:01

mrblue · Answer 1 · 2021-06-10T10:33:41.833

1

use this.testName instead of TestObject.testName

You can read more about this here: https://www.w3schools.com/js/js_this.asp

@edit

Sorry, I didn't noticed that you've used arrow function. Try to use a regular function instead. Arrow functions are chaning the way that this keyword works

const TestObject= {
    testName:"testValue",
    testFunction: function(){
        var result = this.testName+ "result"; 
        return result ;
    }
}

You can find more information about it here: Arrow Functions and This

edited Jun 10 '21 at 10:33

answered Jun 10 '21 at 10:25

mrblue

237
1
12

It would result in `undefinedresult` as OP already mentioned it. *"this.testName" doesn't work in javascript object* – DecPK Jun 10 '21 at 10:26
I get an error => TypeError: Cannot read property 'testName' of undefined – Dennis Jun 10 '21 at 10:27
testName's scope is limited to TestObject so accessing it directly via `this` will not work. You'll have to go through TestObject. There is no workaround. You can do it like `this.TestObject.testName` though. – Beshambher Chaukhwan Jun 10 '21 at 10:29
OK. but without using arrow function it works ! I thought the arrow function is the same as the regular function... – Dennis Jun 10 '21 at 10:33
@BeshambherChaukhwan - 1. It's not a matter of scope, and 2. `this.TestObject.testName` won't work. – T.J. Crowder Jun 10 '21 at 10:33
@Dennis - No, not at all. Arrow functions have several differences from traditional functions and methods. More [here](https://stackoverflow.com/questions/45896230/arrow-vs-classic-method-in-es6-class) and [here](https://stackoverflow.com/questions/43558721/arrow-function-and-this) and (er) in Chapter 3 of my recent book (links in my profile). :-) – T.J. Crowder Jun 10 '21 at 10:35

T.J. Crowder · Accepted Answer · 2021-06-10T10:42:40.733

So in general, is it wrong to get the values of properties like "TestObject.testName" inside of the objects' functions?

Not for singleton objects like that one, no, it's perfectly fine (you've used const, so no one can reassign TestObject to be something else). That said, the reason it's not working is that you've used an arrow function, not a traditional function or a method. If you used a traditional function or a method, this would work just fine (but keep reading):

// Traditional function
const TestObject1 = {
    testName:"testValue",
    testFunction: function() {
        var result = this.testName+ "result"; 
        return result ;
    }
};

console.log(TestObject1.testFunction());

// Method
const TestObject2 = {
    testName:"testValue",
    testFunction() {
        var result = this.testName+ "result"; 
        return result ;
    }
};

console.log(TestObject2.testFunction());

I said "it would work just fine," but that's only true if this is set to TestObject when calling testFunction. It's possible to call testFunction such that this won't be set correctly, see the answers to How to access the correct this inside a callback? for details about those situations and how to handle them.

JavaScript Object Question: get the property value of an object using the object name

2 Answers2