What would this . f be in Javascript?

Question

Taking a look at a tutorial on Javascript I came across the following code snippet:

let user = {
  name: "John"
};

function sayHi() {
  console.log(`Hello ${this.name}`);
}

user.f = sayHi;  // dúvida
user.f();  // retorna Hello John

I understood that if the f of the association of the function with user is returned to me Hello and the this name. is returned as a id or hash or something like that randomly:

let user = {
  name: "John"
};

function sayHi() {
  console.log(`Hello ${this.name}`);
}

user = sayHi;
user();  // retorna Hello ...

So my doubts are as follows:

• what would this f
• how it associates the object to function
• what would be the random values when I do not use the f

Answer 1

1°: what would this f?

In this example:

let user = {
  name: "John"
};

function sayHi() {
  console.log(`Hello ${this.name}`);
}

user.f = sayHi;  // dúvida
user.f();  // retorna Hello John

In doing user.f = sayHi, you say pro Javascript: update the property for me f that is inside the object user, if there is no property, create this property f and attribute to it the value sayHi, that in that case it would be a função. So to the user user.f(), he returns "Hello".

2°: how it associates the object to function?

It is in the above answer, it creates this new property f and associates to this property, the function sayHi, in the first example. In the second example, it overwrites the variable user with the value of the function sayHi.

3°: what would be the random values when not using f?

In this case you associated the user with a "memory reference" of the sayHi, the random characters would be because of the this.name, that in this case has no more reference, would be a "garbage"*, because there is no more property name in the user.

*UPDATE: The @bfavaretto explained what would be the "hash" or "garbage":

What you’re calling garbage or hash is actually the name of a HTML element (iframe) used in the code preview here . If this is executed in a normal window will come Undefined. Because when you performs a function outside the object context, this inside it points to the window.

Answer 2

what would this f

A member of an object created at this time, like any other with nothing special. Or if you prefer it is an element of a array associative that passes as object, which is what are objects in JS. It is only a normal variable within an object/array, there is no feature that differs from other things, has nothing magical in it, is equal to name only that in name you saved a string and in f saved a function (yes, you can store functions in variables). see more in What is the difference between the functions var name = Function() and Function name()?.

how it associates the object to function

The assignment you are making in this object member is making this association, is taking the name of the function (without parentheses that would call the function) and this name is a reference to the effective function, and is holding in the variable f that belongs to user.

what would be the random values when I don’t use f

Then in the second example something else happened, you reset the object user completely and no longer has what he had, that is, nor has the field name, now user only has the reference for the function sayHi and nothing else. When you call him with user() is having an element printed that does not exist, i.e. this.name no longer exists, so it takes a junk value in memory (in the sense of something that is there but should not, in my opinion). I don’t think this behavior should happen, but it’s JS, you know how it is.

This is because there is a closure, but in the case does not have a value associated with that variable, but JS always tries to give some result, so he considers that there must be something there, in fact according to the comment of bfavaretto he finds that name in the element iframe that is exposed (in my opinion already exposed, unduly, but that is how the JS is).