Skip to content

Instantly share code, notes, and snippets.

@lcustodio

lcustodio/destructuring.js

Forked from mikaelbr/destructuring.js
Created July 10, 2017 12:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lcustodio/ad80173b0ade973b56bddd35861db57b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lcustodio/ad80173b0ade973b56bddd35861db57b to your computer and use it in GitHub Desktop.
Download ZIP
Several demos and usages for ES6 destructuring. Runnable demos and slides about the same topic: http://git.mikaelb.net/presentations/bartjs/destructuring
Raw
destructuring.js
// === 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