JavaScript array method chaining

Question

I'm trying to learn array method chaining and am using a basic example - https://jsbin.com/surizinifi/edit?js,console

const data = [
  {
    name: 'Butters',
    age: 3,
    type: 'dog'
  },
  {
    name: 'Lizzy',
    age: 6,
    type: 'dog'
  },
  {
    name: 'Red',
    age: 1,
    type: 'cat'
  },
  {
    name: 'Joey',
    age: 3,
    type: 'dog'
  },
];


const ages = data
  .filter(animal => animal.type === 'dog')
  .map(animal => animal.age * 7)
  .reduce((sum, animal) => sum + animal.age)

console.log('ages', ages);

I'm getting "NaN" returned as a posed to a numeric output (e.g. 84). Any ideas what I'm doing wrong here?

In your reduce you don't gen an animal object but animalAge number - the map from the previous step gives you an array of numbers. — VLAZ
– VLAZ, Commented Sep 30, 2019 at 8:40

Nina Scholz · Accepted Answer · 2019-09-30 08:39:14Z

1

By the mapping, you get an array of numbers and then you need no property for summing.

A good idea is to use a start value for the accumulator and prevent to use both first values of the array in the first loop.

const data = [
  {
    name: 'Butters',
    age: 3,
    type: 'dog'
  },
  {
    name: 'Lizzy',
    age: 6,
    type: 'dog'
  },
  {
    name: 'Red',
    age: 1,
    type: 'cat'
  },
  {
    name: 'Joey',
    age: 3,
    type: 'dog'
  },
];


const ages = data
  .filter(animal => animal.type === 'dog')
  .map(animal => animal.age * 7)
  .reduce((sum, age) => sum + age, 0)

console.log('ages', ages);

answered Sep 30, 2019 at 8:39

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

str · Accepted Answer · 2019-09-30 08:41:42Z

1

The method .map() returns the array of the number, there is no property to sum

.reduce((sum, age) => sum + age)

const data = [
  {
    name: 'Butters',
    age: 3,
    type: 'dog'
  },
  {
    name: 'Lizzy',
    age: 6,
    type: 'dog'
  },
  {
    name: 'Red',
    age: 1,
    type: 'cat'
  },
  {
    name: 'Joey',
    age: 3,
    type: 'dog'
  },
];


const ages = data
  .filter(animal => animal.type === 'dog')
  .map(animal => animal.age * 7)
  .reduce((sum, age) => sum + age, 0)

console.log('ages', ages);

edited Sep 30, 2019 at 8:41

str

45.5k18 gold badges117 silver badges134 bronze badges

answered Sep 30, 2019 at 8:38

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Mischa · Accepted Answer · 2019-09-30 08:58:12Z

0

You could also pass on a new array of animals to the reduce-method where each animal's age was multiplied by 7:

const data = [
  {
    name: 'Butters',
    age: 3,
    type: 'dog'
  },
  {
    name: 'Lizzy',
    age: 6,
    type: 'dog'
  },
  {
    name: 'Red',
    age: 1,
    type: 'cat'
  },
  {
    name: 'Joey',
    age: 3,
    type: 'dog'
  },
];


const ages = data
  .filter(animal => animal.type === 'dog')
  .map(animal => ({
    ...animal,
    age: animal.age * 7
   }))
  .reduce((sum, animal) => sum + animal.age, 0)

console.log('ages', ages);

answered Sep 30, 2019 at 8:58

Mischa

1,70110 silver badges15 bronze badges

Collectives™ on Stack Overflow

JavaScript array method chaining

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related