Insert item between every other item in array similar to Array.join

Question

Array.join is useful because it glues together an array of strings by a delimiter taking into account empty arrays and not padding the delimiter at either end of the output string.

I am making a React application and I would like find a similar native function, however, my array of React.ReactNode elements is going to be mapped and rendered, so instead of joining the array with a delimiter and outputting a string, I just want to join the array with a string delimiter, but maintain the Array structure. Is there something already native to javascript/typescript/react that I can use to achieve the below psuedo-code?

let parts: React.ReactNode[] = [];
if (conditionA) {
  parts.push(<div>Component One</div>);
}
if (conditionB) {
  parts.push(<div>Component Two</div>);
}
parts = joinByDelimiterButKeepAsArray(parts, '|');
// I wants parts to now equal
// [<div>Component One</div>, '|', <div>Component Two</div>]
// if conditionA and conditionB are both true
return (
  <>
    {parts.map((part, i) => return (
      <React.ReactFragment key={i}>{part}</React.ReactFragment>
    ))}
  </>
)

trincot · Accepted Answer · 2022-08-26 12:27:09Z

3

You could use reduce without the initialValue argument:

a.reduce((acc, val) => [].concat(acc, delimiter, val));

This requires special care when a is an empty array. If that needs to be supported, then:

a.length ? a.reduce((acc, val) => [].concat(acc, delimiter, val)) : a;

Addendum

I just found out that TypeScript only allows the second argument of reduce to be omitted when reduce will return the same type as the array elements. Here we want to return a different type (T[] instead of T), yet start out with an implicit T initial value. Not possible.

So this restriction kills the beauty of the above JavaScript solution, as now we have to provide the second argument:

a.reduce<T[]>((acc, val) => acc.concat(delimiter, val), []).slice(1);

And with additional type specifications for the callback parameters:

a.reduce<T[]>((acc: T[], val: T) => acc.concat(delimiter, val), []).slice(1);

edited Aug 26, 2022 at 12:27

answered Aug 24, 2022 at 21:38

trincot

357k38 gold badges282 silver badges338 bronze badges

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

2 Comments

rollingcodes Over a year ago

Could you provide a typed solution for this?

trincot Over a year ago

Good remark... Turns out that TypeScript needs more. See addition to answer.

MrRom · Accepted Answer · 2025-01-08 08:58:48Z

1

Maybe these are nice minor adjustments:

const joinByDelimiterButKeepAsArray = <T, D>(arr: T[], delimiter: D): (T | D)[] => {
  return arr.flatMap((item, i) => i == 0 ? item : [delimiter, item])
}

answered Jan 8 at 8:58

MrRom

111 bronze badge

1 Comment

Rohit Gupta Jan 12 at 14:48

Please explain your answer so its obvious that its the right one.

rollingcodes · Accepted Answer · 2025-02-19 20:38:28Z

1

Well, kind of answered my own question. Currently, I use the following function to achieve this. Notice, that the use of a generic function allows for mixed array types as demonstrated below:

import React from "react";

function joinByDelimiterButKeepAsArray<T>(a: T[], delimiter: T): T[] {
  return a.flatMap((n, i) => (i + 1 < a.length ? [n, delimiter] : [n]));
}

/**
 * Example
 */

type A = { name: string };
type B = { age: number };
type C = A | B | React.ReactNode;

const parts: C[] = [{ name: "A" }, { age: 1 }];

parts.push(<div>A JSX Component</div>); // of type JSX element
console.log(joinByDelimiterButKeepAsArray(parts, "|"));
/// [{ name: 'A' }, '|', { age: 1 }, '|', { '$$typeof': Symbol...props: { children: 'A JSX Component' }...}]

parts.push(2); // of type number
console.log(joinByDelimiterButKeepAsArray(parts, "|"));
/// [{ name: 'A' }, '|', { age: 1 }, '|', { '$$typeof': Symbol...props: { children: 'A JSX Component' }...}, '|', 2]

parts.push("Another element"); // of type string
console.log(joinByDelimiterButKeepAsArray(parts, "|"));
/// [{ name: 'A' }, '|', { age: 1 }, '|', { '$$typeof': Symbol...props: { children: 'Component One' }...}, '|', 2, '|', 'Another element']

EDIT:

To address @silverwind's comment, mixed types are indeed supported as shown below:

edited Feb 19 at 20:38

answered Aug 24, 2022 at 14:38

rollingcodes

16.2k22 gold badges87 silver badges119 bronze badges

3 Comments

silverwind Feb 18 at 16:30

This is nice, the only problem is does not allow mixed array member types, so I'm using <T extends Array<any>>(array: T, delimiter: any): T instead.

rollingcodes Feb 19 at 20:39

@silverwind, the type can be inferred by TypeScript if you don't explicitly declare it with T extends.... If you omit T, the output array will take on the type of the input array specified as the first argument: const arr = joinByDelimiterButKeepAsArray([1, 2, '3', 4, '5'], '-');, is synonymous with const arr: (number | string)[] = joinByDelimiterButKeepAsArray([1, 2, '3', 4, '5'], '-'); which is also synonymous with const arr = joinByDelimiterButKeepAsArray<string | number>([1, 2, '3', 4, '5'], '-');

rollingcodes Feb 19 at 20:40

Side note: using any is typically considered bad practice

rollingcodes · Accepted Answer · 2022-08-26 17:27:03Z

0

You could try this solution:

const parts = ['<div>Component One</div>', '<div>Component Two</div>'];

/**
 * Add the delimiter between each item in the array.
 *
 * @param {any[]} array
 * @param {string} delimiter
 * @returns {any[]}
 */
const joinByDelimiterButKeepAsArray = (array, delimiter) => {
  /**
   * To prevent the function from crashing, we need to check if the array is an array.
   */
  if (!Array.isArray(array) || array.length === 0) {
    return [];
  }

  const [firstElement, ...rest] = array;

  return rest.reduce((acc, curr) =>
    acc.concat(delimiter, curr)
    /**
     * The initialValue is set to an array containing the first element of the array to
     * prevent the edge case of an array of length 1. If we don't do this, it would result
     * in an array of length 2 with the first element being the first element of the array
     * and the second element being the delimiter.
     *
     * e.g. [onlyOneElement] -> [onlyOneElement, delimiter]
     */
  , [firstElement]);
};

console.log(joinByDelimiterButKeepAsArray(parts, '|'));

UPDATE

I've never used Typescript before. The typing would probably look like this:

const joinByDelimiterButKeepAsArray: <T>(array: T[], delimiter: T) => T[] = (array: T[], delimiter: T): T[] => {
  if (!Array.isArray(array) || array.length === 0) {
    return [];
  }

  const [firstElement, ...rest] = array;

  return rest.reduce((acc: T[], curr: any): T[] =>
    acc.concat(delimiter, curr)
  , [firstElement]);
};

Please consider marking this as an answer if it helped!

edited Aug 26, 2022 at 17:27

rollingcodes

16.2k22 gold badges87 silver badges119 bronze badges

answered Aug 25, 2022 at 3:10

Alexandre Guertin

1725 bronze badges

2 Comments

rollingcodes Over a year ago

could provide a typed solution for this?

Alexandre Guertin Over a year ago

Please see the updated answer for the requested changes.

Collectives™ on Stack Overflow

Insert item between every other item in array similar to Array.join

4 Answers 4

Addendum

2 Comments

1 Comment

3 Comments

UPDATE

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Addendum

2 Comments

1 Comment

3 Comments

UPDATE

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related