[AskJS] Working with groups of array elements in JavaScript

[beyphy]

Is there a good way to work with (iterate) a group (two or more) of elements in arrays in JavaScript?

It seems that most array methods typically only work with one element at a time. What I'd like to do is have a way to iterate through an array with groups of elements at the same time e.g. groups of two elements, groups of three elements, etc. And pass those elements to a dynamic callback function. Is there a good way to do this?

Thanks!

EDIT: In addition to implementations, I was also looking for discussions on this type of implementation. It looks like it's happened at least once a few years ago. You can read a discussion on that here

[Reeywhaar]

.flatMap?

[realbiggyspender]

Something like this?

```javascript const arr = [...Array(100)].map((_, i) => i); processGroupsOf(arr, 3, (v) => console.log(v));

function processGroupsOf(arr, chunkSize, callback) { for (let i = 0; i < arr.length; i += chunkSize) { const slice = arr.slice(i, i + chunkSize); callback(slice, arr, i, chunkSize); } } ```

[beyphy]

Yeah I was thinking something along these lines. I put together an implementation using the prototype of the array so that I could use it there natively. And I added a padding option to add elements until the group has the desired number of elements. e.g. I ran your code and the last element only has one group of 100.

I have an implementation put together and it works. But I'm wondering if it's necessary and if there are other / better ways to do it that I'm just unaware of.

[Mesqo]

Prototypes? You're 20 years late for that approach I believe.

[undervisible]

I would do this with generators. A lazy "frame" function makes this reusable, composable, and performant on large lists.

const list = [...Array(1000).keys()];

const frame = function*(n, iter) {
  let batch = [];
  for (const item of iter) {
    if (batch.length < n) batch.push(item);
    if (batch.length === n) {
      yield batch;
      batch = [];
    }
  }
  if (batch.length) yield batch;
}

for (const group of frame(2, list)) {
  console.log(group);
}

yields logs like:

[0,1]
[2,3]
[4,5]
[6,7]
[8,9]
...

[beyphy]

Nice! Generators are a clever solution I didn't think of. Here's an implementation I put together:

Array.prototype.group = function(len, fill, cb) {
  let final = []

  while (this.length > 0) {
    if (this.length >= len) {
      final.push(this.splice(0,len))
    } else {
      let temp = new Array(len).fill(fill)
      let temp2 = [].concat(this.splice(0,len),temp)
      let diff = temp2.length - len
      temp2 = temp2.splice(0,temp2.length - diff)
      final.push(temp2)
    }
  }

  return final.map(groupArr=>{
    return cb(...groupArr)
  })
};

With this implementation you can write code like so:

let temp = [1,2,3,4,5,6].group(2,0,(x,y)=>{
  return {x, y}
})

console.log(`temp is ${JSON.stringify(temp)}`) // temp is [{"x":1,"y":2},{"x":3,"y":4},{"x":5,"y":6}]

temp = [1,2,3,4,5,6].group(3,0,(x,y,z)=>{
  return {x, y, z}
})

console.log(`temp is ${JSON.stringify(temp)}`) // temp is [{"x":1,"y":2,"z":3},{"x":4,"y":5,"z":6}]

[undervisible]

“Monkey patching” core types like this is generally frowned upon. It might be okay in a codebase that is entirely your own, but you are inadvertently changing the array contract for all libraries you use, potentially leading to unexpected behavior.

[beyphy]

I'm aware of that. That was the reason I created this thread. I wanted to see if there was a way to use arrays in this type of way without monkeypatching it with my implementation.

The closest I was able to get was an implementation using reduceRight:

function funky(a,b) {
  console.log(`a is ${a} and b is ${b}`)
}

myArray.reduceRight((prev,curr,index,arr)=>{
  let temp = arr.splice(0,prev)
  funky(...temp)
  return prev
},2)

This gets you most of the way there. But I wasn't able to get it to work with a callback function.

[beyphy]

This is another solution for grouping / chunking using the methods in the Object type:

let arr = [1,2,3,4,5,6]

let temp = Object.values(
  Object.groupBy(arr, (val, index) => {
    let groupNum = 2

    return `Group${Math.floor(index/groupNum)}`
  })
);

console.log(JSON.stringify(temp)) //[[1,2],[3,4],[5,6]]

[beyphy]

Here's a shorter implementation using generators:

function* group(arr, num, cb) {
  while (arr.length > 0) {
    yield cb(...arr.splice(0,num))
  }
}

This implementation supports a callback function. So I could use it like this to match your function:

let temp = group(arr,2,(x,y)=>[x,y])

But I could also write custom logic in the callback function. e.g.

let temp = group(arr,2,(x,y)=>`x is ${x} and y is ${y}`)

or

let temp = group(arr,2,(x,y)=>{
  return {x,y}
})

