Objects

Objects are collections of properties and values.

{
    name: 'Tommy Boy',
    age: 26,
    weight: 306,
    friends: ['Richard', 'Michelle']
}

var person = {
    fullName: 'Tommy Boy',
    age: 26,
    weight: 306,
    friends: ['Richard', 'Michelle']
};

// Two ways to access the data at a object's property:
console.log(person.age);
console.log(person['age']);

Objects vs Arrays

With arrays, your goal is usually to create a collection of similar items. With objects, your goal is usually to give more detail to individual items. For example, when considering Students in a Course, we could consider the Course an array of students. So on one hand, we could show the Course like this:

var course = ["Jim", "Bob", "Sarah", "Jill"];

That works okay, but it doesn't give us very much information about each student! (Only their first name). Modeling each student as an object, instead of a string, would allow us to collect lots of information about each student in the course. So a single student may look more like this:

var jim = {
    firstName: "Jim",
    lastName: "Johnson",
    age: 21,
    email address: "jim_johnson@gmail.com"
}

Lastly, remember how arrays can hold any kind of data we want it to? Well, arrays can hold objects as well! So putting these concepts together, we can have:

var course = [
    {
        firstName: "Jim",
        lastName: "Johnson",
        age: 21,
        email address: "jim_johnson@gmail.com"
    },
    {
        firstName: "Bob",
        lastName: "Ziroll",
        age: 31,
        email address: "bziroll@vschool.io"
    },
    {
        firstName: "Sarah",
        lastName: "Ziroll",
        age: 31,
        email address: "sarahisawesome@gmail.com"
    },
    {
        firstName: "Jill",
        lastName: "Pool",
        age: 51,
        email address: "jackandjill@hill.com"
    }
]

Pass by Reference

var person = {name: 'Frodo', age: 33};
var newPerson = person;

newPerson.name = 'Sam';

console.log(person.name);
console.log(newPerson.name);

This prints out "Sam" twice. This is because the object we created exists, and the variable "person" points to that object. When we say var newPerson = person we are telling our new variable, newPerson, to also point to that object.

There is only one object, with multiple variables pointing to it.

We'll cover this later in more detail, but for more information now about how objects pass by reference, check out our post on mutability and value types.

Methods

We can associate functions to each object too. When a function is part of an object, we call it a method. Even though it has a different name, it essentially does the same thing. In the example below, speak is a method of the person object. Notice we can run the method by calling it by name and adding () afterward.

var person = {
    name: 'The Joker',
    type: 'evil',
    enemy: 'Batman',
    speak: function () {
        console.log('Why so serious?');
    }
};

console.log(person.speak);  // tells you that this is a Function type in the console since we're not executing it with the () yet.
person.speak();

this Keyword

var person = {
    name: 'The Joker',
    type: 'evil',
    enemy: 'Batman',
    speak: function () {
        console.log('My name is ' + this.name);
        console.log('I am ' + this.type + ' and my enemy is ' + this.enemy);
    }
};

person.speak();

The "this" keyword is very context sensitive, but because it's in the above object, it's referring to that object. This way, you don't need to know the name of the variable (person) in order to access its properties. Otherwise, if the variable name changed, you'd have to change it in all the methods of that object too!

Methods Continued

Sometimes methods are meant to change an objects properties. The method itself doesn't necessarily return anything, but it could change something about the object. In the example below, there's a birthday() method that adds 1 to the person's age.

var person = {
    name: 'Harry',
    age: 11,
    birthday: function () {
        this.age++;
    }
};

console.log(person.age);
person.birthday();
console.log(person.age);

Constructor functions

In object-oriented programming, a "class" (or in JavaScript, a "constructor function") is a template for creating objects. This way, we can create many objects without having to write them each manually. When we have objects that are going to be similar in structure, but not in values, that's the perfect time for a constructor function. When you create an object from a constructor, we call that object an instance of the constructor.

For example, a car object might have certain attributes every time (number of doors, color, number of wheels, engine horsepower, make, model, year, etc.). In other words, every car will have those properties (even if the values are different from car to car). This is a perfect time to use a constructor. The car constructor below has a name, make, color, year, etc:

function Car(myModel, myMake, myColor, myYear) {
    this.model = myModel;
    this.make = myMake;
    this.color = myColor;
    this.year = myYear;
};

To create a new object instance from a constructor, you use the new keyword before executing the constructor function with the specified parameters:

var car1 = new Car('Camry', 'Toyota', 'Silver', 2002);
var car2 = new Car('Model 3', 'Tesla', 'White', 2019);

console.log(car1.make);  // "Toyota"
console.log(car2.make);  // "Tesla"