4 Ways To Add Properties To A Javascript Object

Welcome to a quick tutorial and examples on how to add properties to a Javascript object. Have you tried using the “usual” array push and concat on objects in Javascript? Just to find out that they don’t work? Well, arrays and objects are 2 different stories in Javascript.

Here are the common ways to add properties to an object in Javascript:

  1. Use the dot operator – OBJECT.KEY = VALUE;
  2. Use the square bracket operator – OBJECT[KEY] = VALUE;
  3. Using the spread operator – OBJECT = {...OBJECT, KEY: VALUE, KEY: VALUE};
  4. Finally, the assign function – Object.assign(OBJECT, {KEY: VALUE});

But just how does each one of these work exactly? Let us walk through a couple of examples in this guide, read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Add Property Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

ADD PROPERTIES TO OBJECTS

All right, let us now get into the examples of adding properties to an object in Javascript.

 

1) DOT OPERATOR

1-dot-operator.html
// (A) ORIGINAL OBJECT
var myobj = { name : "Jon Doe" };
console.log(myobj); 
 
// (B) DOT OPERATOR APPEND
myobj.email = "jon@doe.com";
myobj.address = "123 Foo Street";
 
// (C) THE RESULT
// {name: "Jon Doe", email: "jon@doe.com", address: "123 Foo Street"}
console.log(myobj); 

This is the easiest Captain Obvious method to add properties – Just use the dot operator OBJECT.KEY = VALUE.

 

2) SQUARE BRACKET OPERATOR

2-square-operator.js
// (A) ORIGINAL OBJECT
var myobj = { name : "Jon Doe" };
console.log(myobj); 
 
// (B) SQUARE BRACKET OPERATOR
myobj['fav color'] = "Blue";
myobj['fav food'] = "PuPu Platter";
 
// (C) RESULT
// {name: "Jon Doe", fav color: "Blue", fav food: "PuPu Platter"}
console.log(myobj);

This is the alternative using square bracket operators instead OBJECT[KEY] = VALUE. But what is the difference? Why is there a need for another “confusing” operator? In simple terms, it is impossible to do myobj.fav color = "Blue" – It will throw an error.

  • The square brackets allow spaces in the key.
  • While the dot operator is something like a “lazy shorthand”.
  • Both are correct.

 

 

3A) SPREAD APPEND

3A-spread-append.html
// (A) ORIGINAL OBJECT
var myobjA = {
  name : "Jon Doe"
};
console.log(myobjA);

// (B) APPEND USING SPREAD
// {name: "Jon Doe", gender: "male", fav food: "Acai"}
var myobjB = {
  ...myobjA,
  gender : "male",
  "fav food" : "Acai"
};
console.log(myobjB);

The spread operator is introduced in ES6. In simple terms, it simply “lays all the properties/elements out one-by-one”, saving you the trouble of having to loop through them manually. The usage is pretty genius – Just spread an existing object into another to append more properties.

 

3B) SPREAD COMBINE

3B-spread-combine.html
// (A) ORIGINAL OBJECTS
var myobjA = {
  name : "Jon Doe"
};
var myobjB = {
  gender : "male",
  "fav food" : "Acai"
};
console.log(myobjA);
console.log(myobjB);

// (B) COMBINE USING SPREAD
// {name: "Jon Doe", gender: "male", fav food: "Acai"}
var myobjC = {
  ...myobjA,
  ...myobjB
};
console.log(myobjC);

Using the same spread operator, we can also combine multiple objects together by “spreading” them into a new one.

 

 

4A) ASSIGN APPEND

4A-assign-append.html
// (A) ORIGINAL OBJECT
var myobj = { name : "Jon Doe" };
console.log(myobj); 

// (B) ASSIGN APPEND
myobj = Object.assign(myobj, { 
  email: "jon@doe.com",
  gender: "male"
});

// (C) THE RESULT
// {name: "Jon Doe", email: "jon@doe.com", gender: "male"}
console.log(myobj); 

The Object.assign() function should be straightforward enough, it accepts 2 or more parameters:

  • The first one is the target object where you want to append everything into.
  • Followed by however many objects you want to append.

 

4B) ASSIGN COMBINE

4B-assign-combine.html
// (A) ORIGINAL OBJECTS
var myobjA = { name : "Jon Doe" };
var myobjB = { email : "jon@doe.com" };
console.log(myobjA);
console.log(myobjB);

// (B) ASSIGN COMBINE
var myobjC = Object.assign(
  myobjA,
  myobjB,
  { gender: "male" }
);

// (C) THE RESULT
// {name: "Jon Doe", email: "jon@doe.com", gender: "male"}
console.log(myobjC); 

Following up from the above example – This is how we can put multiple objects into Object.assign() to combine them together.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

Add Properties To Javascript Object (Click To Enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

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