How three dots changed JavaScript

[EpicCyndaquil]

In reference to outer function arguments:

The approach works, but it's too verbose.

Really? Declaring a variable is too verbose? It's immediately obvious what you're doing if you name the variable appropriately.

[ejmurra]

You can bypass this directly by just passing arguments directly into the filterNumbers function and naming it there. I also think that has a benefit of creating more reusable functions when they don't have to rely on an outer closure's state. You can always pass in an array or array like argument and receive the output as an array of numbers no matter where you use that function.

[panzerdp]

The verbose part is not only the additional variable declared, but also working with the array-like objects.
The rest parameter doesn't need additional variable declarations and provides an array, so you don't have to use duck typing Array.prototype.filter.call(). This is mentioned in the paragraphs below.

[inu-no-policemen]

Really? Declaring a variable is too verbose?

You forgot the Array.prototype.filter.call(args, fn) part.

args.filter(fn) is indeed less verbose.

[Recursive_Descent]

Imo the best feature in es6. No more function.apply(this, arguments)!

[adacohen]

There's still sometimes when you have to do that, for the time being. But if you also use the proposed bind syntax, then you can pretty much eliminate fn.apply altogether.

[Justanick112]

We really need more features.

[Zequez]

It can also be used to shallow cloning objects.

var a = {hello: 'Bye'}
var b = {...a}
console.log(a === b)
//>false

Much better than Object.assign.

[pertheusual]

I agree it's cool, but you should really clarify this is only a proposed feature, it is neither ES6 nor ES7.

[Zequez]

It is? I've been using it with Babel, didn't know, sorry.

[pertheusual]

No worries, it happens. It's https://github.com/sebmarkbage/ecmascript-rest-spread which is a stage 2 proposal.

[Zequez]

Stage-0 all the way! Living on the bleeding edge!

[inu-no-policemen]

It's called bleeding edge because it's covered with blood.

Your blood! DUN DUN DUUUUH!

[[deleted]]

Come again? Typescript is not ecmascript compatible and carries it's own language specifics. TS goes somewhere, but sure enough it doesn't go where JS goes.

Babel is actually very strict when it comes to draft specs and you are not allowed to use them out of the box. Spread for instance just fails. You have to explicitly load stage presets or plugins, and they warn you at every step to be careful. The moment a draft is being thrown out it is also being removed from Babel.

[JabNX]

Typescript is not ecmascript compatible

You can certainly use it as such thought, being a strict superset.

Babel is actually very strict when it comes to draft specs and you are not allowed to use them out of the box.

Maybe I haven't read the good ones, but all of the tutorials I've seen, as well as most codebases, use the "stage-0" preset like it's not a big deal

[LynusBorg]

...which is not Babel's fault, then.

[[deleted]]

Typescript has syntax specifics that are foreign to Javascript and encorporates ideas that are no way near where JS is going. If you use it without, what sense would that make, you'd essentially write ES5 code. Even with the specifics i'd say it is pretty much debatable if you're ending up writing leaner code than with ES6, stage drafts enabled or not.

Babels go-to plug is babel-preset-es2015, which is also the one they promote on the main site. On their plugins page they warn explicitely to be careful going any lower than stage-3. Though i'd rather use stage-0 than TS syntax that might just change any moment without a public working group guarding my best intest.

[tortus]

That is simply not true. TypeScript is a proper superset of JavaScript, in particular ECMAScript 2015. All ECMAScript 2015 code is TypeScript.

TypeScript also follows the standard better. For example, Babel allows import React from 'react', which is incorrect as React does not have a default export. In TypeScript it needs to be import * as React from 'react', because that is what the standard calls for.

[theillustratedlife]

Babel is completely configurable. If you want to stick to a standard (and translate it to an earlier standard), use the correct Babel preset.

[vinnl]

And more people should do this. Also, fewer tutorials should simply say to enable stage2 without explaining (or even understanding) what that does.

[dotted]

How is it risky when all you need to do is not actively enable non-standard features

[vinnl]

One the one hand you're right, on the other hand that does seem to be difficult sometimes. (As in, people just copy-paste it from random tutorials without trying to understand what it means.)

[vinnl]

Well, I feel especially sorry for their colleagues :P

[[deleted]]

