JavaScript Objects

Build JavaScript Objects

You may have seen the term object before.
Objects are similar to arrays, except that instead of using indexes to access and modify their data, you access the data in objects through what are called properties.

• Example:

var myDog = {
  name: "Anakin",
  legs: 4,
  tails: 1,
  friends: ["Obi-woof", "Ahso-bark"]
};

In this example, we made an object that represents a dog called myDog which contains the properties name (a string), legs, tails and friends.
You can set these object properties to whatever values you want, for this challenge as long as name is a string, legs and tails are numbers, and friends is an array.

Accessing Object Properties with Dot Notation

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

• Here is an example of using dot notation (.) to read an object's property:

var testObj = {
  console: "PS5",
  game: "God Of War",
  friends: ["Alan", "Diego"]
};

var consoleValue = testObj.console;
var gameValue = testObj.games; 
console.log(consoleValue); // will display PS5
console.log(gameValue); // will display God Of War

Here we set the variable consoleValue equal to the object's property console and set the variable gameValue equal to the object's property game using dot notation.

Accessing Object Properties with Bracket Notation

The second way to access the properties of an object is bracket notation ([]). If the property of the object you are trying to access has a space in its name, you will need to use bracket notation.

However, you can still use bracket notation on object properties without spaces.

Here is an example of using bracket notation to read an object's property:

var testObj = {
  "my entree": "hamburger",
  "my side": "fries",
  "my drink": "water"
};

var entreeValue = testObj["my entree"];
var drinkValue = testObj["my drink"]; 

console.log(entreeValue); // will display hamburger
console.log(drinkValue); // will display water

testObj["my entree"] would be the string hamburger, testObj["my drink"] would be the string water. We assigned them to entreeValue and drinkValue.

• Also Note that property names with spaces in them must be in quotes (single or double).

Accessing Object Properties with Variables

Another use of bracket notation on objects is to access a property which is stored as the value of a variable. This can be very useful for iterating through an object's properties or when accessing a lookup table.

• Example:

var testObj = {
  12: "Namath",
  16: "Montana",
  19: "Unitas"
};

var playerNumber = 16;     
var player = (testObj[playerNumber]);   

console.log(player); will display Montana

Here we set the playerNumber variable to 16. Then, use the variable to look up the player's name and assign it to player.

Updating Object Properties

After you've created a JavaScript object, you can update its properties at any time just like you would update any other variable. You can use either dot or bracket notation to update.

• Example:

var myDog = {
  name: "Anakin",
  legs: 4,
  tails: 1,
  friends: ["Obi-woof", "Ahso-bark"]
};

myDog.name = "Anakin Skywalker";
console.log(myDog.name); // will display Anakin Skywalker

Here we can change his name to the string Anakin Skywalker. Here's how we update his object's name property:

myDog.name = "Anakin Skywalker";

or

myDog["name"] = "Anakin Skywalker";

Now when we evaluate myDog.name, instead of getting Anakin, we'll get his new name, Anakin Skywalker.

Add New Properties to a JavaScript Object

You can add new properties to existing JavaScript objects the same way you would modify them.

• Here's how we would add a bark property to myDog:

var myDog = {
  name: "Anakin",
  legs: 4,
  tails: 1,
  friends: ["Obi-woof", "Ahso-bark"]
};

myDog.bark = "woof";
console.log(myDog.bark); will display woof

Delete Properties from a JavaScript Object

• We can also delete properties from objects like this:

delete myDog.tails;

var myDog = {
  name: "Anakin",
  legs: 4,
  tails: 1,
  friends: ["Obi-woof", "Ahso-bark"]
};

delete myDog.tails;

After the code runs it will look like this.

{
  name: "Anakin",
  legs: 4,
  friends: ["Obi-woof", "Ahso-bark"]
}

Using Objects for Lookups

Objects can be thought of as a key/value storage, like a dictionary. If you have tabular data, you can use an object to lookup values rather than a switch statement or an if/else chain.

• Here we'll convert the switch statement into an object called lookup. then we use it to look up val and assign the associated string to the result variable.

function phoneticLookup(val) {
  var result = "";

  // Only change code below this line
  switch(val) {
    case "alpha":
      result = "Adams";
      break;
    case "bravo":
      result = "Boston";
      break;
    case "charlie":
      result = "Chicago";
      break;
    case "delta":
      result = "Denver";
      break;
    case "echo":
      result = "Easy";
      break;
    case "foxtrot":
      result = "Frank";
  }

  // Only change code above this line
  return result;
}

phoneticLookup("charlie");

• Then after converting it into an Object called lookup.

function phoneticLookup(val) {
  var result = "";

  // Only change code below this line
  var lookup = {
    "alpha": "Adams",
    "bravo": "Boston",
    "charlie": "Chicago",
    "delta": "Denver",
    "echo": "Easy",
    "foxtrot": "Frank"
  };

  // Only change code above this line
  result = lookup[val];
  return result;
}

console.log(phoneticLookup("charlie")); // will display Chicago

Testing Objects for PropertiesPassed

Sometimes it is useful to check if the property of a given object exists or not. We can use the

.hasOwnProperty(propname)

method of objects to determine if that object has the given property name. .hasOwnProperty() returns true or false if the property is found or not.

• Let's Modify the function checkObj to test if an object passed to the function (obj) contains a specific property (checkProp). If the property is found, let's return that property's value. If not, return "Not Found".

function checkObj(obj, checkProp) {

  if (obj.hasOwnProperty(checkProp)) {
    return obj[checkProp];
  } else {
    return "Not Found";
  }
}

checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "pet") should return the string kitten.
checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "house") should return the string Not Found.

Accessing Nested Objects

The sub-properties of objects can be accessed by chaining together the dot or bracket notation.

• Here is a nested object:

var myStorage = {
  "car": {
    "inside": {
      "glove box": "maps",
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    }
  }
};

var gloveBoxContents = myStorage.car.inside["glove box"];
console.log(gloveBoxContents); // will display maps

Here we accessed the myStorage object and assign the contents of the glove box property to the gloveBoxContents variable using dot notation for all properties where possible, otherwise use bracket notation.