ProgramGuru

Choose a Method's Receiver

Choose a Method's Receiver

For an ordinary function, this depends on its call. Calling student.label() supplies student as the receiver, while bind creates a callable tied to a chosen receiver for later use.

Before this topic, review Keep Access to an Outer Binding if its terms are unfamiliar.

What you’ll learn

  • Explain choose a method's receiver through the school example.
  • Trace the shown operations and distinguish their result from displayed output.
  • Make the practice change and explain its consequence: The bound method reads the edited property from the same receiver.

Work through the school example

This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

JavaScript · school.js · complete example

const student = { name: "Diya", label() {
  return this.name;
} };
const label = student.label.bind(student);
console.log(label());

Expected output

Diya
Run in JavaScript compiler →

Recognize the important boundary

An arrow uses lexical this and bind does not replace that captured this. A detached unbound method may fail or read an unintended receiver.

Try a small variation

JavaScript · original source for practice

const student = { name: "Diya", label() {
  return this.name;
} };
const label = student.label.bind(student);
console.log(label());

Your task: Replace 'Diya' with 'Saira'. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

Worked answer and reasoning

The bound method reads the edited property from the same receiver.

JavaScript · complete worked variation

const student = { name: "Saira", label() {
  return this.name;
} };
const label = student.label.bind(student);
console.log(label());

Expected output

Saira
Run in JavaScript compiler →

Predict the original program

JavaScript · original program for this question

const student = { name: "Diya", label() {
  return this.name;
} };
const label = student.label.bind(student);
console.log(label());
What does the original JavaScript program display, in order?
Choose one answer. You can try again.

Answer and explanation

Diya

For an ordinary function, this depends on its call. Calling student.label() supplies student as the receiver, while bind creates a callable tied to a chosen receiver for later use. An arrow uses lexical this and bind does not replace that captured this. A detached unbound method may fail or read an unintended receiver.

Keep the useful idea

For an ordinary function, this depends on its call. Calling student.label() supplies student as the receiver, while bind creates a callable tied to a chosen receiver for later use.

Check your variation against this explanation: The bound method reads the edited property from the same receiver.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.

Reaching the recap and completing the quizzes are separate milestones.

    Next lesson: Group a Student Record →