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

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

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."

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 tip

The 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.