Is using flat map in such a way is proper?

Question

Basically while answering one of the question on SO related to nested array flattening i have answered question with using recursive flattening.

var exampleArray = [ [1,2,3,4], [1,2,[1,2,3]], [1,2,3,4,5,[1,2,3,4,[1,2,3,4]]] ];



function findArrayLengths(input) {
  return input.reduce((op,cur)=>{
    return Array.isArray(cur) ? op.concat(findArrayLengths(cur)) : op.concat(cur)
  },[])
}

let op = exampleArray.map(e=>{
  return findArrayLengths(e).length
})

console.log(op);

But i have seen this code also seems to work fine ( flat with infinite depth) i have read a bit about Array.prototype.Flat

var arr = [ [1,2,3,4], [1,2,[1,2,3]], [1,2,3,4,5,[1,2,3,4,[1,2,3,4]]], [[1,2,3,4], [1,2,[1,2,3]], [1,2,3,4,5,[1,2,3,4,[1,2,3,4]]]] ];

let op = arr.map(e=> e.flat(Infinity).length);

console.log(op);

So the question is. is it a proper way to do deep flattening with flat like this or there are consequences. ?

Here's a link to that question and you can check up more here https://stackoverflow.com/a/53844891/9624435

Answer 1

Here is the es6 way, although it can further be used with the use of .reduce instead of forEach

const exampleArray = [ [1,2,3,4], [1,2,[1,2,3]], [1,2,3,4,5,[1,2,3,4,[1,2,3,4]]] ];

const flatten = (items) => {
  const flat = [];
  items.forEach(item => {
    if (Array.isArray(item)) {
      flat.push(...flatten(item));
    } else {
      flat.push(item);
    }
  });
  return flat;
}

const do_flat = (arr) =>  arr.map( (curr) => flatten(curr).length);

const output = do_flat(exampleArray);

console.log({output});

Answer 2

is it a proper way to do deep flattening with flat like this or there are consequences. ?

No consquences, Array#flat(Infinity) is fine. Just the issue with Browser/backwards compatibility.

I was unsure wether the spec defines how to deal with the passed depth and therefore Infinity is a safe value across all browser; long story short, it is defined and safe to use.

---

But I have an issue with your fallback code. Using Array#concat() the way you do creates a lot of intermediate (and unnecessary) Arrays.

A better approach would be:

var exampleArray = [
  [1, 2, 3, 4],
  [1, 2, [1, 2, 3]],
  [1, 2, 3, 4, 5, [1, 2, 3, 4, [1, 2, 3, 4]]]
];

function _flatten(acc, value) {
  if (Array.isArray(value)) {
    return value.reduce(_flatten, acc);
  }

  acc.push(value);
  return acc;
}

function flatten(array) {
  return array.reduce(_flatten, []); 
}

console.log(exampleArray.map(e => flatten(e).length));


//or since you already named your function `findArrayLength`
function _findArrayLength(count, value) {
  return Array.isArray(value) ? value.reduce(_findArrayLength, count) : count + 1;
}

function findArrayLength(array) {
  return array.reduce(_findArrayLength, 0);
}

console.log(exampleArray.map(findArrayLength));

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

Or a more generic implementation

var exampleArray = [
  [1, 2, 3, 4],
  [1, 2, [1, 2, 3]],
  [1, 2, 3, 4, 5, [1, 2, 3, 4, [1, 2, 3, 4]]]
];

function reduceRecursive(fn, init) {
  function _(acc, value, index, array) {
    return Array.isArray(value) ? value.reduce(_, acc) : fn(acc, value, index, array);
  }
  return function(array){
    return array.reduce(_, typeof init === "function" ? init() : init);
  }
}

var flatten = reduceRecursive(function(result, value) {
  result.push(value);
  return result;
}, Array);

console.log(exampleArray.map(e => flatten(e).length));

var findArrayLength = reduceRecursive(function(count) {
  return count + 1;
}, 0);

console.log(exampleArray.map(findArrayLength));

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