Arrow function in the "quotient" object example not working correctly

[NaderBhrr]

I was trying to understand how the "quotient" object works.

const quotient = {
  numbers: [1, 2, 3, 4, 5, 6, 7],
  results: [ ],
  divideFn: function (divisor) {
    return this.numbers.map(function (divident) {
      if (divident % divisor === 0) {
        return this.results.push(divident);
      }
    });
  },
};

But I don't see any reason for returning values when you use "push" to place values in the results array.

Secondly, if you call the "DivideFn" more than once you will get undesirable results, fore example:

quotient.divideFn(3)
const byThree = quotient.results

quotient.divideFn(2)
const byTwo = quotient.results

I'd be thankful if you explain your thought process

[tpiros]

@NaderBhrr - this example is very useful to demonstrate the difference between using the function keywords vs using the arrow function (=>).

In the original example, we can see that this.results.push() will not work, because the value of this is referencing the place where the function was executed from and not the object where the function belongs to. (in fact console.log(this) added to the .map method would reveal this.

One way to get around this is to bind this using the .bind() method:

const quotient = {
  numbers: [1, 2, 3, 4, 5, 6, 7],
  results: [],
  divideFn: function (divisor) {
    return this.numbers.map(
      function (divident) {
        if (divident % divisor === 0) {
          return this.results.push(divident);
        }
      }.bind(this)
    );
  },
};

quotient.divideFn(3);
console.log(quotient.results);

or by replacing the function keyword with =>:

const quotient = {
  numbers: [1, 2, 3, 4, 5, 6, 7],
  results: [],
  divideFn: function (divisor) {
    return this.numbers.map((divident) => {
      if (divident % divisor === 0) {
        return this.results.push(divident);
      }
    });
  },
};

quotient.divideFn(3);
console.log(quotient.results);

I hope this helps.

[NaderBhrr]

@tpiros
Thank you for the reply.

But as I mentioned in the first post, the code itself is not producing the expected results.

If you use debugger to see what the method actually returns, the purpose of returning from the "divideFn" method is not clear.

Secondly as I previously mentioned, calling the method on this object more than once will fill the results array with previous executions of the method.

quotient.divideFn(3)
const byThree = quotient.results

quotient.divideFn(2)
const byTwo = quotient.results

So, I was wondering what the correct way of creating this object might be, not just for understanding the usage of arrow function to handle the "this"

Thanks in advance