FSM Full Stack Masterclass
Platform under construction
JavaScript course badge

Functions & Scope

Intermediate

this, call, apply & bind

this is the function call context. call, apply and bind let you choose or preserve that context deliberately.

const panel = {
  title: "Dashboard",
  show() {
    return this.title;
  }
};

console.log(panel.show());

Functions & Scope

this is decided by how a function is called.

The value of this is not mainly where a function is written. It is usually decided by how the function is called.

When a function is called as an object method, this points to that object. When the function is detached and called alone, the context can be lost.

call and apply call a function immediately with a chosen this value. bind creates a new function with this permanently set.

Method call

object.method() usually sets this to object.

Lost method

Passing object.method alone can lose the original context.

call

Calls a function with this and individual arguments.

bind

Returns a new function with this fixed.

Examples

Functions become readable when input, output and scope are visible.

Bind a method before passing it as a callback

const panel = {
  title: "Dashboard",
  show() {
    return this.title;
  }
};

const showPanel = panel.show.bind(panel);
console.log(showPanel());

Detached method loses context

const showPanel = panel.show;

console.log(showPanel());

// this is no longer panel.

Code patterns

Reusable examples for quick reference.

These examples focus on syntax you will actually look up later: declarations, callbacks, returns, closures and context handling. Use the small patterns first, then study the deeper explanation.

Method this

Object method syntax uses the object as context.

const panel = {
  title: "Dashboard",
  show() {
    return this.title;
  }
};

console.log(panel.show());

call

Choose this for one immediate call.

function showTitle(prefix) {
  return `${prefix}: ${this.title}`;
}

console.log(showTitle.call({ title: "Settings" }, "View"));

apply

Like call, but arguments are passed as an array.

function joinLabels(a, b) {
  return `${this.prefix}: ${a}, ${b}`;
}

console.log(joinLabels.apply({ prefix: "Items" }, ["A", "B"]));

bind

Create a reusable function with fixed context.

const view = { title: "Reports" };

function getTitle() {
  return this.title;
}

const bound = getTitle.bind(view);
console.log(bound());

Rules that matter

Keep behavior small, named and testable.

Functions are where JavaScript stops being a list of statements and becomes a system. Scope decides what each function can see, while return values and parameters decide how functions communicate.

Look at the call site

this is usually decided by how the function is called.

Use methods when this should be the object

show() { return this.title; } is clear method syntax.

Do not use arrows for this-based object methods

Arrows do not create their own this.

Use call for one immediate custom context

call passes arguments one by one.

Use apply for array arguments

apply passes arguments as an array-like list.

Use bind for later callbacks

bind returns a new function with this fixed.

Production thinking

Good functions reduce the amount of code you must hold in your head.

Why does this matter?

this bugs are common because the function can look correct while the call site changes the context.

Accessibility

Component-style UI code often depends on object state. Losing this can break labels, expanded states and focus behavior.

Production note

Production code should avoid ambiguous this usage and bind methods deliberately when passing them around.

SEO note

Rendering methods that lose context can output missing titles, labels or links.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

  • Use call to run panel.show with another object.
  • Add an apply example with two arguments.
  • Change show into an arrow function and explain why it breaks.

Practice assignment

Do this before moving to the next topic.

  1. Write one object method that uses this.
  2. Call a function with call.
  3. Create a bound function with bind.

Try it yourself

Compare method call and bound call

Live preview

Self-check

Before you continue, prove that you understand this, call, apply & bind.

Intermediate

Functions only become useful when you can explain what goes in, what comes out and which scope the function can see.

  1. Can you explain why this depends on the call site?
  2. Can you explain why detached methods lose context?
  3. Can you explain the difference between call and apply?
  4. Can you explain what bind returns?
  5. Can you explain why arrow methods are risky when using this?

Senior audit upgrade

Extra production context for this, call, apply & bind.

this model

The value of this comes from how a function is called, not where it was written, except with arrow functions.

object.method()       -> this is object
fn.call(value)        -> this is value
const bound = fn.bind(value)
arrow function        -> this from outer scope

Chapter checkpoint

Functions & Scope checkpoint

Finish this chapter by turning the lessons into a small practical proof.

Build

Build a small example that combines three lessons from this chapter.

Deliverables

  • working code
  • short explanation
  • self-check answers

Quality checks

  • readable code
  • clear failure path
  • accessibility considered

Review question

Can you explain the important tradeoff without reading from the page?