Do we need the keyword "this"?

programming
1

Hi,
As some you know, I am trying to learn JavaScript from the book… In a chapter, there is this example:

     let person = {
                getName: function () {
                    return "The Name is " + this.firstName + " " + this.lastName;
                },
                getInitials: function () {
                    if (this.firstName && this.lastName) {
                        return this.firstName[0] + this.lastName[0];
     }} };
    let funnyGuy = Object.create(person);
    funnyGuy.firstName = "Conan";
    funnyGuy.lastName = "O'Brien";
    console.log(funnyGuy.firstName);

I am not trying to get out of using the “this” keyword, but it seems as though that it might be easier to simply define the variables (firstName and lastName) at the beginning of the object and re-value them with the new values of the new objects; I think this method is a bit more intuitive. Like:

    let person2 = {
                firstName: null,
                lastName: null,
                getName: function () {
                    return "The Name is " + this.firstName + " " + this.lastName;
                },
                getInitials: function () {
                    if (this.firstName && this.lastName) {
                        return this.firstName[0] + this.lastName[0];
    } } };
    let funnyGuy2 = Object.create(person2);
    funnyGuy2.firstName = "Ike";
    funnyGuy2.lastName = "777"; 
    console.log(funnyGuy.firstName); // The result is Identical!

Is there an advantage to using the “this” keyword that I am not able to appreciate right now?

2

I use it like this… :laughing:
NodeList.prototype.xmap = function (fn, ...args) {for (let i = 0; i < this.length; i++) { fn(this[i], ...args)}}
Its like an alternate to forEach where the first argument is the function and the second+ the arguments to be run over each item of a nodelist.
In this case, ‘this’ refers to the nodelist.
document.querySelectorAll('button').xmap(someFunc, argument).
Don’t do this… :laughing:, people get funny when you mess with the prototype… it might break their library… :grinning:

3

BTW this is just my opinion but try to never set any value to null.
If you are yet to assign it another value, just give it an empty version of the type it will be for example person.id = 0; person.name = ‘’. If you forget to reassign it and use it later, it may throw unless you are using nullish coalescing.

4

this doesn’t come into play when simply accessing firstName and lastName. They’re just properties of your object - in fact the same in both cases.

Where it matters is when using getName() or getInitials(). These methods are what use this, and they do so to know where to find and get the values of the firstName and lastName properties.

console.log(funnyGuy.getName()) // The Name is Conan O'Brien
// ^ uses `this` to find values "Conan" and "O'Brien"

The value of this in getName() changes depending on what object is calling it. This is where the real benefit lies.

let funnyGuy = Object.create(person);
funnyGuy.firstName = "Conan";
funnyGuy.lastName = "O'Brien";
console.log(funnyGuy.getName()); // The Name is Conan O'Brien

let funnyGuy2 = Object.create(person);
funnyGuy2.firstName = "Ike";
funnyGuy2.lastName = "777"; 
console.log(funnyGuy2.getName()); // The Name is Ike 777

Here, there is only one getName() function, the one defined in person from which both funnyGuy and funnyGuy2 were created. But when this function is called, it knows which names to reference because this in that function will be funnyGuy or funnyGuy2 depending on which object made the call.

funnyGuy.getName() // <- `this` is funnyGuy
funnyGuy2.getName() // <- `this` is funnyGuy2

While this makes this very powerful, it can also be very confusing and one of the harder things to wrap your head around in JavaScript, especially as you get into more advanced features and syntaxes which have different rules for it.