Add, Update and Delete properties from JavaScript Object

#javascript #html #webdev #css

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)

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)

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)

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)

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)

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)

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)