-
-
Save michaelminter/ac98128567f90e2a414d11e70f000db6 to your computer and use it in GitHub Desktop.
Complete collection of JavaScript destructuring. Runnable demos and slides about the same topic: http://git.mikaelb.net/presentations/bartjs/destructuring
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // === Arrays | |
| var [a, b] = [1, 2]; | |
| console.log(a, b); | |
| //=> 1 2 | |
| Use from functions, only select from pattern | |
| var foo = () => { | |
| return [1, 2, 3]; | |
| }; | |
| var [a, b] = foo(); | |
| console.log(a, b); | |
| // => 1 2 | |
| // Ommit surten values | |
| var [a, , b] = [1, 2, 3]; | |
| console.log(a, b); | |
| // => 1 3 | |
| // Combine with rest (accumulates the rest values) | |
| var [a, ...b] = [1, 2, 3]; | |
| console.log(a, b); | |
| // => 1 [ 2, 3 ] | |
| // Fail-safe. | |
| var [, , , a, b] = [1, 2, 3]; | |
| console.log(a, b); | |
| // => undefined undefined | |
| // Swap variables easily without temp | |
| var a = 1, b = 2; | |
| [b, a] = [a, b]; | |
| console.log(a, b); | |
| // => 2 1 | |
| // Advance deep arrays | |
| var [a, [b, [c, d]]] = [1, [2, [[[3, 4], 5], 6]]]; | |
| console.log("a:", a, "b:", b, "c:", c, "d:", d); | |
| // => a: 1 b: 2 c: [ [ 3, 4 ], 5 ] d: 6 | |
| // === Objects | |
| var {user: x} = {user: 5}; | |
| console.log(x); | |
| // => 5 | |
| // Fail-safe | |
| var {user: x} = {user2: 5}; | |
| console.log(x); | |
| // => undefined | |
| // More values | |
| var {prop: x, prop2: y} = {prop: 5, prop2: 10}; | |
| console.log(x, y); | |
| // => 5 10 | |
| // Oops: This doesn't work: | |
| var a, b; | |
| { a, b } = {a: 1, b: 2}; | |
| // Works: | |
| var a, b; | |
| ({ a, b } = {a: 1, b: 2}); | |
| console.log(a, b); | |
| // => 1 2 | |
| // This due to the grammar in JS. () converts to an expression. | |
| // Short-hand syntax | |
| var { prop, prop2} = {prop: 5, prop2: 10}; | |
| console.log(prop, prop2); | |
| // => 5 10 | |
| // Equal to: | |
| var { prop: prop, prop2: prop2} = {prop: 5, prop2: 10}; | |
| console.log(prop, prop2); | |
| => 5 10 | |
| // Combine objects an arrays | |
| var {prop: x, prop2: [, y]} = {prop: 5, prop2: [10, 100]}; | |
| console.log(x, y); | |
| // => 5 100 | |
| // Deep objects | |
| var { | |
| prop: x, | |
| prop2: { | |
| prop2: { | |
| nested: [ , , b] | |
| } | |
| } | |
| } = { prop: "Hello", prop2: { prop2: { nested: ["a", "b", "c"]}}}; | |
| console.log(x, b); | |
| // => Hello c | |
| === Combining all to make fun happen | |
| // All well and good, can we do more? Yes! | |
| // Using as method parameters | |
| var foo = function ({prop: x}) { | |
| console.log(x); | |
| }; | |
| foo({invalid: 1}); | |
| foo({prop: 1}); | |
| // => undefined | |
| // => 1 | |
| // Can also use with the advanced example | |
| var foo = function ({ | |
| prop: x, | |
| prop2: { | |
| prop2: { | |
| nested: b | |
| } | |
| } | |
| }) { | |
| console.log(x, ...b); | |
| }; | |
| foo({ prop: "Hello", prop2: { prop2: { nested: ["a", "b", "c"]}}}); | |
| // => Hello a b c | |
| // Combine with other ES6 features. | |
| var ajax = function ({ url = "localhost", port: p = 80}, ...data) { | |
| console.log("Url:", url, "Port:", p, "Rest:", data); | |
| }; | |
| ajax({ url: "someHost" }, "additional", "data", "hello"); | |
| // => Url: someHost Port: 80 Rest: [ 'additional', 'data', 'hello' ] | |
| ajax({ }, "additional", "data", "hello"); | |
| // => Url: localhost Port: 80 Rest: [ 'additional', 'data', 'hello' ] | |
| // Ooops: Doesn't work | |
| var ajax = ({ url = "localhost", port: p = 80}, ...data) => { | |
| console.log("Url:", url, "Port:", p, "Rest:", data); | |
| }; | |
| ajax({ }, "additional", "data", "hello"); | |
| But this does: | |
| var ajax = ({ url: url = "localhost", port: p = 80}, ...data) => { | |
| console.log("Url:", url, "Port:", p, "Rest:", data); | |
| }; | |
| ajax({ }, "additional", "data", "hello"); | |
| // Like _.pluck | |
| var users = [ | |
| { user: "Name1" }, | |
| { user: "Name2" }, | |
| { user: "Name2" }, | |
| { user: "Name3" } | |
| ]; | |
| var names = users.map( ({ user }) => user ); | |
| console.log(names); | |
| // => [ 'Name1', 'Name2', 'Name2', 'Name3' ] | |
| // Advanced usage with Array Comprehension and default values | |
| var users = [ | |
| { user: "Name1" }, | |
| { user: "Name2", age: 2 }, | |
| { user: "Name2" }, | |
| { user: "Name3", age: 4 } | |
| ]; | |
| [for ({ user, age = "DEFAULT AGE" } of users) console.log(user, age)]; | |
| // => Name1 DEFAULT AGE | |
| // => Name2 2 | |
| // => Name2 DEFAULT AGE | |
| // => Name3 4 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment