Update key with new value : JavaScript

In this blog, you will know how to update a key with new value in JavaScript by various methods.

 

 

What is a key-value pair?

In JavaScript, a key-value pair is a property of an object. Each property has a name, which is also called a key, and a corresponding value. The keys are to the left of the colon: and the values are to the right of it.

 

For instance, in the below object book – name, author, PublishYear and price are keys whereas “Harry Potter”, “J K Rowling”, 1997, and $25 are values.

 

const book = {
       name: "Harry Potter",
       author: "J.K Rowling",
       PublishYear: 1997,
       price: "$25"
  };

 

 

 

How to update a key with a new value?

 

To update a key with a new value, the dot operator or square brackets [ ] can be used. Use the following syntax,

 

object_Name.key_Name = new value 

object_Name["key_name"] = new value

 

To change the value of the key price to a new value in the above object book, we will write

 

book.price = "$30";   //or book["price"]= "$30"

 

When we will print the object using

 

console.log(book);

 

we will get the following output,

{name : 'Harry Potter', author: 'J.K Rowling', PublishYear: 1997, price: '$30'}

 

 

 

How to update all keys with a new value?

 

Let us create a new object items

 

const items{
      pen : 10,
      pencil : 12,
      notebook : 7,
  };

 

To access object’s keys as an array, we use  object.keys( ) method,

 

console.log(object.keys(items));

 

The output of the above code will be,

['pen', 'pencil', 'notebook']

 

 

Now, we to iterate over the array of keys we will array.forEach( function( currentValue, index, arr )) method.

 

The forEach() method calls a function for each element in an array.

 

The parameters passed are

1. function – a function to run for each element (required).
2. currentValue – the value of the current element (required).
3. index – the index of the current element (optional).
4. arr – the array of the current element (optional).

 

 

Now, to update each key to a new value using object.keys( )  and  forEach()  we write:

 

Object.keys(items).forEach(function(key){
       items[key] = 0;
});

console.log(items);

 

 

Alternatively, we can use the ES6 arrow function representation for simplifying the code:

 

Object.keys(items).forEach(key => {
  obj[key] = '0';
});

 

The output of both the above codes will be:

[ pen : '0' , pencil : '0' , notebook: '0']

 

 

How to Update all the Values in an Object without changing the object?

 

For this we use array.reduce( ) method along with object.keys( ) method to iterate over the array.

 

On each iteration, it will return a new object that contains the values from the previous iteration and the updated value.

 

 

The following code is the example of how we can update all values in an object without changing the object:

 

const items = {
  pen : 10 ,
  pencil : 12,
  notebook : 7,
};

const newItems = Object.keys(items).reduce((accumulator, key) => {
  return {...accumulator, [key]: 0};
}, {});

console.log(newItems); 

console.log(items);

 

The output of the above code:

{ pen : '0', pencil: '0', notebook: '0' }
{ pen : '10', pencil: '12', notebook: '7' }

 

 

We obtained an array by Objects.keys( ) method and then using array.reduce( ) we iterate over the array.

 

The function we passed to the array.reduce( ) method gets called for each element in the array.

 

We passed an initial value of the empty object for the accumulator variable.

 

On each iteration, we use the spread syntax(…) to unpack the key-value pairs of the object into a new object and update the current value.

 

The value we return from the callback function gets passed to the reduce() method as the next value for the accumulator.

 

This method does not change the original object but create a new object.

 

 

Also read, How we can append strings in Python.