I want to understand following Javascript code to know how JS determine value of this in below code

Question

Revised Question: I came across this code example online, and when I executed it, nothing was logged to the console. I expected it to log "User Name," but it didn't. I'm wondering why this is happening. Why isn't "this" pointing to the newly created object? How does JavaScript determine the reference of "this"? What will happen if I change the normal function to an arrow function, and what if I include a complete condition inside the function?

function createUser() {
      // create an object and return from function
      return {
         name: "User Name", 
         userRef: this,
      };
    }
    // newly create object assigned to user variable 
    var user = createUser();
 
    console.info(user.userRef.name);

`this` is a reference to the window object in your example. – epascarello Jun 15 '23 at 17:44 — epascarello, Jun 15 '23 at 17:44
use `console.log( user.name );` to get `"User Name"` – Mister Jojo Jun 15 '23 at 17:56 — Mister Jojo, Jun 15 '23 at 17:56

score 1 · Answer 1 · answered Jun 15 '23 at 17:50

this keyword in Javascript depends on the context where it is defined. Here is an article explaining this keyword

In your example, if you need to get the reference of the object that is returned by createUser function, change userRef to a function, something like this

function createUser() {
   return {
      name: "User Name",
      userRef: function() {
        return this;
      },
   };
}

score 1 · Answer 2 · answered Jun 15 '23 at 17:51

1

In order to use this you must treat useRef() as a function.

function createUser() {
  return {
    name: "User Name",
    useRef(){
      return this;
    },
  };
}

let user = createUser();
   
console.log(user.useRef().name);

answered Jun 15 '23 at 17:51

udoyhasan

1,527
5
19

I want to understand following Javascript code to know how JS determine value of this in below code

2 Answers2