JavaScript Objects
Tags: javascript
Published: 2021-04-17 17:59:31

---
title: JavaScript Objects
published: true
date: 
tags: javascript
canonical_url: https://cgweb.co.uk/blog/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. 

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

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

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

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

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

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

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

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

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

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

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