Skip to content
Forma
JavaScript labsFree code walkthrough

What does bind remember?

Follow one function through call, apply, and bind. See its argument, its chosen object, and its output at each step.

Choose an object now, call the function later

For an ordinary function, call supplies an explicit receiver and separate arguments; apply supplies arguments as an array-like value. Both invoke immediately. bind creates a new callable that retains the receiver reference and any leading arguments.

The bound function retains a reference to person, rather than a snapshot of its properties. Predict the last greeting after person.name changes, then inspect this and prefix inside greet.

Starting knowledge: ordinary functions, objects, and strings. The receiver is the chosen this object; prefix is the first argument.

Follow the code

0 / 13 steps
javascript
function greet(prefix) {  return prefix + " " + this.name;}const person = { name: "Mira" };console.log(greet.call(person, "Hi"));console.log(greet.apply(person, ["Hello"]));const later = greet.bind(person, "Welcome");person.name = "Noor";console.log(later());

Console output

0 lines

No output yet.

Ready to start

Press Play, or Step to go one line at a time.

More ways to follow this example

Call stack

No call running.

All captured values

No values captured at this pause.

Every step as text

This lists every pause, so it has more steps than the player.

  1. Step 1 · Before line 4

    Next, work out { name: "Mira" } and store its value under person. Any calls on the right must finish first.

    greet
    function greet(prefix) { … }
  2. Step 2 · Before line 5

    Next, work out the values inside console.log, including any function calls, then print the results. A called function may run before the message appears.

    person
    { name: "Mira" }
  3. Step 3 · Before line 2

    Use this call's prefix and the chosen object's current name to build a greeting.

    this
    { name: "Mira" }
    prefix
    "Hi"
  4. Step 4 · Return at line 2

    This call returns "Hi Mira" to its caller. Its caller can now use that result.

    return value
    "Hi Mira"
  5. Step 5 · Before line 5

    Next, work out the values inside console.log, including any function calls, then print the results. A called function may run before the message appears.

  6. Step 6 · Output from line 5

    The console just gained this message: Hi Mira. Printing a value does not by itself change the stored value.

    Console: Hi Mira

  7. Step 7 · Before line 6

    Next, work out the values inside console.log, including any function calls, then print the results. A called function may run before the message appears.

  8. Step 8 · Before line 2

    Use this call's prefix and the chosen object's current name to build a greeting.

    this
    { name: "Mira" }
    prefix
    "Hello"
  9. Step 9 · Return at line 2

    This call returns "Hello Mira" to its caller. Its caller can now use that result.

    return value
    "Hello Mira"
  10. Step 10 · Before line 6

    Next, work out the values inside console.log, including any function calls, then print the results. A called function may run before the message appears.

  11. Step 11 · Output from line 6

    The console just gained this message: Hello Mira. Printing a value does not by itself change the stored value.

    Console: Hello Mira

  12. Step 12 · Before line 7

    Prepare a new function for later. greet's body does not run at this point.

  13. Step 13 · Before line 8

    Change the existing person's name. The prepared function still refers to that object.

    later
    bound function · this = { name: "Mira" } · arguments = ["Welcome"]
  14. Step 14 · Before line 9

    Now call the prepared function, then print the greeting it returns.

    person
    { name: "Noor" }
    later
    bound function · this = { name: "Noor" } · arguments = ["Welcome"]
  15. Step 15 · Before line 2

    Use this call's prefix and the chosen object's current name to build a greeting.

    this
    { name: "Noor" }
    prefix
    "Welcome"
  16. Step 16 · Return at line 2

    This call returns "Welcome Noor" to its caller. Its caller can now use that result.

    return value
    "Welcome Noor"
  17. Step 17 · Before line 9

    Now call the prepared function, then print the greeting it returns.

  18. Step 18 · Output from line 9

    The console just gained this message: Welcome Noor. Printing a value does not by itself change the stored value.

    Console: Welcome Noor

  19. Step 19 · Finished

    The recording has ended. Compare the final stored values with what actually appeared in the output.

About this example

Recorded from this exact example running in JavaScript. Steps pause before a statement, at a return, or after console output. Built-in implementation details are omitted.

The player replays a recorded run of this exact code. It doesn’t run code you change.

Explain the final greeting

The first two calls print Hi Mira and Hello Mira. Creating the bound function prints nothing. After person.name becomes Noor, calling later prints Welcome Noor. Look at the captured argument and the current receiver inside greet.

Arrow functions get this from their surrounding scope. Binding cannot replace that lexical this. Each call to bind also creates a different function reference.

Read the JavaScript bind reference

Try a mission: fix an outdated search result