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

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