Discuss
  • Array.prototype.joinWith(iterable)

Array.prototype.joinWith(iterable)

# Andrea Giammarchi (5 years ago)

I wonder if there's any interest in adding another handy Array method as joinWith could be:

// proposal example
Array.prototype.joinWith = function (values) {
  const {length} = this;
  if (length < 2)
    return this.join('');
  const out = [this[0]];
  const len = values.length;
  for (let i = 1; i < length; i++) {
    console.log(i, len);
    out.push(values[(i - 1) % len], this[i]);
  }
  return out.join('');
};

The goal is to simplify joining array entries through not the same value, example:

console.log(['a', 'b', 'c', 'd'].joinWith([1, 2]));
// a1b2c1d

function tag2str(template, ...values) {
  return template.joinWith(values);
}

tag2str`a${1}b${2}c`;
// "a1b2c"

Throughts?

# Michał Wadas (5 years ago)

I would rather see Array.zip, it covers this use case.

# Andrea Giammarchi (5 years ago)
  1. the suggested name is just ... suggested, I don't have strong opinion on it, it just join values through other values 2. what's Array.zip ? I've no idea
# Michał Wadas (5 years ago)

lodash.com/docs/#zip, docs.python.org/3/library/functions.html#zip

# Andrea Giammarchi (5 years ago)

That;s not useful for template literals tags though

_.zip(['a', 'b', 'c'], [1, 2]); [["a", 1], ["b", 2], ["c", undefined]]

it basically does nothing I've proposed ... any other name suggestion?

# Naveen Chawla (5 years ago)

"weave"? (I've likely missed the purpose of the method)

# Andrea Giammarchi (5 years ago)

There is a whole example that produces a string, like join does, using the second argument iterable to fill the "junctions" ... which part is not clear in the test case?

console.log(['a', 'b', 'c', 'd'].joinWith([1, 2]));
// a1b2c1d

function tag2str(template, ...values) {
  return template.joinWith(values);
}

tag2str`a${1}b${2}c`;
// "a1b2c"
# Isiah Meadows (5 years ago)

For that, I'd rather see an interleave that just rotates through all its arguments. It'd be basically sugar for .zip().flat(), but an implementation could optimize the heck out of it. (In particular, they could iterate through them one-by-one and only allocate once, not in the hot loop, so it'd be fast.)

I at one point had it in my list of wishlist proposals, but it somehow disappeared. I've since recreated it: isiahmeadows/es-stdlib-proposals/blob/master/proposals/array/interleave.md

Isiah Meadows contact at isiahmeadows.com, www.isiahmeadows.com

# Andrea Giammarchi (5 years ago)

Just to re-state: zip from lowdash, does not do what my proposed method does ... anything that won't produce the following result is not what I'm proposing

console.log(['a', 'b', 'c', 'd'].joinWith([1, 2])); // a1b2c1d

function tag2str(template, ...values) { return template.joinWith(values); }

tag2stra${1}b${2}c; // "a1b2c"

# Naveen Chawla (5 years ago)

I'm just not seeing what it's supposed to do. If you could give a brief explanation of the array method, and the string method then of course I would get it. I know it would seem obvious to you from the examples alone, it's just not to me.

# Andrea Giammarchi (5 years ago)

given an array, it joins it through the values of the iterable argument, without ever resulting to undefined

['a', 'b', 'c'].joinWith(['-']) would produce "a-b-c"

['a', 'b', 'c'].joinWith([1, 2]) would produce "a1b2c"

['a', 'b', 'c'].joinWith('012') would produce "a0b1c" note the string, as iterable, is acceptable too

const tag = (template, ...values) => template.joinWith(values);

taga${Math.random()}b${Math.random()}; would fill the gap between a and b, or b and c, with the value returned by the two Math.random()

['a', 'b', 'c', 'd'].joinWith('01'); would produce "a0b1c0d" so that there's never an `undefined

# Naveen Chawla (5 years ago)

Cool.

I get it now apart from the "templated string" example. I'm not very knowledgable about templated strings but on the face it looks like 'a${x}b${y}' already inserts x and y into the string, so I'm not sure what else is happening with your proposed method? Clearly I've missed something.

Apart from that, how would you handle arrays that whose values are not all strings?

For naming is still think "weave" would be OK from what I know so far

# Andrea Giammarchi (5 years ago)

this ${Symbol('throws')} an error, so anything that cannot be represented as string should throw too, as it is for [1, 2, 3].join(Symbol()).

In few words, everything described as parameter for the Array.prototype.join(param) should be described as the iterable value, nothng new to add, nothing different to expect.

The template literal as is returns a string, but if you use tags, as functions, you deal with an array and a collection or extra values (0 to template.length - 1).

The current way to flatten a template via tag, used already in various projects for a reason or another, is the following one:

function tag2str(template) {
  let str = template[0];
  for (let i = 1, t = template.length; i < t; i++)
    str += arguments[i] + template[i];
  return str;
}

I am proposing to simplify this common case with something that could be used for other cases too.

# Andrea Giammarchi (5 years ago)

early reply .... "which otehr cases"? this is just an example:

[2019, 08, 16, 14, 28, 30].map(i => i < 10 ? ('0' + i) :

i).joinWith('--T::.');

# Jordan Harband (5 years ago)

Can you elaborate a bit more on how this is a common case in the wider ecosystem?

# Naveen Chawla (5 years ago)

I don't know what you mean by tags. I guess this is outside my experience area. I'd love to know the use case. Hope I'm not bothering you or anyone else reading this thread

# Andrea Giammarchi (5 years ago)

A lot of libraries flatten template tags for a reason or another. The JSX oriented htm project [1], as example, does that to obtain a single key, since TypeScript has broken template literals, and avoiding duplicated work per same literal is a common template tag based libraries use case.

Here the code: developit/htm/blob/master/src/index.mjs#L25-L31

That could be template[0].length + '-' + template.joinWith(template.map(chunk => chunk.length + '-'))

Dummy no-op functions (this is only an example WebReflection/i18n-dummy/blob/master/esm/main.js) are also common, + I've used myself the pattern over and over in various occasions, where you can use a generic function either as regular or as a tag.

Accordingly, the simplification would be handy already, and extra use cases, as the one used with the date separator, or any other similar one, shows possible new ways to easily join arbitrary amount of data.

Because of these previous points, I've thought proposing this was worth a shot.

[1] developit/htm

# Naveen Chawla (5 years ago)

HTML tags? Afraid I still don't get that aspect. Perhaps my reading style is not matching your writing style. I understood everything else. I would still need a really simple example(/s) completed with sample input data from start to finish (for tags).

Anyway from what I'm seeing so far I think "weave" is a better name than "joinWith".

# Andrea Giammarchi (5 years ago)

Naveen, please read more about template literals tags, thanks.

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates

# Naveen Chawla (5 years ago)

OK thanks for the link