<div dir="ltr">Since you can do this now with:<div><br></div><div>```js</div><div>[</div><div>  1,</div><div>  ...(condition ? [2, 3] : []),</div><div>  3,</div><div>]</div><div>```</div><div>and object spreading already handles this for you, is extra syntax really needed?</div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Thu, Aug 22, 2019 at 6:52 PM Scott Rudiger <<a href="mailto:scottrudiger@gmail.com">scottrudiger@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-style:solid;border-left-color:rgb(204,204,204);padding-left:1ex"><div dir="auto"><div>I like it; code seems cleaner to me with its use. However, since the syntax is so similar to optional chaining, it's too bad your goal with this sample is to check for falsey values rather than nullish values.</div><div dir="auto"><br></div><div dir="auto"><span style="color:rgb(248,248,248);font-family:consolas,menlo,monaco,"lucida console","liberation mono","dejavu sans mono","bitstream vera sans mono","courier new",monospace;font-size:15px;white-space:pre-wrap;background-color:rgb(51,51,51)">[                                          
  </span><span style="font-family:consolas,menlo,monaco,"lucida console","liberation mono","dejavu sans mono","bitstream vera sans mono","courier new",monospace;font-size:15px;white-space:pre-wrap;background-color:rgb(51,51,51);color:rgb(170,255,255)">1</span><span style="color:rgb(248,248,248);font-family:consolas,menlo,monaco,"lucida console","liberation mono","dejavu sans mono","bitstream vera sans mono","courier new",monospace;font-size:15px;white-space:pre-wrap;background-color:rgb(51,51,51)">,                                       
  ?...(condition && [</span><span style="font-family:consolas,menlo,monaco,"lucida console","liberation mono","dejavu sans mono","bitstream vera sans mono","courier new",monospace;font-size:15px;white-space:pre-wrap;background-color:rgb(51,51,51);color:rgb(170,255,255)">2</span><span style="color:rgb(248,248,248);font-family:consolas,menlo,monaco,"lucida console","liberation mono","dejavu sans mono","bitstream vera sans mono","courier new",monospace;font-size:15px;white-space:pre-wrap;background-color:rgb(51,51,51)">, </span><span style="font-family:consolas,menlo,monaco,"lucida console","liberation mono","dejavu sans mono","bitstream vera sans mono","courier new",monospace;font-size:15px;white-space:pre-wrap;background-color:rgb(51,51,51);color:rgb(170,255,255)">3</span><span style="color:rgb(248,248,248);font-family:consolas,menlo,monaco,"lucida console","liberation mono","dejavu sans mono","bitstream vera sans mono","courier new",monospace;font-size:15px;white-space:pre-wrap;background-color:rgb(51,51,51)">]), </span><span style="font-family:consolas,menlo,monaco,"lucida console","liberation mono","dejavu sans mono","bitstream vera sans mono","courier new",monospace;font-size:15px;white-space:pre-wrap;background-color:rgb(51,51,51);color:rgb(187,187,170);font-style:italic">// no extras:)</span><span style="color:rgb(248,248,248);font-family:consolas,menlo,monaco,"lucida console","liberation mono","dejavu sans mono","bitstream vera sans mono","courier new",monospace;font-size:15px;white-space:pre-wrap;background-color:rgb(51,51,51)">
  </span><span style="font-family:consolas,menlo,monaco,"lucida console","liberation mono","dejavu sans mono","bitstream vera sans mono","courier new",monospace;font-size:15px;white-space:pre-wrap;background-color:rgb(51,51,51);color:rgb(170,255,255)">3</span><span style="color:rgb(248,248,248);font-family:consolas,menlo,monaco,"lucida console","liberation mono","dejavu sans mono","bitstream vera sans mono","courier new",monospace;font-size:15px;white-space:pre-wrap;background-color:rgb(51,51,51)">,                                       
]                                          </span><br><br><div class="gmail_quote" dir="auto"><div dir="ltr" class="gmail_attr">On Thu, Aug 22, 2019, 6:01 PM Beknar Askarov <<a href="mailto:beknaraskarov@gmail.com" target="_blank">beknaraskarov@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-style:solid;border-left-color: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_-416846581465929306m_3881212086764909428gmail-lang-javascript gmail-m_-416846581465929306m_3881212086764909428gmail-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);max-height:500px;background-position:initial initial;background-repeat:initial initial">[
  <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">1</span>,
  condition && <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">2</span>,
  condition && <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">3</span>,
  <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">4</span>,
].filter(<span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-built_in" style="color:rgb(244,123,3)">Boolean</span>) <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// filtering needed to remove falsy values</span>

<span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// Results in </span>
[<span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">1</span>, <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">2</span>, <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">3</span>, <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">4</span>] <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// if condition is `truthy`</span>
<span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// and</span>
[<span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">1</span>, <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">4</span>] <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-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_-416846581465929306m_3881212086764909428gmail-lang-javascript gmail-m_-416846581465929306m_3881212086764909428gmail-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);max-height:500px;background-position:initial initial;background-repeat:initial initial">[
  <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">1</span>,
   ...(condition ? [<span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">2</span>, <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">3</span>] : []), <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// note extra [] in the end, to avoid errors</span>
  <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-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_-416846581465929306m_3881212086764909428gmail-lang-javascript gmail-m_-416846581465929306m_3881212086764909428gmail-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);max-height:500px;background-position:initial initial;background-repeat:initial initial">{
  ...(condition ? { <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-attr">foo</span>: <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-string" style="color:rgb(255,153,153)">'bar'</span> } : {}), <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-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-position:initial initial;background-repeat:initial 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-position:initial initial;background-repeat:initial 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_-416846581465929306m_3881212086764909428gmail-lang-javascript gmail-m_-416846581465929306m_3881212086764909428gmail-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);max-height:500px;background-position:initial initial;background-repeat:initial initial">[
  item1,
  item2,
  ...(itemsOrNull || []) <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-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_-416846581465929306m_3881212086764909428gmail-lang-javascript gmail-m_-416846581465929306m_3881212086764909428gmail-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);max-height:500px;background-position:initial initial;background-repeat:initial initial">{
  ...(obj || {}), <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-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_-416846581465929306m_3881212086764909428gmail-lang-javascript gmail-m_-416846581465929306m_3881212086764909428gmail-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);max-height:500px;background-position:initial initial;background-repeat:initial initial"><span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// Arrays</span>
[
  <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">1</span>,
  ?...(condition && [<span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">2</span>, <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">3</span>]), <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// no extras:)</span>
  <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-number" style="color:rgb(170,255,255)">3</span>,
]
<span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-comment" style="color:rgb(187,187,170);font-style:italic">// Objects</span>
{
  ?...(condition && { <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-attr">foo</span>: <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-hljs-string" style="color:rgb(255,153,153)">'bar'</span> }) <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-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_-416846581465929306m_3881212086764909428gmail-lang-javascript gmail-m_-416846581465929306m_3881212086764909428gmail-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);max-height:500px;background-position:initial initial;background-repeat:initial initial">[
  item1,
  item2,
  ?...itemsOrNull <span class="gmail-m_-416846581465929306m_3881212086764909428gmail-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-position:initial initial;background-repeat:initial 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 noreferrer" style="background-color:transparent;color:rgb(253,164,76);text-decoration-line:none;background-position:initial initial;background-repeat:initial initial" 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" rel="noreferrer" 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" rel="noreferrer" target="_blank">es-discuss@mozilla.org</a><br>
<a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer noreferrer" target="_blank">https://mail.mozilla.org/listinfo/es-discuss</a><br>
</blockquote></div></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>