21: Simple OOP

To start you off I am going to build up a very tiny little object-oriented system using just data objects and functions. JavaScript has had quite a few iterations of its object-oriented programming system (OOP). By building a very simple one we can look at the internals of how OOP might work before diving into the new way that you build classes and objects.

Let's say we want to write some JavaScript to store information about a person named Frank. Obviously the easiest way to do that is with an object:

View Source file frank.js Only

// data about a person named Frank
let frank = {
    name: "Frank",
    age: 34,
    eyes: "blue"
}

There isn't anything new in this, so you should be able to understand it. If you do not, then go back to the exercise on data objects.

Let's say the next thing we want to do is make Frank talk. To do that we would write a simple function that took the Frank object, and some words, then printed out a message:

View Source file franktalk.js Only

const frank_talk = (who, words) => {
    console.log(`I am ${who.name} and ${words}.`);
}

frank_talk(frank, "I am talking here!");

This works, but it's very annoying. We keep having to say the word "Frank" all the time just to make this code work. It also might make more sense if the function was actually attached to the Frank object. Then all we would have to do is use the . (dot) to get to it.

Since we can put nearly anything in a data object, we can easily just put the talk function inside this object. The syntax is almost the same except we just use a colon and we put it inside the object. Let's make a new person named mary who can speak for herself using this technique:

View Source file mary.js Only

// working with that data by putting functions on it
let mary = {
    name: "Mary",
    age: 44,
    eyes: "brown",
    talk: (who, words) => {
        console.log(`I am ${who.name} and ${words}.`);
    }
}

You now have a new object called mary, and you can call the talk function for mary like this:

View Source file marytalk.js Only

// this is kind of annoying though
mary.talk(mary, "these are some words");
// and this works but that's weird
mary.talk(frank, "I am frank what?");

That's a little bit better, since now it's clear that the talk function is actually on the mary object, but we still have to keep repeating the name of the mary object twice. One way to think of this talk function is we are sort of sending a message to Mary telling her to talk.

The other problem we have with this is we keep having to repeat the same thing over and over again to make a new person. Manual repetition is a source of bugs, and we are programmers, so we should be able to automate this. Why can't we create a function that constructs these person objects for us and adds everything we need to that object?

In this next code listing we do just that by creating a Person function that builds up an object and returns it:

View Source file person.js Only

// we need a way to build these automatically
const Person = (name, age, eyes) => {
    // this makes an obj for the data
    let obj = {
        name: name,
        age: age,
        eyes: eyes
    }

    // then attach our function to it
    obj.talk = (words) => {
        // coolest part is obj here will keep a reference
        console.log(`I am ${obj.name} and ${words}.`);
    }

    // and return our new person
    return obj;
}

This is a lot nicer because now we can use this single function to make as many people as we want in a single line of code. We also have an added benefit that now our talk function works a lot better:

View Source file alex.js Only

// let's use that to make someone named alex
let alex = Person("Alex", 16, "green");
// and see how they can talk without repetition?
alex.talk("Hi there!");

We do not have to repeat the name of the alex variable twice because in the Person constructor we gave the talk function access to the obj variable. If you look inside the obj.talk function you can see that we use the obj variable, and that binds it to the talk function even after the Person constructor is done.

The talk function is officially called a "closure." You'll learn more about closures in Exercise 28.

The Code

The full code to implement this whole exercise is as follows:

View Source file code.js Only

// data about a person named Frank
let frank = {
    name: "Frank",
    age: 34,
    eyes: "blue"
}

const frank_talk = (who, words) => {
    console.log(`I am ${who.name} and ${words}.`);
}

frank_talk(frank, "I am talking here!");

// working with that data by putting functions on it
let mary = {
    name: "Mary",
    age: 44,
    eyes: "brown",
    talk: (who, words) => {
        console.log(`I am ${who.name} and ${words}.`);
    }
}

// this is kind of annoying though
mary.talk(mary, "these are some words");
// and this works but that's weird
mary.talk(frank, "I am frank what?");

// we need a way to build these automatically
const Person = (name, age, eyes) => {
    // this makes an obj for the data
    let obj = {
        name: name,
        age: age,
        eyes: eyes
    }

    // then attach our function to it
    obj.talk = (words) => {
        // coolest part is obj here will keep a reference
        console.log(`I am ${obj.name} and ${words}.`);
    }

    // and return our new person
    return obj;
}

// let's use that to make someone named alex
let alex = Person("Alex", 16, "green");
// and see how they can talk without repetition?
alex.talk("Hi there!");

Enter that in and make sure you understand every part of it before you continue.

What You Should See

When you finally run this code this is what you should see:

I am Frank and I am talking here!.
I am Mary and these are some words.
I am Frank and I am frank what?.
I am Alex and Hi there!.

Notice that everything works the same between the three people objects. The only real difference is that it is slightly easier to use the final one when you want to create a lot of Person objects.

In the next exercise we will replicate these three people using the normal way to create objects of this kind in JavaScript. We will use something called classes to encapsulate the features of a person into objects.