Skip to content

Instantly share code, notes, and snippets.

@duchuyta

duchuyta/es6-spread-immutable-cheatsheet.md

Forked from gorangajic/es6-spread-immutable-cheatsheet.md
Created June 8, 2020 04:38
Show Gist options
  • Save duchuyta/dcc2516ffb51f9535e4528639246b471 to your computer and use it in GitHub Desktop.
Save duchuyta/dcc2516ffb51f9535e4528639246b471 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @gorangajic gorangajic revised this gist Dec 29, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion es6-spread-immutable-cheatsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@ var state = {
    };

    var newState = {
    ..state,
    ...state,
    points: 120
    }

  2. @gorangajic gorangajic renamed this gist Dec 29, 2016. 1 changed file with 0 additions and 0 deletions.
    0 es6-spread-immutable-spreadsheet.md → es6-spread-immutable-cheatsheet.md
    View file
    File renamed without changes.
  3. @gorangajic gorangajic revised this gist Nov 27, 2015. 1 changed file with 23 additions and 0 deletions.
    23 changes: 23 additions & 0 deletions es6-spread-immutable-spreadsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -104,4 +104,27 @@ console.log(newState);
    {name: "Zika"}
    ]
    */
    ```

    ### normalize array and merge with id=>val object

    ```javascript
    var items = {1: {name: "Airplane", id: 1}, 2: {name: "Spaceship", id:2}};
    var receivedItems = [{id: 3, name: "Quadrocopter"}, {id: 4, name: "Helicopter"}];
    var newState = {
    ...items,
    ...receivedItems.reduce((obj, item) => ({
    ...obj,
    [item.id]: item
    }), {})
    }
    console.log(newState);
    /*
    {
    1: {name: "Airplane", id: 1},
    2: {name: "Spaceship", id: 2},
    3: {name: "Quadrocopter", id: 3},
    4: {name: "Helicopter", id: 4}
    }
    */
    ```
  4. @gorangajic gorangajic revised this gist Nov 27, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion es6-spread-immutable-spreadsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -82,7 +82,7 @@ var state = [
    {name: "Peter"}
    ]

    // find index manually
    // you can use es6 Array.prototype.findIndex to find index of the object
    // let index = state.findIndex(({name}) => name === "Peter");
    var index = 1;
    var field = 'name';
  5. @gorangajic gorangajic revised this gist Nov 27, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion es6-spread-immutable-spreadsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    ### update object

    ```
    ```javascript
    var state = {
    id: 1,
    points: 100,
  6. @gorangajic gorangajic revised this gist Nov 27, 2015. 1 changed file with 43 additions and 1 deletion.
    44 changes: 43 additions & 1 deletion es6-spread-immutable-spreadsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,45 @@
    ### update object

    ```
    var state = {
    id: 1,
    points: 100,
    name: "Goran"
    };
    var newState = {
    ..state,
    points: 120
    }
    console.log(newState);
    /*
    {
    id: 1,
    points: 120,
    name: "Goran"
    }
    */
    ```

    ### update array

    ```javascript
    var state = [1,1,1,1];

    // state[2]++ // [1,1,2,1]
    var index = 2;
    var newState = [
    ...state.slice(0, index),
    state[index] + 1,
    ...state.slice(index + 1)
    ];
    console.log(newState);
    /*
    [1,1,2,1]
    */
    ```

    ### filter object with Array.prototype.reduce

    ```javascript
    @@ -33,7 +75,7 @@ console.log(filteredItems);
    */
    ```

    ### update array using Array.prototype.slice
    ### update array with objects using Array.prototype.slice
    ```javascript
    var state = [
    {name: "Goran"},
  7. @gorangajic gorangajic revised this gist Nov 27, 2015. 2 changed files with 65 additions and 32 deletions.
    65 changes: 65 additions & 0 deletions es6-spread-immutable-spreadsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    ### filter object with Array.prototype.reduce

    ```javascript
    const items = {
    1: {
    id: 1,
    name: "Goran"
    },
    2: {
    id: 2,
    name: "Petar"
    }
    };

    const filterId = 1;

    const filteredItems = Object.keys(items).reduce( (accumulator, key) => (
    items[key].id === filterId ? accumulator : {
    ...accumulator,
    [key]: items[key]
    }
    ), {});

    console.log(filteredItems);
    /*
    {
    2: {
    id: 2,
    name: "Petar"
    }
    }
    }
    */
    ```

    ### update array using Array.prototype.slice
    ```javascript
    var state = [
    {name: "Goran"},
    {name: "Peter"}
    ]

    // find index manually
    // let index = state.findIndex(({name}) => name === "Peter");
    var index = 1;
    var field = 'name';
    var value = 'Zika';

    var newState = [
    ...state.slice(0, index),
    {
    ...state[index],
    [field]: value
    },
    ...state.slice(index + 1)
    ];

    console.log(newState);
    /*
    [
    {name: "Goran"},
    {name: "Zika"}
    ]
    */
    ```
    32 changes: 0 additions & 32 deletions spread-cheatsheat.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,32 +0,0 @@
    // filter from object

    const items = {
    1: {
    id: 1,
    name: "Goran"
    },
    2: {
    id: 2,
    name: "Petar"
    }
    };

    const filterId = 1;

    const filteredItems = Object.keys(items).reduce( (accumulator, key) => (
    items[key].id === filterId ? accumulator : {
    ...accumulator,
    [key]: items[key]
    }
    ), {});

    console.log(filteredItems);
    /*
    {
    2: {
    id: 2,
    name: "Petar"
    }
    }
    }
    */
  8. @gorangajic gorangajic created this gist Nov 27, 2015.
    32 changes: 32 additions & 0 deletions spread-cheatsheat.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    // filter from object

    const items = {
    1: {
    id: 1,
    name: "Goran"
    },
    2: {
    id: 2,
    name: "Petar"
    }
    };

    const filterId = 1;

    const filteredItems = Object.keys(items).reduce( (accumulator, key) => (
    items[key].id === filterId ? accumulator : {
    ...accumulator,
    [key]: items[key]
    }
    ), {});

    console.log(filteredItems);
    /*
    {
    2: {
    id: 2,
    name: "Petar"
    }
    }
    }
    */