JavaScript Objects

Objects are a key part of JavaScript. In their most simple form, they are key-value pairs made up of properties/keys and values e.g.

let myTeam = { 
  name: 'Liverpool', 
  stadium: 'Anfield', 
  city: 'Liverpool' 
} 
// The properties/keys are name, stadium, and city 
// The values are with Liverpool, Anfield, and Liverpool

Adding and Accessing Properties

As with arrays properties can be added to an object using either dot (.) or bracket [] notation. Note: if the property name has a space in it or you want to use a variable you will need to use bracket notation e.g.

myTeam.manager = 'Jurgen Klopp' 
myTeam[founded] = 1892 
myTeam['trophies won'] = { 
  'European Cups': 6, 
  'League Titles' : 19
}

The myTeam object now contains the following which shows as with arrays you can nest objects inside objects e.g.

myTeam = { 
  name: 'Liverpool', 
  stadium: 'Anfield', 
  city: 'Liverpool', 
  manager: 'Jurgen Klopp', 
  founded: 1892, 
  'trophies won': { 
    'European Cups' : 6, 
    'League Titles': 19 
   }
}

myTeam['trophies won']['European Super Cups'] = 3 

Accessing properties follow the same format e.g.

myTeam.manager // 'Jurgen Klopp'
 myTeam['trophies won']
 // { 
  'European Cups': 6, 
  'League Titles' : 19, 
  'European Super Cups' : 3 
}
 myTeam['trophies won']['European Super Cups'] // 3 

Checking Properties

To check if an object has a specific property you can use

• hasOwnProperty('propname') - this method will return a boolean based on the outcome of this check against property e.g.

let myTeam = { 
  name: 'Liverpool', 
  stadium: 'Anfield', 
  city: 'Liverpool', 
  manager: 'Jurgen Klopp' 
} 

myTeam.hasOwnProperty('manager') 
// returns true as this prop exists in the object 
myTeam.hasOwnProperty('founded') 
// returns false as this prop does not exist in the object 

• for... in statement - this method can be used to iterate over all the keys in an object e.g.

for(const val in myTeam) console.log(val) 
// returns name, stadium, city, manager, trophies won 

• Object.keys() - This method will return an array of all the keys stored in the object which you pass in as a parameter e.g.

console.log(Object.keys(myTeam))
// [ 'name', 'stadium', 'city', 'manager' ]

• Object.values() - works in a similar way to for... in as it will provide the values in the same order, but it will return an array e.g.

for(const val of Object.values(myTeam)) console.log(myTeam)
// returns ['Liverpool', 'Anfield' 'Liverpool', 'Jurgen Klopp'] 

Object.entries() - this method returns an array of the objects string-keyed property [key, value] pairs

console.log(Object.entries(myTeam))
// [ 'name', 'Liverpool' ] 
// [ 'stadium', 'Anfield']
// [ 'city", 'Liverpool' ]
​// [ 'manager', 'Jurgen Klopp' ]

Remove Properties

To remove properties from an object, use the delete keyword e.g.

let myTeam = { 
  name: 'Liverpool', 
  stadium: 'Anfield',
  city: 'Liverpool' 
}

delete myTeam.city 

myTeam: { 
  name: 'Liverpool', 
  stadium: 'Anfield' 
} 

Prevent mutation

Object.freeze() - This method will prevent an object from being mutated in any way so you cannot add, remove or update any of the properties in the object. e.g.

Object.freeze(myTeam) 
myTeam.fullName = 'Liverpool Football Club' 
// this will be ignored as the freeze prevents any mutation to the myTeam object 

It's not an exhaustive list but a few methods I have learnt. If any feedback or suggestions let me know.