DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Sanchithasr
Sanchithasr

Posted on • Updated on

Add, Update and Delete properties from JavaScript Object

JavaScript object is a collection of properties, and a property is an association between a name (or key) and a value. And we as developers use it excessively. In the initial days of my programming career, I found it difficult to work with the object manipulation. So today I would like to list out the ways to add, update and delete the properties from an object.


Add property to an Object:

One can add the property to an object by simply giving it a value. Like below example, we are adding the property husband and giving the value directly. We can use bracket too while assigning the value.

var brooklynNineNine = {
  name: 'Raymond Holt',
  currentRole: 'Captian of brooklyn99',
}
brooklynNineNine.husband = 'Kevin' // Or brooklynNineNine['husband'] = 'Kevin'

console.log(brooklynNineNine)
Enter fullscreen mode Exit fullscreen mode

One can use ES7 Syntax and functional approach and add the property which would yield the same result.

var list =
{
  name: 'Michael Scott',
  company: 'Dunder Mufflin',
  designation: 'Regional Manager',
  show: 'The Office',
},


new_obj = { ...list, partner: 'Holly Flax' }

console.table(new_obj)
Enter fullscreen mode Exit fullscreen mode

Delete property from an Object:

One can delete the property from the object using keyword delete . The delete keyword deletes both the value of the property and the property itself. After deletion, the property cannot be used before it is added back again.


var brooklynNineNine = {
  name: 'Amy Santiago',
  currentRole: 'Detective brooklyn99',
  husband: 'Jake Peralta',
  mentor: 'Raymond Holt'
}

delete brooklynNineNine.mentor;

console.log(brooklynNineNine)
Enter fullscreen mode Exit fullscreen mode

Update the value of the existing property:

One can update the value of the property just by reassigning the value to the same key.

var favChar = {
  name: 'Michael Scott',
  company: 'Dunder Mufflin',
  designation: 'Regional Manager',
  show: 'The Office'
}

favChar.designation = 'Hero of Threat Level Midnight'

console.table(favChar)
Enter fullscreen mode Exit fullscreen mode

Add the properties to the array of Object:

Consider we have an array of objects and we want to add the property to the objects in the array. We can achieve this using many array methods(also for loop) . Here I have used the array method .forEach to iterate through the array element and add the property to the object.


const list = [
  {
    name: 'Michael Scott',
    company: 'Dunder Mufflin',
    designation: 'Regional Manager',
    show: 'The Office'
  },
  {
    name: 'Barney Stinson',
    company: 'Golaith National Bank',
    designation: 'Please',
    show: 'How I met your mother'
  },
  {
    name: 'Jake Peralta',
    company: 'NYPD',
    designation: 'Detective',
    show: 'Brooklyn 99'
  },
]

list.forEach(function (element) {
  element.favCharacter = "true";
});

console.table(list)
Enter fullscreen mode Exit fullscreen mode

Delete the properties from the array of Object:

Here, the delete is done as similar to the addition. The iteration is done using array method .forEach and then the deletion is done using keyword delete.

const list = [
  {
    name: 'Michael Scott',
    company: 'Dunder Mufflin',
    designation: 'Regional Manager',
    show: 'The Office'
  },
  {
    name: 'Barney Stinson',
    company: 'Golaith National Bank',
    designation: 'Please',
    show: 'How I met your mother'
  },
  {
    name: 'Jake Peralta',
    company: 'NYPD',
    designation: 'Detective',
    show: 'Brooklyn 99'
  },
]

list.forEach(function (element) {
  delete element.designation;
});

console.table(list)
Enter fullscreen mode Exit fullscreen mode

Update every values of the existing property in the array of Objects:

Here the array method .every is used to iterate through the elements of the array. The property 'responsibility' is reassigned (β€˜heart of the show to β€˜making people laugh’) to different value.

const list = [
  {
    name: 'Michael Scott',
    company: 'Dunder Mufflin',
    designation: 'Regional Manager',
    show: 'The Office',
    responsibility: 'heart of the show'
  },
  {
    name: 'Barney Stinson',
    company: 'Golaith National Bank',
    designation: 'Please',
    show: 'How I met your mother',
    responsibility: 'heart of the show'

  },
  {
    name: 'Jake Peralta',
    company: 'NYPD',
    designation: 'Detective',
    show: 'Brooklyn 99',
    responsibility: 'heart of the show'

  },
]

list.every(element => element.responsibility = 'making people laugh') // every method is used to iterate through the array


console.table(list)
Enter fullscreen mode Exit fullscreen mode

I have listed few of the ways I know how to add, update and delete the properties. Comment below if you know any other ways.

THANK YOU

Top comments (2)

Collapse
 
tombohub profile image
tombohub

thats not the purpose of every : developer.mozilla.org/en-US/docs/W...

Collapse
 
sanchithasr profile image
Sanchithasr Author

Just saying we can use every array method to iterate. Not saying that’s the exact/sole purpose.

What image format should you use in your next project? πŸ€”