Object output returning NAN

Question

This is my code

const products = 
      [ 
          {

    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
    "coefficient":2,
    "price": () => 2000 * this.coefficient
  },
  {

    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
    "coefficient":3, 
    "price": () => 2000 * this.coefficient
  },
]

I want to return the price depends on the coefficient, but when i excute

products[0].price() // return NaN

how can i fix that ?

Thanks.

score 6 · Accepted Answer · edited Aug 26 '19 at 12:36

The this in an arrow function refers to the class scope, that is an empty object; in that case, yo refer to the the object scope you must use the full function syntax.

Try this:

products = [
  {
    id: 1,
    title:
      "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    body:
      "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
    coefficient: 2,
    price: function() {
      return 2000 * this.coefficient;
    }
  },
  {
    id: 2,
    title: "qui est esse",
    body:
      "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
    coff: 3,
    price: function() {
      return 2000 * this.coefficient;
    }
  }
];

console.log(products[0].price()) // 4000
console.log(products[1].price()) // 6000

Explanation: as you can see, the "this" in an arrow function referes to the class scope, that is an empty object in that case, To refer to the the object scope you must use the full function syntax. — filipe, Jun 11 '19 at 10:52

score 5 · Answer 2 · answered Jun 11 '19 at 10:38

5

This is due to the way that arrow functions handle the this scope. In this case, replacing the arrow function (() => this.something) with a traditional JS function (function() { return this.something; }) will solve your problem.

answered Jun 11 '19 at 10:38

Haroldo_OK

5,235
3
31
61

score 3 · Answer 3 · answered Jun 11 '19 at 10:41

For the arrow functions, value of this is not based on the object reference using which the function was executed. Rather it uses the this reference from the closure where it was declared. Check the documentation here on MDN. In your scenario this.coefficient would be undefined, which when multiplied with 2000 results in NaN.

You can change the arrow functions to proper functions if you need this to refer to the object reference on which price function was called. Changed code should be something like this:

products = [
  {
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
    "coefficient":2,
    "price": function() { return 2000 * this.coefficient; }
  }
];

score 0 · Answer 4 · answered Jun 11 '19 at 10:46

You can use this :

                const products =
                [
                    {

                        "id": 1,
                        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
                        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
                        "coefficient": 2,
                        price() {
                            return 2000 * this.coefficient
                        }
                    },
                    {

                        "id": 2,
                        "title": "qui est esse",
                        "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
                        "coefficient": 3,
                        price() {
                            return 2000 * this.coefficient
                        }

                    },
                ]

Nice way to represent the function. – filipe Jun 11 '19 at 10:56 — filipe, Jun 11 '19 at 10:56

Object output returning NAN

4 Answers4