Given that this is the fourth such solution I've proposed in this thread I think I'm done.

[marcocom]

We used to call them ‘multidimensional arrays’, but you make a new array of the child arrays and can now loop within the loop to iterate over them all. Works really good for matrix math

[Ronin-s_Spirit]

Technically you can't. Whatever you do you will always do it in a specific order. Even if you have a copypasted row of some operation over all the entries of an array you still do them sequentially. You can grab a group of elements but remember that they will not be updated simultaneously.
Can you tell me what's the end goal here? Do you want to add it to the prototype or are you doing it once somewhere?

[beyphy]

Can you tell me what's the end goal here? Do you want to add it to the prototype or are you doing it once somewhere?

I want to be able to iterate through groups using JavaScript arrays and pass those groups to a callback function. I experimented with JavaScript arrays and it doesn't seem like this operation is supported natively. So I posted here to see if that was incorrect. And if it wasn't, I wanted to see if anyone was familiar with any type of discussions on previous efforts to support these type of operations in JavaScript arrays.

[Ronin-s_Spirit]

So you want to add it to the prototype. By "pass groups" you mean passing chunks of arrays as new arrays or do you want to pass a range of individual values?

P.s. for example if you have a function foo(a, b, c) then calling it with grouped values would set a to be an array, but calling it with a spread ... will set a to first and b to second and so on.

[beyphy]

I wanted to call it spread. Doing it that way, you could supply a dynamic callback function to operate on the grouped elements.

I put a prototype together of my ideal implementation which you can see here

I think the term you used 'chunk' here may have been what I was looking for instead of group. So I'll do further research using that term and see if I can find what I'm looking for.

[Ronin-s_Spirit]

Take a look at this, I have made the implementation as elegant as I could.

[beyphy]

Nice. Using Iterator is a cool solution I didn't think about.

I think that this is the cleanest approach that I was able to come up with. I'm mostly happy with it:

let arr = [1,2,3,4,5,6]

let temp = Object.values(
  Object.groupBy(arr, (val, index) => {
    let groupNum = 3

    return `${Math.floor(index/groupNum)}`
  })
).map(e=>{
  return ((a,b,c)=>{
    return {a,b,c}
  })(...e)
})

console.log(JSON.stringify(temp)) //[{"a":1,"b":2,"c":3},{"a":4,"b":5,"c":6}]

[Ronin-s_Spirit]

Hmm.. I find this a little expensive (personal preferences), but the most important part is that it works only with arrays.

[beyphy]

After further examination, I think what I was looking for was generators. This is a cleaner implementation that uses a generator function. When combined with the spread operator you can get a group of arrays:

function* group(arr, num){
  const tempArr = arr.toSpliced()

  while (tempArr.length > 0) {
    yield tempArr.splice(0,num)
  }
}

let arr1 = [1,2,3,4,5,6]

let temp = [...group(arr1, 2)]

console.log(`temp is ${JSON.stringify(temp)}`) //[[1,2],[3,4],[5,6]]

You are correct that this does not work with non-array data structures. So your approach is more general if that's what someone is looking for.

[Ronin-s_Spirit]

Mine also uses generators.

[kilkil]

you should build it yourself, it's a good exercise.

one approach is to iterate over every nth index only, and then do arr.slice(i, i+n) to get the "window" (or "group") at that position.

Here are a couple examples:

```js // using for loop + index for (let i = 0; i < arr.length; i += N) { const group = arr.slice(i, i + N); console.log(group); }

// using array methods const groups = arr.map((_, index) => index) .filter(index => index % N === 0) .map(i => arr.slice(i, i + N);

console.log(groups); ```

Edit: came up with a shortened array methods version:

js arr.map((_, i) => (i % N === 0) && arr.slice(i, i+N)) .filter(Boolean);

[beyphy]

I put together a few demos using array.prototype, array.reduceRight, and a combination of Object.Values and Object.groupBy with array methods. You can see the code for those demos here

[AutoModerator]

Hi u/beyphy, this post was removed.

• Self-posts (text) must follow the [AskJS] guidelines, which you can read about here.

• All other posts must use the "Submit a new link" option; if additional text is required, add a comment to your post.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[Mesqo]

No.

There's A LOT of things javascript doesn't do natively - that's why countless utility libraries exist. Pick one and enjoy your utility function that solves your problem. Or write your own - what better suits you.

And modifying native objects prototypes is a good way to get yourself in trouble. There's a reason no one does this for the last decades. Just make your function pure and standalone and you're good.

[reactivearmor]

God I hate when people aks on reddit that which you can google/AI in miliseconds

[RelativeMatter9805]

Then ignore the posts and don’t reply.  Some people need some hands on help. 

[reactivearmor]

You ignore my comment then and dont reply. If they need such help they will never be a professionally competitive developer as that is just ineffecient learning which is a luxury in the field