Add, Update and Delete properties from JavaScript Object

Tags: javascript, html, webdev, css
Published: 2020-11-29 15:02:37

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.
```javascript
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.
```javascript
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.
```javascript

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.
```javascript
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.
***
```javascript
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`.
```javascript
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.
```javascript
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)
```
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*