How to Create and Use Basic Objects in Javascript

Previous posts have covered strings, numbers, and arrays. Arrays can help organize related strings and numbers into a list-like behavior, but finding items in the list can be a bit difficult. Javascript offers one more method to organize data called an “object”.  Objects store and retrieve items using a key – value system. For example, if you had an item located somewhere in a room full of lockers, you might tell someone to go and get me the contents of locker 15. In this example, the key is 15. Another example might be a phone book or encyclopedia (ancient relics of the past), where the key would be the subject title or person’s name and the value is the content.

Time to break some stuff

Ok, let’s go back to the console to look at this concept first hand. (First post covers opening the console) Let’s create a new object called “bank”. Enter the following into the console var
bank = {}. When you press enter, it will create a new object and store it as a variable named bank. To verify this, you can type bank and hit enter. The console will show you a set of brackets like {}. Now, most banks have accounts, so let’s add a few accounts to our bank. Good news, our first customer John just walked in and created a new savings account with $500. So we need to store at least two bits of information about John’s bank account, the balance, and the account type. For our bank, we need to store multiple bits of information about each account, the best way to do this is by using an object.

As you just learned, objects can store string and numbers, but they can also hold other objects. With that in mind, let’s create a new object called John. But this time instead of creating an empty object, we will create the object with John’s account information. Similar to when we created the bank object, we will use the var keyword and a set of brackets, but our brackets this time will not be empty. We will add the object’s data inside the brackets and each entry will be delimited by a comma. Each item entry is a key-value pair with a colon separator. So for John’s account it will look like var john =
{balance: 500, accountType: "savings"}. There are a few things here I want to point out, as I hope to prevent you from confusion. First, you should notice that the “Keys” balance and accountType are not in quotes; this is because they are the “keys” and in the same way that our object name “John” isn’t required to be in quotes, they do not need them either. Now it is OK to add the quotes and var john =
{"balance": 500, "accountType": "savings"} would be perfectly valid. Second, string values need to be in quotes, but numbers do not. So now we have an object called bank and an object called account, but this is not very useful yet because we want John’s account to be part of the bank variable.

Putting it all together

Now we need to add John’s account to our new bank. With John’s account, we added the values during the object creation, but we created the bank as an empty object. Now we can add John’s account object to our bank object. There are a few ways to add to objects, here I will cover “dot notation”. Adding a subobject to an outer object looks like outerObject.subObject = “value” keep reading a bit if that is confusing. Hopefully, our bank example will help. We already created our empty bank with var
bank = {}, now to

add John’s account to our bank with the key, “johnsAccount” we enter bank.johnsAccount
= john. Great, now our bank has a new customer named John and we can access his account info using the same dot notation bank.johnsAccount This will return us John’s account details.

Bonus material

John just came back in and deposited an extra $100, now we need to update his balance, how can we do this? To update John’s account, we can use the dot notation to access his balance and update it. To add $100 we could set it to 600 using bank.johnsAccount.balance
= 600, but we could instead let Javascript do the math. There are a few special operators for add, subtract and other math functions. To add to a variable, we can use the += operator. This is called the “plus assignment” operator. It’s called “assignment” since it does the math and reassigns the variable of the output. If we wanted to add 100 to the balance without using the assignment operator, it would look like this: bank.johnsAccount.balance =
bank.johnsAccount.balance + 100. However, using the assignment operator shortens the statement quite a bit to just bank.johnsAccount.balance += 100. Running this will update the balance by adding $100. There is also the -= assignment operator which works the same way, but of course, subtracts.

Strange behavior

There is one strange side effect of changing the bank balance. We updated bank.johnsAccount.balance, but what about our original variable of john? It turns out that it gets updated too. Take a look, type john in the console and hit enter and you will see that john.balance has been updated. This is because bank.johnsAccount wasn’t just set to the value of “john”, it actually is a reference to the variable john. Updating one changes the other as well.

This is a special feature of objects, this same behavior is not repeated with string or number variables. For example, var
foo = "bar" followed by var bax = foo of course sets bax to the value of foo, which is then the string “bar”. You might think that changing foo would also change the value of bax, yet it doesn’t.

Can you think of some good uses for objects? Leave me some examples in the comments. Remember to practice what you are reading. When I was first learning, I could read and read, but it only “sunk in” once I practiced it. So go ahead and open up that console.