Learn To Code

Javascript Objects

June 08, 2021

So far we’ve talked about having one variable at a time: one first name, one last name, one price, etc. What if we have a collection of data? It’d be nice to group together like data. Good news! You can!

javascript
const person = {
name: "Brian Holt",
city: "Seattle",
state: "WA",
favoriteFood: "🌮",
wantsTacosRightNow: true,
numberOfTacosWanted: 100,
}
console.log(person)
console.log(person.name)
console.log(person["name"]) // same as the line above; prefer using the other one

This is called an object. They’re extremely useful in JavaScript; they’re how you’ll group together like-information so that they can be used together. They contain a bunch of keys and values. The keys are on the left side of the : and represent how you get that piece data of out of the object. name is one such key, and the way I get the name of the

Used in conjunction with functions they’re very powerful. Take this example:

javascript
const person1 = {
name: "Angie",
ageRange: "25-35",
}
const person2 = {
name: "Francesca",
ageRange: "65-75",
}
function suggestMusic(person) {
if (person.ageRange === "25-35") {
console.log("We think you will like Daft Punk.")
} else if (person.ageRange === "65-75") {
console.log(
"You are obviously going to like Johnny Cash."
)
} else {
console.log(
"Uh, maybe try David Bowie? Everyone likes David Bowie, right?"
)
}
}
suggestMusic(person1)
suggestMusic(person2)

Now we’re able to pass all this information as one package which makes it easy to keep track of since we’re just passing one variable. You’ll see this become even more useful as we start integrating with servers and APIs.

Objects can even have their functions! Let’s see that.

javascript
const dog = {
name: "dog",
speak() {
console.log("woof woof")
},
}
dog.speak()

Objects can as well have nested objects inside of them.

javascript
const me = {
name: {
first: "Brian",
last: "Holt",
},
location: {
city: "Seattle",
state: "WA",
country: "USA",
},
}
console.log(me.name.first)
console.log(me.location.state)


All credits to creator of content before I tweaked it a bit: Brian Holt