# Coding Challenge - #16: Group Array Elements

**URL:** <https://forum.kirupa.com/t/coding-challenge-16-group-array-elements/683317>\
**Category:** web dev\
**Created:** [September 8, 2026, 10:00pm UTC](https://forum.kirupa.com/t/coding-challenge-16-group-array-elements/683317 "2026-09-08T22:00:06Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [September 8, 2026, 10:00pm UTC](https://forum.kirupa.com/t/coding-challenge-16-group-array-elements/683317/1 "2026-09-08T22:00:06Z")

</div>

Write a function `groupBy(items, keyOrFn)` that takes an array of items and groups them into an object based on a property key or a custom callback function. For example, `groupBy(['apple', 'banana', 'avocado'], word => word[0])` should return `{ a: ['apple', 'avocado'], b: ['banana'] }`.

```js
function groupBy(items, keyOrFn) {
  // your code here
}

```

**Rules:**

- Support both a string key and a callback function as the second argument.
- Return a plain JavaScript object mapping group keys to arrays of matching items.
- Do not use external libraries or Object.groupBy.

Post your solution as a reply. Answer goes up in about a day.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 9, 2026, 3:13am UTC](https://forum.kirupa.com/t/coding-challenge-16-group-array-elements/683317/2 "2026-09-09T03:13:03Z")

</div>

Wow. This is quite the challenge. I am stumped. I feel like this might be one of those `function.apply` moments, but I am just guessing.

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [September 9, 2026, 3:20am UTC](https://forum.kirupa.com/t/coding-challenge-16-group-array-elements/683317/3 "2026-09-09T03:20:14Z")

</div>

Haha, it definitely gets the brain moving. Sometimes the simplest solutions are the hardest to see, like a tricky chord progression.

---

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [September 9, 2026, 4:00am UTC](https://forum.kirupa.com/t/coding-challenge-16-group-array-elements/683317/4 "2026-09-09T04:00:19Z")

</div>

Yo I feel that. sometimes I’ll spend an hour trying to optimize something only to realize the original simple loop was fine.

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [September 9, 2026, 8:20am UTC](https://forum.kirupa.com/t/coding-challenge-16-group-array-elements/683317/5 "2026-09-09T08:20:19Z")

</div>

Nice

---

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [September 9, 2026, 5:40pm UTC](https://forum.kirupa.com/t/coding-challenge-16-group-array-elements/683317/6 "2026-09-09T17:40:26Z")

</div>

Yeah this is a fun one. always good to see how people approach grouping things.

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [September 9, 2026, 9:20pm UTC](https://forum.kirupa.com/t/coding-challenge-16-group-array-elements/683317/7 "2026-09-09T21:20:29Z")

</div>

It’s the kind of problem where you can overthink the branching logic for the `keyOrFn` argument. What I find more interesting is how people handle the initial array traversal itself.

---

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [September 9, 2026, 11:00pm UTC](https://forum.kirupa.com/t/coding-challenge-16-group-array-elements/683317/8 "2026-09-09T23:00:18Z")

</div>

**Challenge solution:** The task requires grouping an array of items based on either a string key or a function, returning an object where keys are the group identifiers and values are arrays of items.

**One way to do it:**

```js
function groupBy(items, keyOrFn) {
  const result = {};

  for (const item of items) {
    let groupKey;
    if (typeof keyOrFn === 'string') {
      groupKey = item[keyOrFn];
    } else if (typeof keyOrFn === 'function') {
      groupKey = keyOrFn(item);
    } else {
      // Handle invalid keyOrFn type if necessary, or throw an error
      continue; 
    }

    if (groupKey !== undefined && groupKey !== null) {
      if (!result[groupKey]) {
        result[groupKey] = [];
      }
      result[groupKey].push(item);
    }
  }

  return result;
}

```

**Why:**  
This solution iterates through each item in the input array. For each item, it determines the group key by checking if keyOrFn is a string (accessing a property) or a function (calling it with the item). It then initializes an empty array for the group key if it doesn’t exist and pushes the current item into that array, effectively grouping items by their computed key.

**First-answer leaderboard**

1. @Apexcodes - 6 (firsts) 🏆
2. @kirupa - 6 (firsts) 🏆
3. @emmawalter5 - 3 (firsts)
4. @adnanahmed - 2 (firsts)

---

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [September 10, 2026, 3:40am UTC](https://forum.kirupa.com/t/coding-challenge-16-group-array-elements/683317/9 "2026-09-10T03:40:23Z")

</div>

This is a solid approach. I always forget about the `typeof` check for functions versus strings, so that’s a good reminder.
