0

So I am trying to understand the this keyword in javascript and inner functions. and I have an inner function with the this keyword but it is returning "my hobby is undefined".

How can I make it return "my hobby is programming"

Here is what I tried and it did not work:

function practice() {
  function close() {
    console.log(`my hobby is ${this.hobby}`)
  }
  
  return close()
}

let person = {
  hobby: "programming"
}

let binding = practice.bind(person)
console.log(binding())
Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
ToYlet
  • 1
  • 1
  • 1
    Each `function` has it's own `this`, and is based on how that function is invoked. Because `close()` is being called without a "context", `close`'s `this` defaults to the default global object (`window` in browsers). If you want `close` to use the `this` value from the surrounding scope, then you can make it an arrow function, or use `.call()` when you invoke it inside of `practice` and pass through `practice`'s `this`. This is mostly covered here: [How does the "this" keyword work, and when should it be used?](https://stackoverflow.com/q/3127429) – Nick Parsons Jan 22 '23 at 11:21

2 Answers2

1

You inner function should be an arrow function because a normal one overwrites the this context :

function practice() {
    const close = () => {
        return `my hobby is ${ this.hobby }`
    }

    return close()
}

let person = {
    hobby: "programming"
}

let binding = practice.bind(person)
console.log(binding())

Hope it helped you !

Lucasbk38
  • 499
  • 1
  • 14
0

So you would need to bind the data to the inner function inside the function as well as binding them to the outer one. See below:

function practice() {
  function close() {
    console.log(`my hobby is ${this.hobby}`)
  }
  let binding2 = close.bind(this)
  
  return binding2()
}

let person = {
  hobby: "programming"
}
let binding = practice.bind(person)
binding()
bee
  • 80
  • 8
  • 2
    What loop are you referring to here? You can perform `let bidnging2 = close.bind(this);` directly without an if-statement. But if you do that followed directly by a `binding2()` call, you might as well use `binding2.call(this)` instead :) – Nick Parsons Jan 22 '23 at 11:27
  • You're right, for some reason when I was testing the code, before I posted it, I got a loop so added that to avoid it haha – bee Jan 22 '23 at 11:29
  • 1
    Maybe you can [edit] your answer to fix that part of your answer :) – Nick Parsons Jan 22 '23 at 11:37