DEV Community

J. P. Knight
J. P. Knight

Posted on • Originally published at jslearner.com on

If you're struggling with 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 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...=>http://jslearner.com/javascript-this-first-touch.html

Top comments (0)