How To Add A Key/Value Pair To An Object In JavaScript?

Add a key/value pair to an object in javascript

Object in JavaScript is a composite data type. It consists of many key-value pairs. In this post, I will show you how to add a key/value pair to an object in JavaScript.

Add A Key/Value Pair To An Object In JavaScript

There are many ways for you to add a key-value pair to an object in JavaScript. Take a look through all the methods I mention below:

Method 1 – Use the dot notation

const footballPlayer = {name: "Lionel Messi"}
footballPlayer.nationality = "Argentina"
footballPlayer.clubs = ["Barcelona", "PSG"]

console.log(footballPlayer)

Output:

{ name: 'Lionel Messi',
  nationality: 'Argentina',
  clubs: [ 'Barcelona', 'PSG' ] }

Note: If the key contains special characters, for example: ‘/’,’?’,.. you will not be able to use this method. Continuing with the second method, it will be the solution in this case.

Method 2 – Use the square brackets

const footballPlayer = {name: "Lionel Messi", nationality: "Argentina"}
footballPlayer["yearOfBirth"] = 1987

console.log(footballPlayer)

Output:

{ name: 'Lionel Messi',
  nationality: 'Argentina',
  yearOfBirth: 1987 }

Or, as I mentioned above, you can use special characters for the value of the key:

footballPlayer["year-Of-Birth"] = 1987

If you accidentally forget the quotation marks then an error will occur:

footballPlayer[yearOfBirth] = 1987   // Error occurred

Output:

ReferenceError: yearOfBirth is not defined

To get rid of this error, fix the above line of code to look like this:

let field = "yearOfBirth"
footballPlayer[field] = 1987

Method 3 – Use Object.assign() method

Syntax:

Object.assign(root, ...sources)

Parameters:

  • root: the object we want to modify
  • sources: object(s) containing key-value pair(s) we want to apply to the root object

This method allows you to copy all the key-value pairs of one or more objects into the root object, then return the modified root object. Take a look at this example:

const footballPlayer = {name: "Lionel Messi", nationality: "Argentina", age: 34}
const information = {nickname: "La Pulga", age: 35}
Object.assign(footballPlayer, information)

console.log(footballPlayer)

Output:

{ name: 'Lionel Messi',
  nationality: 'Argentina',
  age: 35,
  nickname: 'La Pulga' }

Method 4 – Use the Spread syntax (…)

Simply understand that the spread operator will unpack an entire object – stored as a copy. In the example below, I cloned two objects using the spread operator and combined them to get the result.

let footballPlayer = {name: "Lionel Messi", nationality: "Argentina"}
const childrens = {childrens: ["Mateo", "Thiago", "Ciro"]}
footballPlayer = {...footballPlayer, ...childrens }

console.log(footballPlayer)

Output:

{ name: 'Lionel Messi',
  nationality: 'Argentina',
  childrens: [ 'Mateo', 'Thiago', 'Ciro' ] }

Remember that using let to declare an object instead of const. If you declare an object using const, you will see the following error message:

TypeError: Assignment to constant variable.

Summary

You can choose one of the ways above to add a key/value pair to an object in JavaScript. I hope they work for your program.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *