Javascript - calling an external function as a property of an object

Viewed 795

I have an array of objects, at this moment there is just one object inside. In this object i have a function that elaborate some properties of the same object. The function is processed outside the array, but the result is NaN, i dont know how pass correctly the values..

Example

let arrayObj = [{
  number1: 1,
  number2: 2,
  sum: sum(this.number1 , this.number2)
}
]

function sum(n1, n2) {
  return console.log(n1 + n2);
}

Result: NaN.

for (let i in arrayObj){
  console.log(arrayObj[i])
}

Result: {number1: 1, number2: 2, sum: undefined}

5 Answers

If you want a fully usable object during object creation, then use a Function object.

let arrayObj = [new function(){
  this.number1 = 1;
  this.number2 = 2;
  this.sum = sum(this.number1 , this.number2)
}]

// minor edit to return the sum instead of returning the result of the console log
function sum(n1, n2) {
  console.log(n1 + n2);
  return n1 + n2;
}

for (let i in arrayObj){
  console.log(arrayObj[i])
}

However, if you are in need of this function at a later time, and want it accessible for all of those objects, then stop using anonymous objects and create an actual class or prototype.

Prototype:

function Point(number1, number2){
 this.number1 = number1;
 this.number2 = number2;
}
Point.prototype.sum = function(){
 return this.number1 + this.number2;
}

let arrayObj = [
 new Point(1,2),
 new Point(3,4),
 new Point(15,30)
];

for (let i in arrayObj){
  console.log(arrayObj[i].sum())
}

Class:

class Point {
  constructor(number1, number2){
    this.number1 = number1;
    this.number2 = number2;
  }
  get sum(){
      return this.number1 + this.number2;
  }
}

let arrayObj = [
 new Point(1,2),
 new Point(3,4),
 new Point(15,30)
];

for (let i in arrayObj){
  console.log(arrayObj[i].sum)
}

You can add that property to the object when you are iterating over it.

const arrayObj = [{
    number1: 1,
    number2: 2,
}];

function sum(n1, n2) {
  return n1 + n2;
}

for (let i in arrayObj){
  arrayObj[i].sum = sum(arrayObj[i].number1, arrayObj[i].number2)
  console.log(arrayObj[i])
}

There has a simple solution. you can put an instant function in your sum property and under that function, send the other required values of the object by converting them into variables. See below:

function sum(n1, n2) {
    return n1 + n2;
}
const arrayObj = [{
        'number1': 1,
        'number2': 2,
        'sum': function () {
            let num1 = this.number1, num2 = this.number2;
            return sum(num1, num2);
        }
    }];

console.log(arrayObj.sum())

You don't have to make a seperate function, you can also write the sum function in the object itself. Now when you access the sum field in your object, it will sum the two values and return it.

let arrayObj = [{
    number1: 1,
    number2: 2,
    sum: function() {
        return this.number1 + this.number2;
    }
}]

console.log(arrayObj[0].sum());

I have found another interesting solution (I don't remember where I had found it.) for this problem. Using getter function of javascript the problem can solve easily.You can use this in your object directly to use the external function. If a property (key) of an object se the external function to get a value and it have to behave like normal "key:value" pair (not being a method/function), then the getter function is the best way to use to get the value. To know more about it please read it.

function sum(n1, n2) {
    return n1 + n2;
}
const arrayObj = 
      {
        get sum() {return sum(this.number1, this.number2)},
        number1: 1,
        number2: 2,
        number3: 4,
        get totalsum() {return sum(this.sum, this.number3)} //using the sum property (that used external function) in another property.
      };


console.log(arrayObj);
console.log('the sum of '+arrayObj.number1+' & '+arrayObj.number2+' is: '+arrayObj.sum); 

console.log('the sum of '+arrayObj.sum+' & '+arrayObj.number3+' is: '+arrayObj.totalsum);

Related