Array.prototype.joinWith(iterable)

Andrea Giammarchi andrea.giammarchi at gmail.com
Mon Aug 19 10:41:12 UTC 2019


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

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

On Mon, Aug 19, 2019 at 12:16 PM Naveen Chawla <naveen.chwl at gmail.com>
wrote:

> 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".
>
> On Mon, 19 Aug 2019 at 09:56, Andrea Giammarchi <
> andrea.giammarchi at gmail.com> wrote:
>
>> 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/94841e4b/attachment-0001.html>


More information about the es-discuss mailing list