Weird behavior of reduce method in Javascript

Question

Anyone can explain me this situation?

In the second call the function, the result is {cat: 2, cat,cat: 1, dog: 1, frog: 1}.

However, I thought that the result was going to be {cat: 4, dog: 1, frog: 1}.

What's going on here?

var animals = ['cat', 'cat', ['cat'], 'dog', 'frog'];

var otherAnimals = ['cat', 'cat', ['cat', 'cat'], 'dog', 'frog'];

function reducingArrays(arraySource) {
  var countedData = arraySource.reduce(function(allItems, item) {
    if (item in allItems) {
      allItems[item]++;
    } else {
      allItems[item] = 1;
    }
    return allItems;
  }, {});

  console.log(countedData);
}

reducingArrays(animals); // {cat: 3, dog: 1, frog: 1}

reducingArrays(otherAnimals); // {cat: 2, cat,cat: 1, dog: 1, frog: 1}
// What I expected: {cat: 4, dog: 1, frog: 1}

['cat'] is cast to 'cat'. ['cat','cat'] is cast to 'cat,cat'. You're using arrays as object keys, which converts them to strings. You want some kind of recursive function. — Niet the Dark Absol
– Niet the Dark Absol, Commented Jan 25, 2018 at 13:52

Faly · Accepted Answer · 2018-01-25 14:12:23Z

1

You can convert single element to array:

var animals = ['cat', 'cat', ['cat'], 'dog', 'frog'];

var otherAnimals = ['cat', 'cat', ['cat', 'cat'], 'dog', 'frog'];

function reducingArrays(arraySource) {
  var countedData = arraySource.reduce(function(allItems, item) {
    var arr = Array.isArray(item) ? item : [item];
    allItems[arr[0]] = (allItems[arr[0]] || 0) + arr.length;
    return allItems;
  }, {});

  console.log(countedData);
}

reducingArrays(animals);

reducingArrays(otherAnimals);

edited Jan 25, 2018 at 14:12

answered Jan 25, 2018 at 13:54

Faly

13.4k2 gold badges21 silver badges39 bronze badges

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

Comments

Mathew Berg · Accepted Answer · 2018-01-25 13:54:05Z

0

You have to handle if one of the objects is an array:

function reducingArrays(arraySource){
    var countedData = arraySource.reduce(function (allItems, item) {
        var items = [item];
        if(item.constructor === Array){
            items = item;
        }
        items.forEach(function(item){
            if (item in allItems) {
                allItems[item]++;
            } else {
                allItems[item] = 1;
            }               
        });
        return allItems;
    }, {});
    console.log(countedData);
}

answered Jan 25, 2018 at 13:54

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Comments

Nina Scholz · Accepted Answer · 2018-01-25 14:10:39Z

0

Yoh could use a check for array and use the same callback of reduce for nested arrays.

function reducingArrays(arraySource) {
    return arraySource.reduce(function iter(allItems, item) {
        if (Array.isArray(item)) {
            return item.reduce(iter, allItems);
        }
        allItems[item] = (allItems[item] || 0) +1;
        return allItems;
    }, {});
}


var animals = ['cat', 'cat', ['cat'], 'dog', 'frog'];
var otherAnimals = ['cat', 'cat', ['cat', 'cat'], 'dog', 'frog'];

console.log(reducingArrays(animals));      // { cat: 3, dog: 1, frog: 1}
console.log(reducingArrays(otherAnimals)); // { cat: 4, dog: 1, frog: 1 }

answered Jan 25, 2018 at 14:10

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Thomas · Accepted Answer · 2018-01-25 14:11:37Z

The first comment already explained, that this has to do with how Arrays are stringified since Object keys can only be strings.

Here a way how you can handle nested Arrays in your function.

function countAnimals(source) {
  function _count(allItems, item) {
    if (Array.isArray(item)) {
      return item.reduce(_count, acc);
    }

    if (item in allItems) {
      allItems[item]++;
    } else {
      allItems[item] = 1;
    }
    return acc;
  }

  //needs `source` to be an Array
  return source.reduce(_count, {});

  //this would also work, if `source` is a single animal.
  //like countAnimals('dog');
  //I prefer this approach because it is more flexible 
  //on what the function can deal with, 
  //and it doesn't cost me even a single extra line of code
  //return _count({}, source);
}


var animals = ['cat', 'cat', ['cat'], 'dog', 'frog'];
console.log("simple", countAnimals(animals));

var otherAnimals = ['cat', 'cat', ['cat', 'cat'], 'dog', 'frog'];
console.log("nested", countAnimals(otherAnimals));

//and a deeply nested structure
var moreAnimals = ['mouse', ['cat', ['dog', 'duck', ['frog']], 'cat'], 'dog', 'frog'];
console.log("multiple levels", countAnimals(moreAnimals));

.as-console-wrapper{top: 0;max-height: 100%!important}

Andy · Accepted Answer · 2018-01-25 15:01:36Z

0

If your array is only going to be nested one level deep you can use [].concat(...arr) to flatten it before you iterate over it with reduce.

In this example I've also made the condition a little more concise.

var animals = ['cat', 'cat', ['cat'], 'dog', 'frog'];
var otherAnimals = ['cat', 'cat', ['cat', 'cat'], 'dog', 'frog'];

function reducingArrays(arraySource) {
  return [].concat(...arraySource).reduce(function(allItems, item) {
    allItems[item] = allItems[item] || 0;
    allItems[item]++;
    return allItems;
  }, {});
}

const result = reducingArrays(animals);
const result2 = reducingArrays(otherAnimals);

console.log(result);
console.log(result2);

answered Jan 25, 2018 at 15:01

Andy

63.7k13 gold badges72 silver badges99 bronze badges

Collectives™ on Stack Overflow

Weird behavior of reduce method in Javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related