What's the best way of dealing with optional and dynamic function parameters?

Question

This is my function that generates and returns an array (Please see the comments in the code below):

const getStylesArray = (noteBlockSettings, blockId, key, value) => {

    // ---------------------------------------------------
    // noteBlockSettings parameter will be passed to this function no matter what. 
    // So it is definetely not undefined.

    // NoteBlockSettings has bgOpacity, bgColor, primaryColor, secondaryColor, textColor keys and values.

    // key and value parameters of this function are optional, so they may be undefined or not.

    // ***** What i am trying to achieve is : *****
    // If key parameter is passed (can be bgOpacity, bgColor, primaryColor, secondaryColor, textColor)
    // use this passed parameter rather than the value in noteBlockSettings object. 
    // If key parameter is undefined, use the value in noteBlockSettings object.
    
    // ---------------------------------------------------

    let { bgColor, primaryColor, secondaryColor, bgOpacity, textColor } = noteBlockSettings

    if (key === 'bgColor') {
         bgColor = value
    }

    if (key === 'primaryColor') {
         primaryColor = value
    }

    if (key === 'secondaryColor') {
         secondaryColor = value
    }

    if (key === 'bgOpacity') {
         bgOpacity = value
    }

    if (key === 'textColor') {
         textColor = value
    }


    const stylesArray = [
         // Here i am using the variables defined above to dynamically generate the array
         // Like bgOpacity, bgColor, primaryColor, secondaryColor, textColor etc..
         {
              styleClass: '.head',
              styleValue: `background:${addAlpha(colord(bgColor).lighten(0.075).toHex(), bgOpacity)}; border-color:${addAlpha(colord(bgColor).darken(0.06).toHex(), bgOpacity)};`,
              styleTriggers: 'bgColor bgOpacity',
         },

         {
              styleClass: '.head .options .btn-icon',
              styleValue: `color:${addAlpha(colord(textColor), 0.4)};`,
              styleTriggers: 'textColor',
         },

         {
              styleClass: '.head .options .btn-icon:hover',
              styleValue: `color:${primaryColor};`,
              styleTriggers: 'primaryColor',
         },
         .
         .
         .
    ]

    // Finally returning the generated array 
    return stylesArray
}

This is working and it is just a primitive attempt. However I don't know how, but I feel like there should be much "smarter" way of handling this.

So, my question is: What is the best and minimal way of achieving the same result?

Answer 1

You can simply get a copy of the noteBlockSettings then extract each values in it.

1. Copy the values by doing

let copy = {...original};

2. Modify any key:

copy[key] = value;

3. Extract the values like you did before

let {a, b, c, d, e, ...} = copy 

const mutateStyles = (noteBlockSettings, blockId, key, value) => {

    // ---------------------------------------------------
    // noteBlockSettings parameter will be passed to this function no matter what. 
    // So it is definetely not undefined.

    // NoteBlockSettings has bgOpacity, bgColor, primaryColor, secondaryColor, textColor keys and values.

    // key and value parameters of this function are optional, so they may be undefined or not.

    // ***** What i am trying to achieve is : *****
    // If key parameter is passed (can be bgOpacity, bgColor, primaryColor, secondaryColor, textColor)
    // use this passed parameter rather than the value in noteBlockSettings object. 
    // If key parameter is undefined, use the value in noteBlockSettings object.
    
    // ---------------------------------------------------

    let noteBlockSettingsCopy = {...noteBlockSettings}

    noteBlockSettingsCopy[key] = value;
    
    let { bgColor, primaryColor, secondaryColor, bgOpacity, textColor } = noteBlockSettingsCopy

    return noteBlockSettingsCopy;
}

let data = { bgColor: "#fff", primaryColor: '#0ff', secondaryColor: "#ff0", bgOpacity: "0.1", textColor: "#000" };

console.log(mutateStyles(data, 1, "bgColor", "#f0f"));