Is employing flat map in this manner considered appropriate?

Question

Is employing flat map in this manner considered appropriate?

When I was responding to a question on Stack Overflow about flattening nested arrays, I provided a solution 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);

However, I noticed that another code snippet also works well for deep flattening (flat with infinite depth). I looked into 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 are there any consequences? ?

You can find more information and the original question here.

javascript arrays recursion flat

Answer 1

Answer №1

One way to approach this problem in ES6 is by utilizing the .reduce method 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

One way to approach this problem in ES6 is by utilizing the .reduce method 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 3

Answer №2

Is it acceptable to use Array#flat(Infinity) for deep flattening, or are there any drawbacks?

There are no consequences; Array#flat(Infinity) works fine. The only issue is with browser/backwards compatibility.

I wasn't sure if the specification specifies how to handle the passed depth, so using Infinity should be safe across all browsers; in short, it is clearly defined and safe to use.

However, I do have a concern about your fallback code. The way you're using Array#concat() creates unnecessary intermediate 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}

Alternatively, a more generic implementation can be used:

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}

Answer 4

Is it acceptable to use Array#flat(Infinity) for deep flattening, or are there any drawbacks?

There are no consequences; Array#flat(Infinity) works fine. The only issue is with browser/backwards compatibility.

I wasn't sure if the specification specifies how to handle the passed depth, so using Infinity should be safe across all browsers; in short, it is clearly defined and safe to use.

However, I do have a concern about your fallback code. The way you're using Array#concat() creates unnecessary intermediate 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}

Alternatively, a more generic implementation can be used:

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}

Is employing flat map in this manner considered appropriate?

Answer №1

Answer №2

Similar questions

What is the process for switching directories and renaming a file when uploading in nodeJs?

Using Handlebars: Send the position of every item to a nested statement

The function passport.authenticate does not exist / User.findone is not a valid function

Dealing with code issues in Subscription forms using AJAX and JQuery

What is the best way to add a separator in a b-dropdown menu once the options have been loaded using Vue?

Mastering the art of manipulating arrays with jquery

Switch up Three.js texture in externally imported Collada model

leveraging hooks in NextJS app router for static page generation

Dealing with large integers in JSON when inserting them into a MongoDB database can be a complex task

What is the best way to recreate the functionality of nth-child in JavaScript?

Angular: The dilemma of choosing between updating individual properties or reassigning objects

The Function(JS) is specifically designed to only function within the topmost div or quote

Can you explain the purpose of CLOUDINARY_DEFAULT_URL and CLOUDINARY_DEFAULT_PUBLICID to me?

Should arrays of objects be kept in databases or JavaScript files?

Limiting character elements in an array in PostgreSQL

callback triggering state change

What is the best way to retrieve the items stored within the array generated by a JavaScript function?

The property of Three.js Quaternion is immutable and cannot be reassigned

How can Request.UrlReferrer be configured using client-side JavaScript? If it can be done, what is the process?

Javascript redirection not functioning correctly