title: Why is my array reduce function return NaN?
body: <p>I have two arrays, one array has just attributes like y in the array which contains random numbers <code>yIsGiven()</code> 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 <code>zIsGiven()</code>.</p>
  <p>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 <strong>NaN</strong>.</p>
  <p>I want to sum all values in my array up, how can i do this with <code>zIsGiven()</code>?</p>
  <p>My app.component.html:</p>
  <pre><code>&lt;h4&gt;My array is in total:&lt;/h4&gt;
  &lt;p&gt;{{yIsGiven()}}&lt;/p&gt;
  
  &lt;h4&gt;But if I change my attribute from y to z I get:&lt;/h4&gt;
  &lt;p&gt;{{zIsGiven()}}&lt;/p&gt;
  
  </code></pre>
  <p>My app.component.ts:</p>
  <pre><code>yIsGiven() {
      var temp = [
        {
          name: &quot;Agency&quot;,
          y: 110, /* All attributes are y */
          drilldown: {
            name: &quot;Agency&quot;,
            categories: [&quot;APPS &amp; SI&quot;, &quot;ERS&quot;],
            data: [24, 8]
          }
        },
        {
          name: &quot;ER&quot;,
          y: 60,
          drilldown: {
            name: &quot;ER&quot;,
            categories: [&quot;APPS &amp; SI&quot;, &quot;ERS&quot;],
            data: [7, 53]
          }
        },
        {
          name: &quot;Direct&quot;,
          y: 60,
          drilldown: {
            name: &quot;Direct&quot;,
            categories: [&quot;APPS &amp; SI&quot;, &quot;ERS&quot;],
            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: &quot;Agency&quot;,
          z: 110 /* For example this is now z and not y */,
          drilldown: {
            name: &quot;Agency&quot;,
            categories: [&quot;APPS &amp; SI&quot;, &quot;ERS&quot;],
            data: [24, 8]
          }
        },
        {
          name: &quot;ER&quot;,
          y: 60,
          drilldown: {
            name: &quot;ER&quot;,
            categories: [&quot;APPS &amp; SI&quot;, &quot;ERS&quot;],
            data: [7, 53]
          }
        },
        {
          name: &quot;Direct&quot;,
          y: 60,
          drilldown: {
            name: &quot;Direct&quot;,
            categories: [&quot;APPS &amp; SI&quot;, &quot;ERS&quot;],
            data: [31, 29]
          }
        }
      ];
  
      var reduced = temp
        .map(function(obj) {
          return obj.y;
        })
        .reduce(function(a, b) {
          return a + b;
        });
  
      return reduced;
    }
  </code></pre>
  <p>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.</p>
  <p>I would appreciate every help, thank you!</p>
  <p>Working:
  <a href="https://stackblitz.com/edit/angular-ivy-tanetr?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-tanetr?file=src%2Fapp%2Fapp.component.html</a></p>
  <p>Best regards</p>