Skip to content

Instantly share code, notes, and snippets.

@mikaelbr
Last active August 20, 2024 11:27
Show Gist options
  • Save mikaelbr/9900818 to your computer and use it in GitHub Desktop.
Save mikaelbr/9900818 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
// === Arrays
var [a, b] = [1, 2];
console.log(a, b);
//=> 1 2
// Use from functions, only select from pattern
var foo = () => [1, 2, 3];
var [a, b] = foo();
console.log(a, b);
// => 1 2
// Omit certain values
var [a, , b] = [1, 2, 3];
console.log(a, b);
// => 1 3
// Combine with spread/rest operator (accumulates the rest of the 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
// 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
// === Potential grammar hiccups
// Oops: This doesn't work:
var a, b;
{ a, b } = {a: 1, b: 2};
// But this does work
var a, b;
({ a, b } = {a: 1, b: 2});
console.log(a, b);
// => 1 2
// This due to the grammar in JS.
// Starting with { implies a block scope, not an object literal.
// () converts to an expression.
// From Harmony Wiki:
// Note that object literals cannot appear in
// statement positions, so a plain object
// destructuring assignment statement
// { x } = y must be parenthesized either
// as ({ x } = y) or ({ x }) = y.
// === Combined destructuring of objects and arrays
// Combine objects and arrays
var {prop: x, prop2: [, y]} = {prop: 5, prop2: [10, 100]};
console.log(x, y);
// => 5 100
// === Nested object destructuring
// 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
// === Nested advanced examples
// 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
// === In combination with other ES2015 features.
// Computed property names
const name = 'fieldName';
const computedObject = { [name]: name }; // (where object is { 'fieldName': 'fieldName' })
const { [name]: nameValue } = computedObject;
console.log(nameValue)
// => fieldName
// === Rest and defaults
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' ]
ajax({ });
// => Url: localhost Port: 80 Rest: []
// Doesn't work due to trying to destructure undefined
ajax();
// => Uncaught TypeError: Cannot match against 'undefined' or 'null'
// To fix this we need to have default value for parameter in function
// Note: See the `= {}` at the end, saying default empty object if the first argument is undefined.
var ajax = ({ url: url = "localhost", port: p = 80} = {}) => {
console.log("Url:", url, "Port:", p);
};
// Now this works.
ajax();
// => Url: localhost Port: 80
ajax({ });
// => Url: localhost Port: 80
ajax({ port: 8080 });
// => Url: localhost Port: 8080
ajax({ url: "someHost", port: 8080 });
// => Url: someHost Port: 8080
// === Similar to _.pluck
var users = [
{ user: "Name1" },
{ user: "Name2" },
{ user: "Name2" },
{ user: "Name3" }
];
var names = users.map( ({ user }) => user );
console.log(names);
// => [ 'Name1', 'Name2', 'Name2', 'Name3' ]
// === Usage in for..of loops
var users = [
{ user: "Name1" },
{ user: "Name2", age: 2 },
{ user: "Name2" },
{ user: "Name3", age: 4 }
];
for (let { user, age = "DEFAULT AGE" } of users) {
console.log(user, age);
}
// => Name1 DEFAULT AGE
// => Name2 2
// => Name2 DEFAULT AGE
// => Name3 4
@PeterWhittaker
Copy link

PeterWhittaker commented Apr 28, 2020 via email

@mikaelbr
Copy link
Author

Read the last part of my comment above on escaping. If you want to keep \n as just literal text, you escape the new line character. Read this for instance: https://stackoverflow.com/questions/25921319/escape-new-lines-with-js

@PeterWhittaker
Copy link

PeterWhittaker commented Apr 29, 2020 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment