If you're struggling with JavaScript `this`...

J. P. Knight — Thu, 15 Nov 2018 00:49:35 +0000

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

JavaScript `this`: 3 Reasons Why You Find It Hard to Grasp

J. P. Knight — Wed, 14 Nov 2018 20:26:58 +0000

If you are struggling with JavaScript this, it's NOT YOUR FAULT! The truth is, it can be a tricky subject. It trips up a lot of people, not just you.

If you're learning JavaScript as your first language, fear not. I've tried to assume as little as possible. You can also get in touch if there is something you believe should be changed or explained in more detail.

If you're coming from another language, you should know that JavaScript this has its own way of acting. It is simply not the same as what you're used to. Don't worry, soon you'll have a full grasp of how this works.

It's crucial that you have the right mind frame when learning JavaScript this. For this reason, I decided to start with the reasons why you might struggle with this. Here we go...

1 - You must first grasp a couple of other JavaScript concepts

You have to know certain JavaScript concepts before you can grasp this. Especially when it gets weird - 'coz it does get weird. That's why you'll first learn the basics of JavaScript objects.

As you progress, you'll discover a lot of cool stuff that will help you have a deep grasp of this. You will then become a better, more confident developer. You will have skills that will serve you way beyond using this.

2 - You can't know what `this` is just by looking at the code where it's created

This is a big one. When you come across this in code, you can only figure out part of what this is supposed to be. Why? Because where this is created has almost no bearing on what it represents when the code is run. So, don't beat yourself up!

3 - You are too hard on yourself

Look, being a self-taught developer is no easy task. You should pat yourself on the back for having the courage to even attempt such a feat. With nothing but your sheer guts, you're learning one of the most valuable skills of the modern age. Think about it - if it were easy, everyone would be doing it.

Some JavaScript concepts are tricky. After all, the language was created in just a week! Yet, we have to leave with all the design decisions, good and bad. The point is, be patient with yourself.

It's like riding a bicycle - you'll fall and get bruised a few times. But, once you've got it, you have it for the rest of your life. You will be a proud master of a skill that will have a direct impact on your career.

So, take your time. Take a break after each section. Reward yourself for each bit of progress you make, no matter how tiny it may seem. With that in mind, let's start grasping this by looking at JavaScript objects...

DEV Community: J. P. Knight

If you're struggling with JavaScript `this`...

JavaScript `this`: 3 Reasons Why You Find It Hard to Grasp

1 - You must first grasp a couple of other JavaScript concepts

2 - You can't know what this is just by looking at the code where it's created

3 - You are too hard on yourself

2 - You can't know what `this` is just by looking at the code where it's created