Portfolios that get you hired. Find out more...

Before you can grasp JavaScript `this`...

Before you can understand what `this` is, and why it matters, you first have to understand what an object is. Why? Because `this` almost always points to an object. The trick lies in knowing how to figure out which object it is pointing to. But, we will come to that in a little bit.

For now, imagine that you're able to shrink yourself using JavaScript magic. You're now in a JavaScript world. You're a tiny being, looking around. Every thing you see is an object. Some objects are naturally part of the JavaScript world. For example:

  • - functions
  • - the `window` object ( we will go deeper into that later as well)

Then, you have other objects made by developers, such as yourself. For example:

  • `Person`
  • `Product`
  • `Account`

To start with, let's look at the objects that human beings create. We create objects because they allow us to work with data in a way that is similar to the world we live in. Objects represent the things we see and use in real life.

So, in real life, you may have an object called "Book". A book has a title, an author, and a cover. All these things are known as properties of the book.

We will begin with the easiest way to create an object. Later, when things get weird, we will look at some more complicated stuff.

So, the easiest way to create an object is to assign a variable to curly braces like this:

    let Person = {};

Here, we have created an empty object called `Person`. It has no traits or characteristics. Or, we could say, on a simple level, we haven't assigned any properties to the object.

Let's do that - we will give the object some properties. How about giving the `Person` a name and age. Here is one way to do it:

    Person.name = "J. P. Knight";
    Person.age = "127";

So, in JavaScript, you can add a property to any object. To do that, place a dot after the object's name and then add the actual name of the property. Assign it a value using the `=` operator and you've just created a property!

    Person.hobby = "running in circles";

Now, you can also add properties when creating the object. Here is how that code would look.

    let Person = {
        name: "J. P. Knight",
        age: "127"
    };

To quickly recap: you can create ( or define ) the properties as you create your object. Or, you can add properties after you've already created the object.

Exercise 1

Create an object called `Account`. When you create it, define at least three properties such as number, name, and status. Assign whatever values you see fit.

After you're done creating your object, type

   console.log(Account);

to see your object and its properties. Then, add any another property using the dot notation.

Bonus points: Create an object and call it whatever you like. Give it some properties. Then, use `console.log` to view it.

Once you do the above exercise, you're ready for the next step...

Next: touch `this` for the very first time...

Please let me know if it makes sense so far, any questions or suggestions would be great. Thanks!

Self-taught developers: tips for writing code that gets you hired! Join now!