Skip to content

Instantly share code, notes, and snippets.

@rkichenama

rkichenama/destructuring.js

Forked from mikaelbr/destructuring.js
Created March 5, 2016 21:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rkichenama/9a9a70db6b655a9bb143 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rkichenama/9a9a70db6b655a9bb143 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @mikaelbr mikaelbr revised this gist Apr 4, 2014. 1 changed file with 13 additions and 2 deletions.
    15 changes: 13 additions & 2 deletions destructuring.js
    View file
    Original file line number Diff line number Diff line change
    @@ -84,7 +84,17 @@ var a, b;
    console.log(a, b);
    // => 1 2

    // This due to the grammar in JS. () converts to an expression.
    // This due to the grammar in JS.
    // Starting with { implies a block, 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.




    @@ -148,11 +158,12 @@ ajax({ }, "additional", "data", "hello");
    // => Url: localhost Port: 80 Rest: [ 'additional', 'data', 'hello' ]


    // Ooops: Doesn't work
    // Ooops: Doesn't work (in traceur)
    var ajax = ({ url = "localhost", port: p = 80}, ...data) => {
    console.log("Url:", url, "Port:", p, "Rest:", data);
    };
    ajax({ }, "additional", "data", "hello");
    // probably due to traceur compiler

    But this does:
    var ajax = ({ url: url = "localhost", port: p = 80}, ...data) => {
  2. @mikaelbr mikaelbr revised this gist Apr 2, 2014. 1 changed file with 10 additions and 11 deletions.
    21 changes: 10 additions & 11 deletions destructuring.js
    View file
    Original file line number Diff line number Diff line change
    @@ -64,12 +64,21 @@ 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

    // Oops: This doesn't work:
    var a, b;
    { a, b } = {a: 1, b: 2};

    // Works:
    // But this do work
    var a, b;
    ({ a, b } = {a: 1, b: 2});
    console.log(a, b);
    @@ -78,16 +87,6 @@ console.log(a, b);
    // 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]};
  3. @mikaelbr mikaelbr revised this gist Apr 2, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion destructuring.js
    View file
    Original file line number Diff line number Diff line change
    @@ -108,7 +108,7 @@ console.log(x, b);
    // => Hello c


    === Combining all to make fun happen
    // === Combining all to make fun happen

    // All well and good, can we do more? Yes!
    // Using as method parameters
  4. @mikaelbr mikaelbr revised this gist Apr 2, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion destructuring.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@ console.log(a, b);
    //=> 1 2


    Use from functions, only select from pattern
    // Use from functions, only select from pattern
    var foo = () => {
    return [1, 2, 3];
    };
  5. @mikaelbr mikaelbr revised this gist Mar 31, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion destructuring.js
    View file
    Original file line number Diff line number Diff line change
    @@ -149,7 +149,7 @@ ajax({ }, "additional", "data", "hello");
    // => Url: localhost Port: 80 Rest: [ 'additional', 'data', 'hello' ]


    Ooops: Doesn't work
    // Ooops: Doesn't work
    var ajax = ({ url = "localhost", port: p = 80}, ...data) => {
    console.log("Url:", url, "Port:", p, "Rest:", data);
    };
  6. @mikaelbr mikaelbr revised this gist Mar 31, 2014. 1 changed file with 68 additions and 17 deletions.
    85 changes: 68 additions & 17 deletions destructuring.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,68 +2,97 @@

    var [a, b] = [1, 2];
    console.log(a, b);
    //=> 1 2

    var foo = function () {

    Use from functions, only select from pattern
    var foo = () => {
    return [1, 2, 3];
    };

    var [a, b] = foo();
    console.log(a, b);
    // => 1 2


    var foo = () => {
    return [1, 2, 3];
    };

    var [a, , b] = foo();
    // 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
    // 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
    // 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
    @@ -76,8 +105,11 @@ var {
    }
    } = { 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}) {
    @@ -86,10 +118,11 @@ var foo = function ({prop: x}) {

    foo({invalid: 1});
    foo({prop: 1});
    // => undefined
    // => 1


    // Can also use with the advance example

    // Can also use with the advanced example
    var foo = function ({
    prop: x,
    prop2: {
    @@ -101,17 +134,32 @@ var foo = function ({
    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");

    ajax({
    url: "someHost"
    }, "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
    @@ -121,9 +169,9 @@ var users = [
    { 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
    @@ -135,4 +183,7 @@ var users = [
    ];

    [for ({ user, age = "DEFAULT AGE" } of users) console.log(user, age)];

    // => Name1 DEFAULT AGE
    // => Name2 2
    // => Name2 DEFAULT AGE
    // => Name3 4
  7. @mikaelbr mikaelbr created this gist Mar 31, 2014.
    138 changes: 138 additions & 0 deletions destructuring.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,138 @@
    // === Arrays

    var [a, b] = [1, 2];
    console.log(a, b);

    var foo = function () {
    return [1, 2, 3];
    };

    var [a, b] = foo();
    console.log(a, b);


    var foo = () => {
    return [1, 2, 3];
    };

    var [a, , b] = foo();
    console.log(a, b);


    var [a, ...b] = [1, 2, 3];
    console.log(a, b);


    var [, , , a, b] = [1, 2, 3];
    console.log(a, b);


    // Swap variables
    var a = 1, b = 2;
    [b, a] = [a, b];
    console.log(a, b);



    // Advance deep arrays
    var [a, [b, [c, d]]] = [1, [2, [[[3, 4], 5], 6]]];
    console.log("a:", a, "b:", b, "c:", c, "d:", d);


    // === Objects

    var {user: x} = {user: 5};
    console.log(x);


    var {user: x} = {user2: 5};
    console.log(x);


    var {prop: x, prop2: y} = {prop: 5, prop2: 10};
    console.log(x, y);

    // Short-hand
    var { prop, prop2} = {prop: 5, prop2: 10};
    console.log(prop, prop2);

    // Equal to:
    var { prop: prop, prop2: prop2} = {prop: 5, prop2: 10};
    console.log(prop, prop2);


    // Combine objects an arrays
    var {prop: x, prop2: [, y]} = {prop: 5, prop2: [10, 100]};
    console.log(x, y);


    // Deep objects
    var {
    prop: x,
    prop2: {
    prop2: {
    nested: [ , , b]
    }
    }
    } = { prop: "Hello", prop2: { prop2: { nested: ["a", "b", "c"]}}};
    console.log(x, b);


    // 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});


    // Can also use with the advance example

    var foo = function ({
    prop: x,
    prop2: {
    prop2: {
    nested: b
    }
    }
    }) {
    console.log(x, ...b);
    };
    foo({ prop: "Hello", prop2: { prop2: { nested: ["a", "b", "c"]}}});



    // Combine with other ES6 features.
    var ajax = ({ url = "localhost", port: p = 80}, ...data) => {
    console.log("Url:", url, "Port:", p, "Rest:", data);
    };

    ajax({
    url: "someHost"
    }, "additional", "data", "hello");


    // Like _.pluck
    var users = [
    { user: "Name1" },
    { user: "Name2" },
    { user: "Name2" },
    { user: "Name3" }
    ];

    var names = users.map( ({ user }) => user );
    console.log(names);


    // 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)];