Poppy Cooke

Poppy Cooke

1613984439

JavaScript "this" Keyword Explained

In this video I’ll be explaining in the simplest terms what the “this” keyword is in JavaScript. It’s not as hard as many developers may think 🙂

#javascript #programming

What is GEEK

Buddha Community

JavaScript "this" Keyword Explained
Brandon  Adams

Brandon Adams

1625644560

Using the This Keyword in Java | What is the This Keyword?

In this video, we use the this keyword in Java to access an object’s instance variables, invoke an object’s instance methods, and return the current object. Thank you for watching and happy coding!

Need some new tech gadgets or a new charger? Buy from my Amazon Storefront https://www.amazon.com/shop/blondiebytes

What is Object Oriented Programming: https://youtu.be/gJLtvKMGjhU

Constructors:
https://youtu.be/8lr1ybCvtwU

Check out my courses on LinkedIn Learning!
REFERRAL CODE: https://linkedin-learning.pxf.io/blondiebytes
https://www.linkedin.com/learning/instructors/kathryn-hodge

Support me on Patreon!
https://www.patreon.com/blondiebytes

Check out my Python Basics course on Highbrow!
https://gohighbrow.com/portfolio/python-basics/

Check out behind-the-scenes and more tech tips on my Instagram!
https://instagram.com/blondiebytes/

Free HACKATHON MODE playlist:
https://open.spotify.com/user/12124758083/playlist/6cuse5033woPHT2wf9NdDa?si=VFe9mYuGSP6SUoj8JBYuwg

MY FAVORITE THINGS:
Stitch Fix Invite Code: https://www.stitchfix.com/referral/10013108?sod=w&som=c
FabFitFun Invite Code: http://xo.fff.me/h9-GH
Uber Invite Code: kathrynh1277ue
Postmates Invite Code: 7373F
SoulCycle Invite Code: https://www.soul-cycle.com/r/WY3DlxF0/
Rent The Runway: https://rtr.app.link/e/rfHlXRUZuO

Want to BINGE?? Check out these playlists…

Quick Code Tutorials: https://www.youtube.com/watch?v=4K4QhIAfGKY&index=1&list=PLcLMSci1ZoPu9ryGJvDDuunVMjwKhDpkB

Command Line: https://www.youtube.com/watch?v=Jm8-UFf8IMg&index=1&list=PLcLMSci1ZoPvbvAIn_tuSzMgF1c7VVJ6e

30 Days of Code: https://www.youtube.com/watch?v=K5WxmFfIWbo&index=2&list=PLcLMSci1ZoPs6jV0O3LBJwChjRon3lE1F

Intermediate Web Dev Tutorials: https://www.youtube.com/watch?v=LFa9fnQGb3g&index=1&list=PLcLMSci1ZoPubx8doMzttR2ROIl4uzQbK

GitHub | https://github.com/blondiebytes

Twitter | https://twitter.com/blondiebytes

LinkedIn | https://www.linkedin.com/in/blondiebytes

#keyword #java #using the this keyword in java #what is the this keyword

Gunjan  Khaitan

Gunjan Khaitan

1592205420

JavaScript This Keyword | JavaScript This Keyword Explained

This short video on “JavaScript this keyword” will help you understand the concept of referencing better. “This” keyword refers to an object which is executing the current piece of code. This video will also acquaint you with the working of the “this” keyword with respect to a global scope and a local scope.

#javascript #developer

Enos  Prosacco

Enos Prosacco

1590570769

Understanding the “this” Keyword in JavaScript

In this article, we’re going to learn about the JavaScript keyword this and how the value of this is assigned in different scenarios. The best way to digest the content of this article is by quickly executing the code snippet in your browser’s console. Follow the below steps to launch the console in your Chrome browser:

  • Open new tab in Chrome
  • Right click on page, and select “inspect element” from the context menu
  • Go to the console panel
  • Start executing the JavaScript code

#javascript #this #keyword #programming

Miguel Yandu

Miguel Yandu

1583840760

What is “this” in Javascript? | Explaining this keyword in Javascript!

What is “this” in JavaScript?

