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

Questions

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

April 20, 2022

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?

>Solution :

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