How To 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:

• Cannot convert undefined or null to Object in JavaScript
• Check if an object is empty in JavaScript
• Check if a key exists in a javaScript object

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js