<div dir="ltr">Another similar thing I've used is with String interpolation; if you use a similar pattern, e.g., <br><br><div>``` `$[items.length} item${items.length !== 1 ? 's' : ''} in collection` ```<br><br>When you want to conditionally add either some text, or nothing at all, you are forced to use the ternary with an empty string, or some workaround. In terms of a proposal, the first thing I think we need to know is: can the interpreter detect that it's in a template literal, in the same manner as it detects ?...  being in an object/array declaration context?<br clear="all"><div><div dir="ltr" class="gmail_signature" data-smartmail="gmail_signature">--------------------------<br>Dammit babies, you've got to be kind.</div></div><br></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Fri, 23 Aug 2019 at 02:01, Beknar Askarov <<a href="mailto:beknaraskarov@gmail.com">beknaraskarov@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div><h1 style="font-size:1.5157em;margin:0px 0px 10px;line-height:1.2;color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;background-color:rgb(51,51,51)">Problem</h1><p style="margin-top:0px;color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;font-size:15px;background-color:rgb(51,51,51)">Spreading is great! It contributes towards "declerativity" of the language and reduces verbosity. I see one more feature to add to improve it.</p><p style="color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;font-size:15px;background-color:rgb(51,51,51)">Consider following</p><pre style="overflow:auto;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:15px;color:rgb(255,255,255);background-color:rgb(51,51,51)"><code class="gmail-m_203173681972145531gmail-lang-javascript gmail-m_203173681972145531gmail-hljs" style="font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:1em;overflow:auto;display:block;padding:0.5em;color:rgb(248,248,248);background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-origin:initial;background-clip:initial;max-height:500px">[
  <span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">1</span>,
  condition && <span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">2</span>,
  condition && <span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">3</span>,
  <span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">4</span>,
].filter(<span class="gmail-m_203173681972145531gmail-hljs-built_in" style="color:rgb(244,123,3)">Boolean</span>) <span class="gmail-m_203173681972145531gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// filtering needed to remove falsy values</span>

<span class="gmail-m_203173681972145531gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// Results in </span>
[<span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">1</span>, <span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">2</span>, <span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">3</span>, <span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">4</span>] <span class="gmail-m_203173681972145531gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// if condition is `truthy`</span>
<span class="gmail-m_203173681972145531gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// and</span>
[<span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">1</span>, <span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">4</span>] <span class="gmail-m_203173681972145531gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// if not truthy.</span>
</code></pre><p style="color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;font-size:15px;background-color:rgb(51,51,51)">Another way to achieve the same result without the need of filtering after</p><pre style="overflow:auto;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:15px;color:rgb(255,255,255);background-color:rgb(51,51,51)"><code class="gmail-m_203173681972145531gmail-lang-javascript gmail-m_203173681972145531gmail-hljs" style="font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:1em;overflow:auto;display:block;padding:0.5em;color:rgb(248,248,248);background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-origin:initial;background-clip:initial;max-height:500px">[
  <span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">1</span>,
   ...(condition ? [<span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">2</span>, <span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">3</span>] : []), <span class="gmail-m_203173681972145531gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// note extra [] in the end, to avoid errors</span>
  <span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">4</span>,
]
</code></pre><p style="color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;font-size:15px;background-color:rgb(51,51,51)">Similar pattern with objects</p><pre style="overflow:auto;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:15px;color:rgb(255,255,255);background-color:rgb(51,51,51)"><code class="gmail-m_203173681972145531gmail-lang-javascript gmail-m_203173681972145531gmail-hljs" style="font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:1em;overflow:auto;display:block;padding:0.5em;color:rgb(248,248,248);background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-origin:initial;background-clip:initial;max-height:500px">{
  ...(condition ? { <span class="gmail-m_203173681972145531gmail-hljs-attr">foo</span>: <span class="gmail-m_203173681972145531gmail-hljs-string" style="color:rgb(255,153,153)">'bar'</span> } : {}), <span class="gmail-m_203173681972145531gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// extra {}</span>
}
</code></pre><p style="color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;font-size:15px;background-color:rgb(51,51,51)">Another pattern is when <code style="font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:1em;color:rgb(248,248,248);background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-origin:initial;background-clip:initial">condition</code> is the object itself, when it is known that type is one or <code style="font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:1em;color:rgb(248,248,248);background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-origin:initial;background-clip:initial">falsy</code></p><pre style="overflow:auto;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:15px;color:rgb(255,255,255);background-color:rgb(51,51,51)"><code class="gmail-m_203173681972145531gmail-lang-javascript gmail-m_203173681972145531gmail-hljs" style="font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:1em;overflow:auto;display:block;padding:0.5em;color:rgb(248,248,248);background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-origin:initial;background-clip:initial;max-height:500px">[
  item1,
  item2,
  ...(itemsOrNull || []) <span class="gmail-m_203173681972145531gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// extra []</span>
]
</code></pre><p style="color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;font-size:15px;background-color:rgb(51,51,51)">Similar for objects</p><pre style="overflow:auto;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:15px;color:rgb(255,255,255);background-color:rgb(51,51,51)"><code class="gmail-m_203173681972145531gmail-lang-javascript gmail-m_203173681972145531gmail-hljs" style="font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:1em;overflow:auto;display:block;padding:0.5em;color:rgb(248,248,248);background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-origin:initial;background-clip:initial;max-height:500px">{
  ...(obj || {}), <span class="gmail-m_203173681972145531gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// extra {}</span>
}
</code></pre><p style="color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;font-size:15px;background-color:rgb(51,51,51)">I see these patterns appearing very often. And these are cleanest examples I have seen so far.</p><h1 style="font-size:1.5157em;margin:30px 0px 10px;line-height:1.2;color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;background-color:rgb(51,51,51)">Proposal</h1><h2 style="margin:30px 0px 10px;line-height:1.2;font-size:1.3195em;color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;background-color:rgb(51,51,51)">Optional spreading</h2><h3 style="margin:30px 0px 10px;line-height:1.2;font-size:1.1487em;color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;background-color:rgb(51,51,51)">With condition</h3><pre style="overflow:auto;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:15px;color:rgb(255,255,255);background-color:rgb(51,51,51)"><code class="gmail-m_203173681972145531gmail-lang-javascript gmail-m_203173681972145531gmail-hljs" style="font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:1em;overflow:auto;display:block;padding:0.5em;color:rgb(248,248,248);background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-origin:initial;background-clip:initial;max-height:500px"><span class="gmail-m_203173681972145531gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// Arrays</span>
[
  <span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">1</span>,
  ?...(condition && [<span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">2</span>, <span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">3</span>]), <span class="gmail-m_203173681972145531gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// no extras:)</span>
  <span class="gmail-m_203173681972145531gmail-hljs-number" style="color:rgb(170,255,255)">3</span>,
]
<span class="gmail-m_203173681972145531gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// Objects</span>
{
  ?...(condition && { <span class="gmail-m_203173681972145531gmail-hljs-attr">foo</span>: <span class="gmail-m_203173681972145531gmail-hljs-string" style="color:rgb(255,153,153)">'bar'</span> }) <span class="gmail-m_203173681972145531gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// no extras:)</span>
}
</code></pre><h3 style="margin:30px 0px 10px;line-height:1.2;font-size:1.1487em;color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;background-color:rgb(51,51,51)">When condition is the object</h3><pre style="overflow:auto;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:15px;color:rgb(255,255,255);background-color:rgb(51,51,51)"><code class="gmail-m_203173681972145531gmail-lang-javascript gmail-m_203173681972145531gmail-hljs" style="font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:1em;overflow:auto;display:block;padding:0.5em;color:rgb(248,248,248);background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-origin:initial;background-clip:initial;max-height:500px">[
  item1,
  item2,
  ?...itemsOrNull <span class="gmail-m_203173681972145531gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// no extras at all:) even (...)</span>
]
</code></pre><p style="color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;font-size:15px;background-color:rgb(51,51,51)">These look nicer and can be good for performance since (<code style="font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace;font-size:1em;color:rgb(248,248,248);background-image:initial;background-position:initial;background-size:initial;background-repeat:initial;background-origin:initial;background-clip:initial">?...</code>), since no cleanup is needed after to remove falsy values or extra spreading even when it is not needed.</p><p style="color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;font-size:15px;background-color:rgb(51,51,51)">Looks intuitive (since: <a href="https://github.com/tc39/proposal-optional-chaining" rel="nofollow noopener" style="background:transparent;color:rgb(253,164,76);text-decoration-line:none" target="_blank">https://github.com/tc39/proposal-optional-chaining</a>)<br>Plays nice with typeings.</p><p style="color:rgb(255,255,255);font-family:Helvetica,Arial,sans-serif;font-size:15px;background-color:rgb(51,51,51)">What do you think? <a href="https://es.discourse.group/t/optional-spreading/93" style="background-color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif;font-size:small" target="_blank">https://es.discourse.group/t/optional-spreading/93</a><span style="background-color:rgb(255,255,255);font-family:Arial,Helvetica,sans-serif;font-size:small;color:rgb(34,34,34)">  </span></p></div></div>
_______________________________________________<br>
es-discuss mailing list<br>
<a href="mailto:es-discuss@mozilla.org" target="_blank">es-discuss@mozilla.org</a><br>
<a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/listinfo/es-discuss</a><br>
</blockquote></div>