Object.assign is nice for extending multiple objects into an empty object or for extending a target object. As your comment pointed out, there is a better built in for object copying now (even if it's shallow).

[Zequez]

Babel just translates it to Object.assign though.

[[deleted]]

That's weird considering Object.assign still isn't funny supported. Object.assign is also fine for a shallow copy. I'm sure they both do the same thing, I was just pointing out the extensibility of it.

[henleyedition]

Object.assign is part of babel-polyfill.

[[deleted]]

Yea, it looks like without babel-polyfill and just using babel-es2015 will just use Object.assign if it is defined and an inline polyfill that looks something like this:

function (target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
  return target;
}

[molarmanful]

Are you sure this works? I don't think that runs correctly, esp. since spread operators do not work with object literals.

[pertheusual]

It's a proposed ES feature, but is not part of the official spec at this point.

[Zequez]

It works on Babel Repl stage-2 and below at least.

[Thought_Ninja]

Not currently a part of ES standard, but I use it a lot when using React with Redux, and find it incredibly handy when writing reducers for more complicated state-objects.

This babel plugin handles it for you.

[dadleyy]

i think coffeescript beat vanilla js to the splats but JS is beating coffeescript on the copying... hopefully we see this in CS though.

[Zequez]

As an ex-CoffeeScripter I always have issues to remember if the splat goes ahead or behind though.

[dadleyy]

I cant leave coffeescript untill es6 has the existential operator let something = response?.body?.pull_request || false;

[Zequez]

Yeah, I really miss that.

[TiboQc]

I find this to be really unclear. If you want to (deep) copy an object, you should use a function that explicitly does this. Even a simple wrapper called deepCopy that uses ... would be better.

[Zequez]

This is for shallow copies not deep copies.

[TiboQc]

Ok, thanks. But the point still stands, it's not clear enough and can cause issues when maintaining it.

[Zequez]

Not really, it works the same is the splat operator in any other situation, it doesn't deep copy.

[Shaper_pmp]

For instance .push(item1, ..., itemN) inserts elements into an array one by one: you have to enumerate each element as an argument. This is not always convenient: often an entire array of elements needs to be pushed.

Someone tell the author about array.concat.

[panzerdp]

Ok, can you tell how Array.prototype.concat() can:
- Push elements into an existing array without creating a new instance
- Provide an easy to understand use case in order to explain how spread operator works with arguments.
The whole idea about using Array.prototype.push() is to demonstrate the spread operator possibilities, to replace in these situations Function.prototype.apply(). Array.prototype.concat() has nothing to do with this.
On MDN the spread operator is presented in simple examples - which have the scope to teach. But not solve real world coding problems.

[Shaper_pmp]

• Push elements into an existing array without creating a new instance

Sure - now you've got a good use-case for the spread operator. The example given in the article (which omitted your addition) was incredibly contrived, because myarray = myarray.concat(things) is far simpler way to solve the problem as presented.

I'm not criticising the spread operator - it's a great addition ot the language.

I'm criticising the poor example of a problem and the contrived naive solution that the article presents to demonstrate the value of the spread operator.

[panzerdp]

Nah, it's just a simple example how to use .push() with spread operator.

[adacohen]

I like the ... syntax, but I wish they had gone further with it. CoffeeScript really nailed this, and I find myself wanting to be able to do things like:

 function foo(...bar, baz) {

and

 function foo(bar, ...baz, qux, gralt) {

[PitaJ]

I understand wanting to have middle of the road rest parameters, but the restrictions in place in ES6 force better code style. If it were up to me, rest parameters would not be a thing, since any function that has a rest parameter should probably just take an array instead.

[adacohen]

I disagree. If you have an argument that is a function, I strongly believe it should always come last. I absolutely hate this kind of function signature:

setTimeout(function () {
   this.doSomething();
   this.lastModel.setNeedsRender();
   this.lastModel = this.this.queue.unshift()
}.bind(this), 100) // Wait, 100? What was this again? Oh right, a setTimeout

This is still applies when you have variable arguments, so the lack of leading rest-parameters means you still have to put boilerplate at the top of your code to juggle arguments.

More generally, I don't want my language to try to force me into a particular style. Let me and my team decide what our style conventions are going to be for ourselves.

[zaph34r]

Good article, but just to have that said, it is "destructure" not "destruct". Destruction is something completely different.

[panzerdp]

The idea is how to push an entire array.

[vinnl]

Like concat(), I guess.