Updating Object Key Values with Javascript

Javascript objects consist of key value pairs and are one of the most common data structures in Javascript.

To update all values in an object, the easiest way is to:

Use Object.keys to get all keys of the object.
Apply any logic, to decide which va…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Johnny Simpson

Javascript objects consist of key value pairs and are one of the most common data structures in Javascript.

To update all values in an object, the easiest way is to:

  1. Use Object.keys to get all keys of the object.
  2. Apply any logic, to decide which values should be updated.
  3. Update the value of each using a loop like forEach or for.

For example:

let myObject = {
    name: "John", 
    skillItem1: 4,
    skillItem2: 7,
    skillItem3: 2,
    skillItem4: 1
}

// Updates any numerical values that are more than or equal to 4, and changes them to 10:
Object.keys(myObject).forEach((item) => {
    if(typeof myObject[item] == "number" && myObject[item] >= 4) {
        myObject[item] = 10
    }
})

console.log(myObject)
// Returns:
// let myObject = {
//     name: "John", 
//     skillItem1: 10,
//     skillItem2: 10,
//     skillItem3: 2,
//     skillItem4: 1

You don't have to apply logic - but it's usually useful. You can also achieve this with a for loop - which is slightly faster than using forEach:


let myObject = {
    name: "John", 
    skillItem1: 4,
    skillItem2: 7,
    skillItem3: 2,
    skillItem4: 1
}

// Updates any numerical values that are more than or equal to 4, and changes them to 10:
for(let item of Object.keys(myObject)) {
    if(typeof myObject[item] == "number" && myObject[item] >= 4) {
        myObject[item] = 10
    }
}

console.log(myObject)
// Returns:
// let myObject = {
//     name: "John", 
//     skillItem1: 10,
//     skillItem2: 10,
//     skillItem3: 2,
//     skillItem4: 1

To update only one value in an object, use the square bracket notation [] to select which key you want to update. For example:

let myObject = {
    name: "John", 
    skillItem1: 4,
    skillItem2: 7,
    skillItem3: 2,
    skillItem4: 1
}

// Updates `skillItem2` to 15
myObject['skillItem2'] = 15;

Javascript objects are created by reference, which is a fancy way of saying that when we make the changes above, we are mutating the original object. That also means that Object.values() does not allow us to update the values of the object, which is why we have to use Object.keys().


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Johnny Simpson


Print Share Comment Cite Upload Translate Updates
APA

Johnny Simpson | Sciencx (2022-10-15T16:34:50+00:00) Updating Object Key Values with Javascript. Retrieved from https://www.scien.cx/2022/10/15/updating-object-key-values-with-javascript/

MLA
" » Updating Object Key Values with Javascript." Johnny Simpson | Sciencx - Saturday October 15, 2022, https://www.scien.cx/2022/10/15/updating-object-key-values-with-javascript/
HARVARD
Johnny Simpson | Sciencx Saturday October 15, 2022 » Updating Object Key Values with Javascript., viewed ,<https://www.scien.cx/2022/10/15/updating-object-key-values-with-javascript/>
VANCOUVER
Johnny Simpson | Sciencx - » Updating Object Key Values with Javascript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/15/updating-object-key-values-with-javascript/
CHICAGO
" » Updating Object Key Values with Javascript." Johnny Simpson | Sciencx - Accessed . https://www.scien.cx/2022/10/15/updating-object-key-values-with-javascript/
IEEE
" » Updating Object Key Values with Javascript." Johnny Simpson | Sciencx [Online]. Available: https://www.scien.cx/2022/10/15/updating-object-key-values-with-javascript/. [Accessed: ]
rf:citation
» Updating Object Key Values with Javascript | Johnny Simpson | Sciencx | https://www.scien.cx/2022/10/15/updating-object-key-values-with-javascript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.