Why aren't interpolation values in tagged template calls saved as a cached array?

Andrea Giammarchi andrea.giammarchi at gmail.com
Sun Jul 26 18:33:40 UTC 2020


there is some fundamental misconception of the ECMAScript standard in these
examples ... to start with, assuming the same `arguments` object is passed
twice to two different invokes of a callback, would break down to ES3 and
lower.

Secondly, interpolated values you are passing around are always different,
so I can't understand why would you expect an always same Array in there
... it's not the same as the template one, which is immutable, aka frozen,
and it can carry any different value at any different position.

Accordingly, the current standard for template literals tags function is
nearly perfect, and none of these suggestions would improve anything in the
wild (using template literals since 2015, I think I've consumed them all in
all flavours).

Regards.

On Sun, Jul 26, 2020 at 8:08 PM #!/JoePea <joe at trusktr.io> wrote:

> The following doesn't work either, and obviously it probably will
> never change because it is historical:
>
> ```js
> argsArrays = []
>
> function html() {
>     argsArrays.push(arguments)
> }
>
> let n = 0
> let n2 = 0
>
> function render() { return html`1st: ${n++}, 2nd: ${n2++}.` }
>
> render()
> render()
>
> console.log(argsArrays[0] === argsArrays[1]) // false!
> ```
>
> So yeah, just wondering why our only option is to use `...args` and
> create new arrays each time, thus the performance is not optimized
> like it is with the string parts.
>
> #!/JoePea
>
> On Sun, Jul 26, 2020 at 10:49 AM #!/JoePea <joe at trusktr.io> wrote:
> >
> > What I mean is,
> >
> > We can currently do this (try it in console):
> >
> > ```js
> > arrays = []
> >
> > function html(parts) { arrays.push(parts) }
> >
> > let n = 0
> > let n2 = 0
> >
> > function render() { return html`1st: ${n++}, 2nd: ${n2++}.` }
> >
> > render()
> > render()
> >
> > console.log(arrays[0] === arrays[1]) // true! <------------------- This!
> > ```
> >
> > But why don't specs allows us to do the following as well? (don't run
> > it, it doesn't work as intended)
> >
> > ```js
> > partsArrays = []
> > valuesArrays = []
> >
> > function html(parts, values) {
> >     partsArrays.push(parts)
> >     valuesArrays.push(values)
> > }
> >
> > let n = 0
> > let n2 = 0
> >
> > function render() { return html`1st: ${n++}, 2nd: ${n2++}.` }
> >
> > render()
> > render()
> >
> > console.log(partsArrays[0] === partsArrays[1]) // true!
> > console.log(valuesArrays[0] === valuesArrays[1]) // This would be
> > convenient too! I think?
> > ```
> >
> > Instead, if we want an array of the values, we have to use `arguments`
> > or `...args`. For example:
> >
> > ```js
> > // ... same ...
> > function html(parts, ...values) {
> >     partsArrays.push(parts)
> >     valuesArrays.push(values)
> > }
> > // ... same ...
> > console.log(partsArrays[0] === partsArrays[1]) // true!
> > console.log(valuesArrays[0] === valuesArrays[1]) // false! New array
> every time.
> > ```
> >
> > Seems like it would've been great to have the cached values arrays
> > too. Why isn't this the case?
> >
> > #!/JoePea
> _______________________________________________
> 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/20200726/5097284a/attachment.html>


More information about the es-discuss mailing list