Array.prototype.joinWith(iterable)

Andrea Giammarchi andrea.giammarchi at gmail.com
Mon Aug 19 08:56:12 UTC 2019


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:
https://github.com/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
https://github.com/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] https://github.com/developit/htm


On Fri, Aug 16, 2019 at 10:00 PM Jordan Harband <ljharb at gmail.com> wrote:

> Can you elaborate a bit more on how this is a *common* case in the wider
> ecosystem?
>
> On Fri, Aug 16, 2019 at 5:29 AM Andrea Giammarchi <
> andrea.giammarchi at gmail.com> wrote:
>
>> 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::.');
>>
>> On Fri, Aug 16, 2019 at 2:24 PM Andrea Giammarchi <
>> andrea.giammarchi at gmail.com> wrote:
>>
>>> `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:
>>>
>>> ```js
>>> 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.
>>>
>>>
>>>
>>>
>>>
>>> On Fri, Aug 16, 2019 at 1:17 PM Naveen Chawla <naveen.chwl at gmail.com>
>>> wrote:
>>>
>>>> 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
>>>>
>>>> On Fri, 16 Aug 2019 at 11:08, Andrea Giammarchi <
>>>> andrea.giammarchi at gmail.com> wrote:
>>>>
>>>>> 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);
>>>>> tag`a${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
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> On Fri, Aug 16, 2019 at 12:01 PM Naveen Chawla <naveen.chwl at gmail.com>
>>>>> wrote:
>>>>>
>>>>>> 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.
>>>>>>
>>>>>> On Fri, 16 Aug 2019 at 08:32, Andrea Giammarchi <
>>>>>> andrea.giammarchi at gmail.com> wrote:
>>>>>>
>>>>>>> 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);
>>>>>>> }
>>>>>>>
>>>>>>> tag2str`a${1}b${2}c`;
>>>>>>> // "a1b2c"
>>>>>>>
>>>>>>> On Fri, Aug 16, 2019 at 5:57 AM Isiah Meadows <
>>>>>>> isiahmeadows at gmail.com> wrote:
>>>>>>>
>>>>>>>> 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:
>>>>>>>>
>>>>>>>> https://github.com/isiahmeadows/es-stdlib-proposals/blob/master/proposals/array/interleave.md
>>>>>>>>
>>>>>>>> -----
>>>>>>>>
>>>>>>>> Isiah Meadows
>>>>>>>> contact at isiahmeadows.com
>>>>>>>> www.isiahmeadows.com
>>>>>>>>
>>>>>>>>
>>>>>>>> On Thu, Aug 15, 2019 at 1:12 PM Andrea Giammarchi
>>>>>>>> <andrea.giammarchi at gmail.com> wrote:
>>>>>>>> >
>>>>>>>> > 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?
>>>>>>>> >
>>>>>>>> > On Thu, Aug 15, 2019 at 3:40 PM Michał Wadas <
>>>>>>>> michalwadas at gmail.com> wrote:
>>>>>>>> >>
>>>>>>>> >> https://lodash.com/docs/#zip
>>>>>>>> >> https://docs.python.org/3/library/functions.html#zip
>>>>>>>> >>
>>>>>>>> >> On Thu, 15 Aug 2019, 15:34 Andrea Giammarchi, <
>>>>>>>> andrea.giammarchi at gmail.com> wrote:
>>>>>>>> >>>
>>>>>>>> >>> the suggested name is just ... suggested, I don't have strong
>>>>>>>> opinion on it, it just `join` values through other values
>>>>>>>> >>> what's `Array.zip` ? I've no idea
>>>>>>>> >>>
>>>>>>>> >>>
>>>>>>>> >>> On Thu, Aug 15, 2019 at 12:53 PM Michał Wadas <
>>>>>>>> michalwadas at gmail.com> wrote:
>>>>>>>> >>>>
>>>>>>>> >>>> I would rather see Array.zip, it covers this use case.
>>>>>>>> >>>>
>>>>>>>> >>>> On Thu, 15 Aug 2019, 10:50 Andrea Giammarchi, <
>>>>>>>> andrea.giammarchi at gmail.com> wrote:
>>>>>>>> >>>>>
>>>>>>>> >>>>>
>>>>>>>> >>>>> I wonder if there's any interest in adding another handy
>>>>>>>> Array method as joinWith could be:
>>>>>>>> >>>>>
>>>>>>>> >>>>> ```js
>>>>>>>> >>>>> // 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:
>>>>>>>> >>>>>
>>>>>>>> >>>>> ```js
>>>>>>>> >>>>> 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?
>>>>>>>> >>>>> _______________________________________________
>>>>>>>> >>>>> es-discuss mailing list
>>>>>>>> >>>>> es-discuss at mozilla.org
>>>>>>>> >>>>> https://mail.mozilla.org/listinfo/es-discuss
>>>>>>>> >
>>>>>>>> > _______________________________________________
>>>>>>>> > es-discuss mailing list
>>>>>>>> > es-discuss at mozilla.org
>>>>>>>> > https://mail.mozilla.org/listinfo/es-discuss
>>>>>>>>
>>>>>>> _______________________________________________
>>>>>>> es-discuss mailing list
>>>>>>> es-discuss at mozilla.org
>>>>>>> https://mail.mozilla.org/listinfo/es-discuss
>>>>>>>
>>>>>> _______________________________________________
>> es-discuss mailing list
>> es-discuss at mozilla.org
>> https://mail.mozilla.org/listinfo/es-discuss
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20190819/2114a731/attachment-0001.html>


More information about the es-discuss mailing list