Objects
Objects

We have many types of values that we can store in JavaScript variables, and sometimes we want to store a bunch of related values together: that's where objects come in!

⁠

Intro to Objects

An object is a data type that lets us store a collection of properties in a single variable. To create an object, we declare a variable like we normally would, and then we use curly braces to surround key-value property pairs:

Here's an object that describes Winston - this object has two properties, hometown and hair, and each of the property values are strings:

Here's a more complex object that describes a cat, with four properties- age, furColor, likes, and birthday.

Notice how each property stores a different data type- age stores a number, furColor stores a string, likes stores an array, and birthday stores another object. That's the cool thing about objects (well, one of the cool things) - they can store other objects inside them! So you can have deeply nested objects to describe complex data.

You might also see objects declared using quotes around the property names, like:

That's the same with no quote marks, but it takes longer to type. The only time that you absolutely need quote marks is if your property name has a whitespace in it, like:

We have to use quotes there, because otherwise the JavaScript interpreter would get confused. Here's my tip for you:

Just don't use whitespace in your property names to begin with! Then you never have to use quote marks around property names.

⁠

Accessing object properties

An object is not useful unless we can look inside it and grab the values of the different properties. We can do that two ways - first, using what we call "dot notation", where we write the name of the variable, followed by a ".", and then the property name:

We can also use "bracket notation", which looks similar to how we access array elements, where we write the variable name, then square brackets, with the property name inside in quotes:

If we try to access a property that doesn't exist, we'd see "undefined":

⁠

Modifying Objects

Just like when we store other data types in variables, we can change the values of the object properties at any time during a program, using the dot or bracket notation:

We can also add entirely new properties!

If we're done with a property, we can delete it (but most of the time we'll probably just change its value):

⁠

Arrays of Objects

Now that you know both arrays and objects, you can combine them to make arrays of objects, which are actually really useful ways of storing data in programs. For example, an array of cats:

Notice that we iterate through an array of objects the same way that we iterate through an array of numbers or strings, using a for loop. Inside each iteration, we access the current array element with bracket notation, and then access the properties of that array element (an object) with dot notation.

Here's another practical example that you might use in your programs, an array of coordinate positions:

Pretty neat, aye? Objects can be confusing at first, but keep using them, and eventually you'll be addicted and turn everything into an object!

Intro to Objects

Accessing object properties

Modifying Objects

Arrays of Objects

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

ObjectsObjects

Intro to Objects

Accessing object properties

Modifying Objects

Arrays of Objects

Objects
Objects