Know if you're actually ready. Take the JavaScript quiz → get your AI readiness report.Take the free test →

Study guide · JavaScript

JavaScript Functions: Arrow Functions, this, and call/apply/bind

The `this` keyword is one of the most misunderstood parts of JavaScript. Here's what interviews actually test.

Examifyr·2026·6 min read

Regular functions vs arrow functions

The critical difference: regular functions have their own this binding. Arrow functions inherit this from the surrounding lexical scope.

const obj = {
    name: "Alice",
    greet: function() {
        console.log(this.name);  // "Alice" — this = obj
    },
    greetArrow: () => {
        console.log(this.name);  // undefined — this = outer scope
    }
};

obj.greet();       // "Alice"
obj.greetArrow();  // undefined

NoteArrow functions should NOT be used as object methods when you need to access the object via this.

How this is determined

The value of this depends on HOW a function is called, not where it's defined (for regular functions).

function show() {
    console.log(this);
}

const obj = { show };

show();        // undefined (strict) or global object
obj.show();    // obj
new show();    // a new instance

// Arrow function: this is always the enclosing scope
const arrow = () => console.log(this);  // always outer this

call, apply, and bind

These methods let you explicitly set this when calling a function.

function greet(greeting, punctuation) {
    return `${greeting}, ${this.name}${punctuation}`;
}

const user = { name: "Alice" };

// call — args passed individually
greet.call(user, "Hello", "!");      // "Hello, Alice!"

// apply — args passed as array
greet.apply(user, ["Hello", "!"]);   // "Hello, Alice!"

// bind — returns a new function with this fixed
const boundGreet = greet.bind(user);
boundGreet("Hi", ".");               // "Hi, Alice."

Notebind returns a new function — it doesn't call immediately. call and apply call immediately.

this inside callbacks

Regular function callbacks lose their this context. Arrow functions solve this.

class Timer {
    constructor() {
        this.seconds = 0;
    }

    start() {
        // BUG: regular function loses 'this'
        setInterval(function() {
            this.seconds++;  // 'this' is undefined!
        }, 1000);

        // FIX: arrow function inherits 'this'
        setInterval(() => {
            this.seconds++;  // 'this' is the Timer instance
        }, 1000);
    }
}

Exam tipThe most common this interview question: "What does this log?" — always ask yourself HOW the function was called (method call, plain call, new, or callback). Arrow functions don't have their own this — that's their main feature.

Want a person to help?

Struggling with JavaScript? Work 1:1 with a vetted JavaScript tutor on Wyzant. (affiliate link)

Find a JavaScript tutor →

← All JavaScript guides