mirror of
https://github.com/jbranchaud/til
synced 2026-01-07 00:58:02 +00:00
Add Spread The Rest With ES6 as a javascript til
This commit is contained in:
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
|
|||||||
For a steady stream of TILs from a variety of rocketeers, checkout
|
For a steady stream of TILs from a variety of rocketeers, checkout
|
||||||
[til.hashrocket.com](https://til.hashrocket.com/).
|
[til.hashrocket.com](https://til.hashrocket.com/).
|
||||||
|
|
||||||
_639 TILs and counting..._
|
_640 TILs and counting..._
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -249,6 +249,7 @@ _639 TILs and counting..._
|
|||||||
- [Render An Array Of Elements With React 16](javascript/render-an-array-of-elements-with-react-16.md)
|
- [Render An Array Of Elements With React 16](javascript/render-an-array-of-elements-with-react-16.md)
|
||||||
- [Running ES6 Specs With Mocha](javascript/running-es6-specs-with-mocha.md)
|
- [Running ES6 Specs With Mocha](javascript/running-es6-specs-with-mocha.md)
|
||||||
- [Splat Arguments To A Function](javascript/splat-arguments-to-a-function.md)
|
- [Splat Arguments To A Function](javascript/splat-arguments-to-a-function.md)
|
||||||
|
- [Spread The Rest With ES6](javascript/spread-the-rest-with-es6.md)
|
||||||
- [String Interpolation With Template Literals](javascript/string-interpolation-with-template-literals.md)
|
- [String Interpolation With Template Literals](javascript/string-interpolation-with-template-literals.md)
|
||||||
- [Throttling A Function Call](javascript/throttling-a-function-call.md)
|
- [Throttling A Function Call](javascript/throttling-a-function-call.md)
|
||||||
- [Timing Processes](javascript/timing-processes.md)
|
- [Timing Processes](javascript/timing-processes.md)
|
||||||
|
|||||||
29
javascript/spread-the-rest-with-es6.md
Normal file
29
javascript/spread-the-rest-with-es6.md
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
# Spread The Rest With ES6
|
||||||
|
|
||||||
|
The spread operator provided by ES6 is a powerful syntactic feature. One way
|
||||||
|
it can be used is to capture the _rest_ of an object or array in a variable.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const pokemon = ["Charmander", "Squirtle", "Bulbasaur"];
|
||||||
|
const [first, ...rest] = pokemon;
|
||||||
|
|
||||||
|
console.log("Remaining: ", rest); // Remaining: ["Squirtle", "Bulbasaur"]
|
||||||
|
|
||||||
|
const gymLeaders = {
|
||||||
|
brock: "rock",
|
||||||
|
misty: "water",
|
||||||
|
surge: "electric",
|
||||||
|
erika: "rainbow"
|
||||||
|
};
|
||||||
|
let { brock, erika, ...otherLeaders } = gymLeaders;
|
||||||
|
|
||||||
|
console.log(otherLeaders); // Object {misty: "water", surge: "electric"}
|
||||||
|
```
|
||||||
|
|
||||||
|
Using this spread destructuring we can capture the remaining parts of an
|
||||||
|
array or object in a variable. We can also use this syntax in a function
|
||||||
|
signature to grab specific items from an incoming object argument without
|
||||||
|
losing track of the rest -- this is especially useful in React.js
|
||||||
|
development when dealing with incoming props.
|
||||||
|
|
||||||
|
See a [live example here](https://codesandbox.io/s/ov2xr1o12y).
|
||||||
Reference in New Issue
Block a user