Enea Xharja Logo

Javascript Objects

Build JavaScript Objects

Objects represent another data type in JavaScript, which we can use to store information in a structured way. They are similar to arrays, with the exception that, instead of using indexes to access and modify their data, we use properties.

Example:

js
1var human = {
2 name: 'Enea',
3 age: '28',
4 favoriteColors: ['black', 'white'],
5};

Moreover, we can also use numbers as properties and we can even omit the quotes for single-word string properties:

js
1var anotherObject = {
2 make: 'Ford',
3 1: 'one',
4 model: 'focus',
5};

Accessing Object Properties with Dot Notation

There are two ways to access the properties of an object: dot notation (.) and bracket notation ([]).

Dot notation is used particularly when we already know in advance the name of the property we're trying to access.

Example:

js
1var clothes = {
2 shirt: 'jersey',
3 shoes: 'cleats',
4};
5
6var shirtValue = clothes.shirt;
7var shoesValue = clothes.shoes;

Accessing Object Properties with Bracket Notation

The second way to access the properties of an object is using bracket notation ([]). Bracket notation is extremely useful when the property of the object we are trying to access has a space in its name.

Example:

js
1var menu = {
2 'an entree': 'hamburger',
3 'my side': 'veggies',
4 'the drink': 'water',
5};
6
7var entreeValue = menu['an entree'];
8var sideValue = menu['my side'];
9var drinkValue = menu['the drink'];

Accessing Object Properties with Variables

When dealing with objects, we can use bracket notation to access a property which is stored as the value of a variable. This can be extremely useful when iterating through an object's properties.

Example:

js
1var juve = {
2 7: 'Ronaldo',
3 9: 'Higuain',
4 10: 'Dybala',
5};
6
7var playerNumber = 7;
8var player = juve[playerNumber]; // "Ronaldo"

Updating Object Properties

Once a JavaScript object has been created, we can update its properties at any time by using either dot or bracket notation.

Example:

js
1var player = {
2 name: 'Ronaldo',
3 number: 7,
4 goldenBalls: 5,
5};
6console.log(player); // {name: "Ronaldo", number: 7, goldenBalls: 5}
7
8player.name = 'Del Piero';
9player.number = 10;
10console.log(player); // {name: "Del Piero", number: 10, goldenBalls: 5}

Add New Properties to a JavaScript Object

We can add new properties to existing JavaScript objects the same way we modify them.

Example:

js
1var player = {
2 name: 'Ronaldo',
3};
4console.log(player); // Ronaldo
5
6player.number = 7;
7player['goldenBalls'] = 5;
8console.log(player); // {name: "Ronaldo", number: 7, goldenBalls: 5}

Using Objects for Lookups

When we know that our input data is limited to a certain range, we can use an object to look for values rather than a switch statement or an if/else chain.

Example:

js
1// Setup
2function phoneticLookup(val) {
3 var result = '';
4
5 var lookup = {
6 alpha: 'Adams',
7 bravo: 'Boston',
8 charlie: 'Chicago',
9 delta: 'Denver',
10 echo: 'Easy',
11 foxtrot: 'Frank',
12 };
13
14 result = lookup[val];
15 return result;
16}
17
18phoneticLookup('charlie');

Testing Objects for Properties

Sometimes it is useful to check if the property of a given object exists or not. That's why we use the .hasOwnProperty(propname) object method to determine if that object has the given property name. The .hasOwnProperty() method returns true or false if the property is found or not.

Example:

js
1function checkObj(obj, checkProp) {
2 if (obj.hasOwnProperty(checkProp)) {
3 return obj[checkProp];
4 } else {
5 return 'Not Found';
6 }
7}

Accessing Nested Objects

We can access sub-properties of objects by chaining together the dot or bracket notation.

Example:

js
1var myStorage = {
2 car: {
3 inside: {
4 'glove box': 'maps',
5 'passenger seat': 'crumbs',
6 },
7 outside: {
8 trunk: 'jack',
9 },
10 },
11};
12
13var gloveBoxContents = myStorage.car.inside['glove box'];