[Fixed] Why is my array reduce function return NaN?

Issue

I have two arrays, one array has just attributes like y in the array which contains random numbers yIsGiven() and one array, which is equal to the first array but with the one difference, that in this time all my attributes are y except for one, there is one z, also with random numbers zIsGiven().

My goal is to count all of them together, on my first array it works perfectly, but in my second array it doesn’t work just because I changed one y attribute to z and I get NaN.

I want to sum all values in my array up, how can i do this with zIsGiven()?

My app.component.html:

<h4>My array is in total:</h4>
<p>{{yIsGiven()}}</p>

<h4>But if I change my attribute from y to z I get:</h4>
<p>{{zIsGiven()}}</p>

My app.component.ts:

yIsGiven() {
    var temp = [
      {
        name: "Agency",
        y: 110, /* All attributes are y */
        drilldown: {
          name: "Agency",
          categories: ["APPS & SI", "ERS"],
          data: [24, 8]
        }
      },
      {
        name: "ER",
        y: 60,
        drilldown: {
          name: "ER",
          categories: ["APPS & SI", "ERS"],
          data: [7, 53]
        }
      },
      {
        name: "Direct",
        y: 60,
        drilldown: {
          name: "Direct",
          categories: ["APPS & SI", "ERS"],
          data: [31, 29]
        }
      }
    ];

    var reduced = temp
      .map(function(obj) {
        return obj.y;
      })
      .reduce(function(a, b) {
        return a + b;
      });

    return reduced;
  }

  zIsGiven() {
    var temp = [
      {
        name: "Agency",
        z: 110 /* For example this is now z and not y */,
        drilldown: {
          name: "Agency",
          categories: ["APPS & SI", "ERS"],
          data: [24, 8]
        }
      },
      {
        name: "ER",
        y: 60,
        drilldown: {
          name: "ER",
          categories: ["APPS & SI", "ERS"],
          data: [7, 53]
        }
      },
      {
        name: "Direct",
        y: 60,
        drilldown: {
          name: "Direct",
          categories: ["APPS & SI", "ERS"],
          data: [31, 29]
        }
      }
    ];

    var reduced = temp
      .map(function(obj) {
        return obj.y;
      })
      .reduce(function(a, b) {
        return a + b;
      });

    return reduced;
  }

I just can’t sum up all values in my array if I just change one value but what if I have different attributes in my array which I want to sum up? It just doesn’t work with array reduce, or I just can’t figure it out.

I would appreciate every help, thank you!

Working:
https://stackblitz.com/edit/angular-ivy-tanetr?file=src%2Fapp%2Fapp.component.html

Best regards

Solution

One of the variables in the array has the y property undefined, you can do this:

var reduced = temp
  .map(function(obj) {
    return obj.y;
  })
  .reduce(function(a, b) {
    if (b === undefined) return a;
    return a + b;
  }, 0);

to fix the error.