Is it Possible to Index into an Object Using String Keys From a Dynamic Array in JavaScript?

Question

Is it possible to dynamically set keys when using this syntax as shown in this example?

In this example, the changeValue function changes the state object show at the top. The changeValue function takes an array of string keys to be used as a way to dynamically set the value.

This code does not work and I am not looking for alternative approaches: (within reasonable alternation)

const state = {
    profile: {
        isFollowing: false,
    },
    person: {
        characteristics: {
            gender: "male"
        }
    }
}




console.log(state.profile.isFollowing) //false
console.log(state.person.characteristics.gender) //male
function changeValue(keys, value){
    state[keys] = value
}
console.log(state.profile.isFollowing) //true
console.log(state.person.characteristics.gender) //female




changeValue(["profile", "isFollowing"], true) //<-- using an array of strings
//AFTER STATE CHANGE
//const state = {
//    profile: {
//        isFollowing: true,
//    },
//    person: {
//       characteristics: {
//            gender: "male"
//        }
//    }
//}




changeValue(["person", "characteristics", "gender"], "female") //<-- using an array of strings
//AFTER STATE CHANGE
//const state = {
//    profile: {
//        isFollowing: true,
//    },
//    person: {
//       characteristics: {
//            gender: "female"
//        }
//    }
//}

I don't want to have to manually define the [keys] within the changeValue function.

Is this possible?

Answer 1

No, you can't just index into an object with an array and have it automatically descend hierarchically. There are modules you can install that let you do similar things; for example, check out lodash's set method. You have to join the array into a single .-separated key path string, but it's basically what you're looking for.

However, it's also pretty easy to do it yourself in vanilla JS with a loop:

function changeValue(keyPath, newValue) {
    let target = state
    let key = keyPath[0]
    for (let i=1; i<keyPath.length; ++i) {
        target = target[key]
        key = keyPath[i]
    }
    target[key] = newValue;
}

Here it is in action:

const state = {
    profile: {
        isFollowing: false,
    },
    person: {
        characteristics: {
            gender: "male"
        }
    }
}

function changeValue(keyPath, newValue) {
    let target = state
    let key = keyPath[0]
    for (let i=1; i<keyPath.length; ++i) {
        target = target[key]
        key = keyPath[i]
    }
    target[key] = newValue;
}

changeValue(["profile", "isFollowing"], true);
changeValue(["person", "characteristics", "gender"], "female")
console.log(state);

Answer 2

Sure thing. A helper function like this should do the trick.

const state = {
  profile: {
    isFollowing: false,
  },
  person: {
    characteristics: {
      gender: "male"
    }
  }
}

function changeValue(target, path, value) {
  for(let i = 0; i < path.length - 1; i++) {
    target = target[path[i]];
  }
  target[path[path.length - 1]] = value;
}


console.log(JSON.stringify(state));
changeValue(state, ["profile", "isFollowing"], true);
console.log(JSON.stringify(state));
changeValue(state, ["person", "characteristics", "gender"], "female");
console.log(JSON.stringify(state));

Answer 3

Another method could be to use reduce to work up the object until you get to the last item and then set it's value.

const state = { profile: { isFollowing: false, }, person: { characteristics: { gender: "male" } } }

function changeValue(keys, value){
  keys.slice(0,-1).reduce((acc, k) => acc[k], state)[keys.slice(-1)] = value
}

changeValue(["profile", "isFollowing"], true);
console.log(state);

changeValue(["person", "characteristics", "gender"], "female");
console.log(state);