JavaScript for the Complete Beginner | Part 4 — Objects and Arrays

Last time we discussed some of more common data types in JavaScript. Today we’ll continue with that discussion by focusing on objects and arrays. Data types like String, Number, Boolean are known as Primitive data types, while Objects are Structural data types. Don’t worry too much about learning what the differences are right now, just remember that primitive data types refer to a single piece of data like 33 or “Hello” while structural data types can hold many pieces of data and data types. Let’s jump in before I confuse you further:

Arrays [ ]

What happens when we want to group data together? Let’s say, for example that we have three different greetings:

var greeting1 = "Hello!";
var greeting2 = "¡Hola!";
var greeting3 = "Bonjour!";

How do we group these three greetings together so people know they’re related? Let’s open up JSBin and type in the following:

var greetings = ["Hello!", "¡Hola!", "Bonjour!"];

We’ve created an array! Let’s break this down. To declare an array we use brackets []. So we can create an empty array like this:

var emptyArray = [];

Notice how we still use var and assign our empty array a variable name, in this case emptyArray. The items in an array are known as elements, and are separated by commas:

var someNumbers = [1, 2, 3];

We don’t need to put spaces after the elements, but it makes it more legible. Arrays can hold other data types, including other arrays:

var nestedArray = [[1, 2, 3], [4, 5], [6]];

This is called nesting. Here, we have an array that has three arrays in it, [1, 2, 3], [4, 5], and [6]. The last one only has a single element in it, 6. We can also mix data types in arrays:

var mixedArray = [1, 'Hello!', true, null];

To refer to data in an array we use it’s index position:

var numberArray = [2, 4, 100];
numberArray[2];
// -> 100

Notice how array[2] returns the third element in the array. This is because arrays in JavaScript are zero-indexed. To refer to the first element use array[0].

🚩Why is JavaScript zero-indexed?

It’s complicated. Most of the ones you’ve heard about are; some aren’t. The second I go into anymore detail I’ll probably summon the hordes of supporters from both sides and regret ever mentioning it. Just remember that JavaScript is zero-indexed.

Insert snappy transition title here

Though arrays are great for storing data, what happens if we want to store something like the following:

Name: Bob
Hair: Brown
Favorite Color: Blue
Hobbie(s): Skydiving

We could just use an array. Something like the following:

var person1 = ["Bob", "Brown", "Blue", "Skydiving"]
"Bob's hair color is " + person1[1]
// -> Bob's hair color is Brown

But we’d have to remember that the name is first, then hair color, etc. It would be a pain. And as a programmer it’s important that we make our own pains instead of relying on others to make them for us. That brings us to Objects.

Objects

Objects are the bread and butter of JavaScript. An object solves our memory problems by pairing every value with a key. These are known as key-value pairs. Yes, you should memorize this. A key-value pair is known as a property. Let’s look at an example:

var person1 = {name: "Bob", hairColor: "Brown", favoriteColor: "Blue", Hobbies: ["Skydiving"]}
"Bob's hair color is " + person1.hairColor
// -> "Bob's hair color is Brown"

Look at how much easier that is to remember! I’ll explain how we accessed his hair color in a second. I first want to mention how we should format objects in our code. Instead of what I did above, many developers will put each property or key/value pair on it’s own line like so:

var person1 = {
   name: "Bob", 
   hairColor: "Brown", 
   favoriteColor: "Blue", 
   hobbies: ["Skydiving"]
};

This is much more legible and how we should format our code. Now we can better see how objects are coded. We use curly braces{} for objects, unlike arrays which use brackets[]. Then we put the name of the key: name, for example. Then we put a colon and finally the value that key points to.

name: "Bob"

Notice too that, just like an array, we put a comma between the different properties. And finally notice our value can be another object or array! Bob, after all, is allowed to have multiple hobbies.

var person1 = {
   name: "Bob", 
   hairColor: "Brown", 
   favoriteColor: "Blue", 
   hobbies: ["Skydiving", "Singing in the Shower", "Gerrymandering"]
};

Almost all programming languages use things like objects to store data to some degree. Python calls it’s key-value collection a dictionary. Dictionary’s a great word to describe the how and why of objects: we look up a word to find its definition the same way we look up a key to find its value.

Dot Notation

So how do we access the properties of an object? We use something called dot notation. We type in the name of the object followed by a period and the name of the key who’s value we want. For example:

var person1 = {
   name: "Bob", 
   hairColor: "Brown", 
   favoriteColor: "Blue", 
   hobbies: ["Skydiving", "Singing in the Shower", "Gerrymandering"]
};
person1.name
// -> Bob
person1.hobbies
// -> ["Skydiving", "Singing in the Shower", "Gerrymandering"]

Make sure your key matches exactly. Hobbies is not the same as hobbies. How do we get the second hobby in the Bob’s object? By combing dot notation and the bracket notation we use with arrays:

var person1 = {
   name: "Bob", 
   hairColor: "Brown", 
   favoriteColor: "Blue", 
   hobbies: ["Skydiving", "Singing in the Shower", "Gerrymandering"]
};
person1.hobbies[1]
// -> "Singing in the Shower"

We can also use bracket notation with objects:

var person1 = {
   name: "Bob", 
   hairColor: "Brown", 
   favoriteColor: "Blue", 
   hobbies: ["Skydiving", "Singing in the Shower", "Gerrymandering"]
};
person1["name"]
// -> "Bob"

Notice, however, that we have to put the key in quotation marks and we end up with 3 additional characters( . vs [“”]) that we wouldn’t of had to type if we just used dot notation. Use dot notation.

Conclusion

Whew that was a lot! Honestly, we could spend hours and hours just talking about objects and arrays. These are both important concepts so it’s alright to go through this slowly and make sure you understand everything. Next time we’ll actually get into the “programming” part of programming and learn about functions.