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!";
var greetings = ["Hello!", "¡Hola!", "Bonjour!"];
var emptyArray = [];
var someNumbers = [1, 2, 3];
var nestedArray = [[1, 2, 3], [4, 5], [6]];
var mixedArray = [1, 'Hello!', true, null];
var numberArray = [2, 4, 100];
numberArray[2];
// -> 100

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
var person1 = ["Bob", "Brown", "Blue", "Skydiving"]
"Bob's hair color is " + person1[1]
// -> Bob's hair color is Brown

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"
var person1 = {
name: "Bob",
hairColor: "Brown",
favoriteColor: "Blue",
hobbies: ["Skydiving"]
};
name: "Bob"
var person1 = {
name: "Bob",
hairColor: "Brown",
favoriteColor: "Blue",
hobbies: ["Skydiving", "Singing in the Shower", "Gerrymandering"]
};

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

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.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store