If you have been building things using JavaScript libraries, you might have noticed a particular keyword called this.

this is quite a common thing in JavaScript, but there are a quite a few developers who have taken quite some time to fully understand what this keyword exactly does and where should it be used in your code.

In this post I will help you understand this and its mechanism, in depth.

Before diving in, make sure you have Node installedon your system. Then, open a command terminal and run the node command.

“this” in Global Environment

The working mechanism of this is not always easy to understand. To understand how this works, we will start looking at this in different environments. Let’s start by looking at the global environment first.

At the global level, this is equivalent to a global object called global.

> this === global
true

But this is true only inside node. If we try to run this same code inside a JavaScript file, we will get the output as false.

To test this, create a file called index.js with the following code inside it:

console.log(this === global);

Then run this file using the node command:

$ node index.js
false

The reason for this is that inside a JavaScript file, this equates to module.exports and not global.

“this” inside Functions

The value of this inside a function is usually defined by the function’s call. So, this can have different values inside it for each execution of the function.

In your index.js file, write a very simple function that simply checks if this is equal to the global object.

function rajat() {
  console.log(this === global)
}
rajat()

If we run this code using node, we will the output as true. But we add "use strict" at the top of the file and run it again, we will get a false output because now the value of this is undefined.

To further explain this, let’s create a simple function that defines a Superhero’s real name and hero name.

function Hero(heroName, realName) {
  this.realName = realName;
  this.heroName = heroName;
}
const superman= Hero("Superman", "Clark Kent");
console.log(superman);

Note that this function is not written in strict mode. Running this code in node will not get us the value of “Superman” and “Clark Kent” as we expected, but it will instead just give us an undefined.

The reason behind this is that since the function is not written in strict mode, this refers to the global object.

If we run this code in strict mode, we will get an error because JavaScript does not allow us to assign properties realName and heroName to undefined. This actually is a good thing because it prevents us from creating global variables.

Lastly, writing the function’s name in uppercase means that we need to call it as a constructor using the new operator. Replace the last two lines of the above code snippet with this:

const superman = new Hero("Superman", "Clark Kent");
console.log(superman);

Run the node index.js command again, and you will now get the expected output.

“this” inside constructors

JavaScript does not have any special constructor functions. All we can do is convert a function call into a constructor call using new operator as shown in the above section.

When a constructor call is made, a new object is created and set as the function’s this argument. The object is then implicitly returned from the function, unless we have another object that is being returned explicitly.

Inside the hero function write the following return statement:

return {
  heroName: "Batman",
  realName: "Bruce Wayne",
};

If we run the node command now, we will see that the above return statement overwrites the constructor call.

The only scenario where the return statement doesn’t overwrite the constructor call is if the return statement tries to return anything that is not an object. In this case, the object will contain the original values.

“this” in Methods

When calling a function as a method of an object, this refers to the object, which is then known as the receiver of the function call.

Here, I have a method dialogue inside an object called hero. The dialogue‘s this value then refers to hero itself. So hero here will be know as the receiver of the dialogue method’s call.

const hero = {
  heroName: "Batman",
  dialogue() {
    console.log(`I am ${this.heroName}!`);
  }
};
hero.dialogue();

This is very simply example. But in the real-world cases it can get very hard for our method to keep track of the receiver. Write the following snippet at the end of index.js.

const saying = hero.dialogue();
saying();

Here, I am storing the reference to dialogue inside another variable and calling the variable as a function. Run this with node and you will see that this returns an undefined because the method has lost track of the receiver. this now refers to global instead of hero.

The loss of receiver usually happens when we are passing a method as a callback to another. We can either solve this by adding a wrapper function or by using bind method to tie our this to a specific object.

call() and apply()

Though a function’s this value is set implicitly, we can also call function with explicit this argument call() and apply().

Lets restructure the previous sections code snippet like this:

function dialogue () {
  console.log (`I am ${this.heroName}`);
}const hero = {
  heroName: 'Batman',
};

We need to connect the dialogue function with the hero object as a receiver. To do so, we can either use call() or apply() like this:

dialogue.call(hero)
// or
dialogue.apply(hero)

