This is a review of what we covered in this tutorial on objects.

There are 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!

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, but then we use curly braces to surround key-value property pairs:

var objectName = { 
  propertyName: propertyValue,
  propertyName: propertyValue,

Below is an object that describes Winston. This object has two properties, \text{hometown} and \text{hair}, and each of the property values are strings:

var aboutWinston = {
  hometown: "Mountain View, CA",
  hair: "no"

Here's a more complex object that describes a cat with four properties: \text{age} , \text{furColor} , \text{likes}, and \text{likes}.

var lizzieTheCat = {
  age: 18,
  furColor: "grey",
  likes: ["catnip", "milk"],
  birthday: {"month": 7, "day": 17, year: 1994}

Notice how each property stores a different data type. \text{age} stores a number, \text{furColor} stores a string, \text{likes} stores an array, and \text{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:

var aboutWinston = {
  "hometown": "Mountain View, CA",
  "hair": "no"

That's equivalent to what we saw before 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:

var aboutWinston = {
  "his hair": "none"

We have to use quotes there, because otherwise the JavaScript interpreter would get confused. Here's a 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. In the first, what we call dot notation, we write the name of the variable, followed by a period, then the property name:

var aboutWinston = {
  hometown: "Mountain View, CA",
  hair: "no"

text("Winston is from " + aboutWinston.hometown, 100, 100);
text("Winston has " + + " hair", 100, 150);

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

var hisHometown = aboutWinston["hometown"];
var hisHair = aboutWinston["hair"];

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

text("Winston's life goal is " + aboutWinston.lifeGoal, 100, 150);

Modifying object properties

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 dot or bracket notation: = "curly"; // Winston gets a wig!

We can also add entirely new properties!

aboutWinston.lifeGoal = "teach JavaScript";

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 is a really useful way of storing data in programs. For example, an array of cats:

var myCats = [
  {name: "Lizzie", 
   age: 18},
  {name: "Daemon",
   age: 1}

for (var i = 0; i < myCats.length; i++) {
  var myCat = myCats[i];
  println( + ' is ' + myCat.age + ' years old.');

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:

var positions = [
    {x: 200, y: 100},
    {x: 200, y: 200},
    {x: 200, y: 300}

for (var i = 0; i < positions.length; i++) {
    var position = positions[i];
    ellipse(position.x, position.y, 100, 100);

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