spread operator

Author: basarat

SUMMARY.md

@@ -10,3 +10,4 @@
   * [Destructuring](docs/destructuring.md)
   * [for...of](docs/for...of.md)
   * [Template Strings](docs/template-strings.md)
+  * [Spread Operator](docs/spread-operator.md)

code/es6/spread-operator.js

@@ -0,0 +1,8 @@
+var spread;
+(function (spread) {
+    var list = [
+        1,
+        2
+    ];
+    list = list.concat([3, 4]);
+})(spread = exports.spread || (exports.spread = {}));

code/es6/spread-operator.ts

@@ -0,0 +1,4 @@
+export module spread {
+    var list = [1, 2];
+    list = [...list, 3, 4];
+}

code/tsconfig.json

@@ -18,6 +18,7 @@
         "./es6/for..of.ts",
         "./es6/let.ts",
         "./es6/rest-parameters.ts",
+        "./es6/spread-operator.ts",
         "./es6/template-strings.ts",
         "./es6/test.ts",
         "./testing.ts"

docs/spread-operator.md

@@ -0,0 +1,45 @@
+### Spread Operator
+
+The main objective of the spread operator is to *spread* the objects of an array. This is best explained with examples.
+
+#### Apply
+A common use case it to spread an array into the function arguments. Previously you would need to use `Function.prototype.apply`: 
+
+```ts
+function foo(x, y, z) { }
+var args = [0, 1, 2];
+foo.apply(null, args);
+```
+
+Now you can do this simply by prefixing the arguments with `...` as shown below: 
+
+```ts
+function foo(x, y, z) { }
+var args = [0, 1, 2];
+foo(...args);
+```
+
+Here we are *spreading* the `args` array into positional `arguments`.
+
+#### Destructuring
+We've already seen one usage of this in *destructuring* 
+
+```ts
+var [x, y, ...remaining] = [1, 2, 3, 4];
+console.log(x, y, remaining); // 1, 2, [3,4]
+```
+The motivation here is to simply make it easy for you to capture the remaining elements of an array when destructuring.
+
+#### Array Assignment
+The spread operator allows you easily place an *expanded version* of an array into another array. This is demonstrated in the below example: 
+
+```ts
+var list = [1, 2];
+list = [...list, 3, 4];
+console.log(list); // [1,2,3,4]
+```
+
+#### Summary
+`apply` is something that you would inevitably do in JavaScript, so its good to have a better syntax where you don't have that ugly `null` for the `this` argument. Also having a dedicated syntax for moving arrays out of (destructuring) or into (assignment) other arrays provides neat syntax for when you are doing array processing on partial arrays.
+
+{% include "footer.md" %}