CODEWITHSUNDEEP
javascriptobject
hgkim
hgkim

Reputation: 95

Edit object value by key itself in Javascript

guys.

I'm making some store system. I have to access my object value like this.

const store = {
    modules: {
    A: {
        numbers: [1, 2, 3, 4]
    },
    B: {
        chars: ['a', 'b']
    }
  }
}

const doubled = {
    store: {
    ...store,
    modules: {
        A: {
        numbers: [...store.modules.A.numbers, ...store.modules.A.numbers]
      }
    }
  }
}

const few = {
    store: {
    ...store,
    modules: {
        A: {
        numbers: store.modules.A.numbers.slice(0, 2)
      }
    }
  }
}

But, this code is too long and it is not useful. I don't like this way.

I want to make the doubled, few to like this short code. (wrong code)

const doubled = {
  store: {
    ...store,
    modules: {
      A: {
        numbers: [...**this.**numbers, ...**this.**numbers]
      }
    }
  }
}

const few = {
  store: {
    ...store,
    modules: {
      A: {
        numbers: **this.**numbers.slice(0, 2)
      }
    }
  }
}

Is there any way to edit object value by key itself?

Upvotes: 1

Views: 85

Answers (1)

Dai
Dai

Reputation: 155145

It looks like you're trying to build a Redux Vuex state store, however you aren't representing your state-transition functions correctly - they should be functions, not objects.

Common logic can be moved into other pure-functions and used via combineReducers. But for the purposes of my answer I'll use a more hand-written approach:

You just need to do this:

Step 1: Notice common functionality

const store = {
    // same as above
};

function doubleNumbers( arr ) {
    return [ ...arr, ...arr ];
}

function take2Numbers( arr ) {
    return arr.slice( 0, 2 );
}

function double( store ) {
    return {
        ...store,
        modules: {
            A: {
                numbers: doubleNumbers( store.modules.A.numbers )
            }
        }
    }
}

function few( store ) {
    return {
        ...store,
        modules: {
            A: {
                numbers: take2Numbers( store.modules.A.numbers )
            }
        }
    }
}

Step 2: Function composition

This can be made syntactically shorter by composing the pure-function for numbers via cloneStateButUpdateNumbers:

function doubleNumbers( arr ) {
    return [ ...arr, ...arr ];
}

function take2Numbers( arr ) {
    return arr.slice( 0, 2 );
}

function cloneStateButUpdateNumbers( store, numbersFunc ) {
    return {
        ...store,
        modules: {
            A: {
                numbers: numbersFunc( store.modules.A.numbers )
            }
        }
    }
}

function double( store ) {
    return cloneStateButUpdateNumbers( store, doubleNumbers );
}

function few( store ) {
    return cloneStateButUpdateNumbers( store, take2Numbers );
}

Step 3: Syntactical terseness:

...and by using ECMAScript 6 arrow-function syntax and const:

const doubleNumbers = ( arr ) => [ ...arr, ...arr ];
const take2Numbers  = ( arr ) => arr.slice( 0, 2 );

// See https://stackoverflow.com/questions/28770415/ecmascript-6-arrow-function-that-returns-an-object 
const cloneStateButUpdateNumbers = ( store, numbersFunc ) => ( {
    ...store,
    modules: {
        A: {
            numbers: numbersFunc( store.modules.A.numbers )
        }
    }
} );

const double = ( store ) => cloneStateButUpdateNumbers( store, doubleNumbers );
const few    = ( store ) => cloneStateButUpdateNumbers( store, take2Numbers );

Ta-da!

Upvotes: 2

Related Questions