But if you are using call or apply outside of strict mode, then passing null or undefined using call or apply will be ignored by the JavaScript engine. This is one of the reasons why it is usually suggested to always write our code in strict mode.

bind()

When we pass a method as a callback to another function, there is always a risk of losing the intended receiver of the method, making the this argument set to the global object instead.

The bind() method allows us to permanently tie a this argument to a value. So in the below code snippet, bind will create a new dialogue function and set its this value to hero.

const hero = {
  heroName: "Batman",
  dialogue() {
    console.log(`I am ${this.heroName}`);
  }
};
setTimeOut(hero.dialogue.bind(hero), 1000);

By doing so, our this cannot be changed by even call or apply methods.

Catching “this” inside an Arrow Function

Using this with an arrow function is quite different from using it with any other kind of JavaScript function. An arrow function uses the this value from its enclosing execution context, since it does have one of its own.

An arrow function permanently captures the this value, preventing apply or call from changing it later on.

To explain how this works with regards to the arrow functions, let’s write the arrow function shown below:

const batman = this;const bruce = () => {
  console.log(this === batman);
};bruce();

Here, we are storing the value of a this in a variable and then comparing the value with a this value that is inside an arrow function. Running node index.js in our terminal should give us true as output.

An arrow function’s this value cannot be set explicitly. Also, the arrow function will ignored any attempt from us at passing a value to this using methods like call, apply, and bind. An arrow function will refer to the this value that was set when the arrow function was created.

An arrow function can also not be used as a constructor. Hence, we cannot assign properties to this inside an arrow function.

So what can arrow functions do in regards to this?

Arrow functions can help us access this within a callback. To explain how this is done. Take a look at the counter object that I have written below:

const counter = {
  count: 0,
  increase() {
    setInterval(function() {
      console.log(++this.count);
    }, 1000);
  }
}
counter.increase();

Running this code using node index.js will only give an increase list of NaNs. This is because this.count is not referring to the counter object. It actually refers to the global object.

To make this counter work, lets rewrite it using an arrow function.

const counter = {
  count: 0,
  increase () {
    setInterval (() => {
      console.log (++this.count);
    }, 1000);
  },
};
counter.increase ();

Our callback now uses this binding from the increase method, and the counter now works as it should.

Note: Do not try to write this.count + 1 instead of ++this.count. The former of these two will only increase the value of count once, and return the that value on each iteration.

“this” in Classes

Classes are one of the most important parts of any JavaScript apps. Lets see how this behaves inside a class.

A class generally contains a constructor, where this would refer to any newly created object.

But in case of methods, this can also refer to any other value if the method is called as an ordinary function. And just like a method, classes can also lose track of the receiver.

Let’s re-create the Hero functions that we have seen earlier as a class. This class will contain a constructor and a dialogue() method. Finally, we create an instance of this class and call the dialogue method.

class Hero {
  constructor(heroName) {
    this.heroName = heroName;
  }
  dialogue() {
    console.log(`I am ${this.heroName}`)
  }
}
const batman = new Hero("Batman");
batman.dialogue();

this inside the constructor refers to the newly created instance of that class. When we call batman.dialogue(), we invoke dialogue() as a method with batman as a receiver.

But if we store a reference to the dialogue() method, and later invoke it as a function, we once again lose the receiver of the method and the this argument now refers to undefined.

const say = batman.dialogue();
say();

The reason for error is that JavaScript classes are implicitly in strict mode. We are invoking say() as an function without any autobinding. To solve this, we will need to manually bind() to tie this dialogue() function to batman.

const say = batman.dialogue.bind(batman);
say();

We can also do this binding inside the constructor method.

#javascript #webdev

Kaustav Hazra

1604298120

How to Control ‘this’ Better in JavaScript

Handling this in JavaScript is tricky.

Sometimes, you use this but it’s not the this you expect. So confusing, right?

That’s why JavaScript provides us three methods to control this better. They are call()apply(), and bind().

All of them are predefined methods in JavaScript. They are chained to the function object prototype, which means once you define a function, it has permission to access all those methods.

Let’s see how they can help us deal with this.

#react #javascript #javascript-tips #web-development #javascript-development