[Solved] Javascript: When and when not to use “this”

by

Introduction

This article will discuss the use of the keyword “this” in Javascript. We will look at when it is appropriate to use “this” and when it is not. We will also discuss the different ways in which “this” can be used and the implications of using it incorrectly. By the end of this article, you should have a better understanding of when and when not to use “this” in Javascript.

Solution

When to use “this”:

1. When you need to refer to the current object in a method.
2. When you need to refer to the object that called a function.
3. When you need to refer to the object that owns a function.
4. When you need to refer to the global object.

When not to use “this”:

1. When you are not inside a function.
2. When you are not inside a method.
3. When you are not referring to an object.
4. When you are not referring to the current object.


when it is needed/best practice to use the keyword this

This is usually used when you want to access something in some. So for instance, if you have a custom object and want to use some property inside some method, you should use this.

function Person(fname, lname){
  this.fname = fname;
  this.lname = lname;
  this.fullName = function(){
    return this.fname + ' ' + this.lname;
  }
}

var p = new Person('foo', 'bar');
console.log(p.fullName())

If you see, in current constructor, I created a function(fullName) which needs to access fname and lname properties of the object it is part of. This is a place this must be used.

Now while declaration, when to use this?

Any property in a constructor that is a part of this will be a part of the object. So if you need something that is only accessible to you but not outside, you can use function instead of this.

function Person(fname, lname){
  var self = this;
  self.fname = fname;
  self.lname = lname;
  
  // This function is private
  function getFullName() {
    var name="";
    var seperator="";
    if (fname) {
      name += self.fname;
      seperator=" ";
    }
    if (lname) {
      name += seperator + self.lname;
    }
    return name;
  }
  this.fullName = function(){
    return getFullName();
  }
}

var p = new Person('foo', 'bar');
console.log(p.fullName())

As for your code, I have already explained in comment why it works:

In non-strict mode, this will point to window and any declaration not in a function will be a part of global scope.

But as rightly pointer by @Jonas W its a bad practice. Why it is bad?

  • Any variable defined without declaration statement(var|let|const) will become part of global scope.
  • Any variable with declaration statement outside any functions will become part of global scope.

2

solved Javascript: When and when not to use “this”


When and When Not to Use “this” in Javascript

The keyword “this” is a powerful tool in Javascript, but it can be tricky to use correctly. Knowing when and when not to use “this” is essential for writing effective and efficient code.

What is “this”?

In Javascript, “this” is a keyword that refers to the object that is currently executing the code. It can be used to access properties and methods of the object, as well as to call functions on the object.

When to Use “this”

The most common use of “this” is to access properties and methods of the object that is currently executing the code. For example, if you have an object called “person” with a property called “name”, you can use “this.name” to access the name property of the person object.

Another common use of “this” is to call functions on the object. For example, if you have an object called “person” with a method called “sayHello”, you can use “this.sayHello()” to call the sayHello method on the person object.

When Not to Use “this”

It is important to note that “this” only refers to the object that is currently executing the code. If you are trying to access a property or method of a different object, you should not use “this”. Instead, you should use the name of the object you are trying to access.

It is also important to note that “this” does not refer to the global scope. If you are trying to access a global variable or function, you should not use “this”. Instead, you should use the name of the global variable or function.

Conclusion

Knowing when and when not to use “this” is essential for writing effective and efficient code in Javascript. When used correctly, “this” can be a powerful tool for accessing properties and methods of the object that is currently executing the code. However, it is important to remember that “this” does not refer to the global scope or to other objects, and should not be used in those cases.