JavaScript – Beginning to work with objects

Objects are an extremely important piece of JavaScript. In fact, everything in JavaScript is an object. Arrays, strings, numbers, are all special types of objects. Objects at their core are just a collection of names and value pairs. Like all of the other data types, there is a lot more to objects, but for now we will focus on the fundamentals. Here is an object representing my name:

{ firstName: 'Edwin', lastName: 'Cromley' }

// The syntax for objects is more commonly written like this.
{
  firstName: 'Edwin',
  lastName: 'Cromley'
}

We have two entries in our object. The first pair has a key firstName and a value 'Edwin', which basically means that the first name for this object is Edwin. Likewise, the key lastName pairs with the value 'Cromley'. Let’s open up the console, and start working with them.

Working with objects

This is a basic object and we can work with them like this:

let myName = { firstName: 'Edwin', lastName: 'Cromley' }

myName.firstName
// Outputs "Edwin"

myName.lastName
// Outputs "Cromley"

We can also create a more detailed object:

let bankAccount = {
  bank: 'Super Awesome Bank',
  routingNumber: 5555555555,
  transactions: [
    {
      type: 'deposit',
      amount: {
        value: 100,
        denomination: 'USD'
      }
    },
    {
      type: 'withdrawal',
      amount: {
        value: 50,
        denomination: 'USD'
      }
    }
  ]
}

bankAccount.bank
// Outputs "Super Awesome Bank"

bankAccount.routingNumber
// Outputs 5555555555

bankAccount.transactions[0].type
// Outputs "deposit"

bankAccount.transactions[1].amount['value']
// Outputs 50

Any of the keys in the object can have any value, here we see a string value for bank, a number for the routingNumber, and an array of objects for transactions. Keys themselves have some restrictions, they can only be a string. Values can be anything though. Because the keys are strings we can also look up the values of objects like this.

let food = { taco: 'delicious' }

food['taco']
// Outputs "delicious"

food.taco
// Outputs "delicious"

So there are two different ways to get a value out of an object, we can use the “array syntax” or use the dot notation. The dot notation is probably the most common, but the array notation in most cases can be much more flexible. We’ll see further on how useful the [] syntax can be used for a lot of different things.

Wrapping up objects

Objects at their core are just a collection of pairs of keys and values. The key is a name where we can lookup the stored value. This allows us to associate names with values. When we get into actual programming situations, we will see how useful this ability to name becomes, as it will allow us to create more understandable code. Objects are very powerful, and are one of the foundational aspects of JavaScript. Remember, almost everything 
in JavaScript is an object.