#14 JavaScript Code Snippets: Functions, Arrow Functions, this, call, apply and bind

function add(a, b) {
    return a + b;
}

console.log(add(2, 3));

The function returns the sum of both arguments.

const multiply = function(a, b) {
    return a * b;
};

console.log(multiply(2, 4));

Function expressions can be stored in variables and invoked later.

console.log(greet());

function greet() {
    return "Hello";
}

Function declarations are fully hoisted.

console.log(greet());

const greet = function() {
    return "Hello";
};

The variable exists in the Temporal Dead Zone before initialization.

function show(a, b) {
    return a + b;
}

console.log(show(5));

Missing parameters become undefined. 5 + undefined produces NaN.

function show(a = 10) {
    return a;
}

console.log(show());

Default parameters are used when an argument is not supplied.

const add = (a, b) => a + b;

console.log(add(2, 5));

Arrow functions can return expressions directly.

const square = x => x * x;

console.log(square(4));

A single parameter does not require parentheses.

const getUser = () => ({
    name: "JS"
});

console.log(getUser().name);

Parentheses are required when returning an object literal implicitly.

const getUser = () => {
    name: "JS";
};

console.log(getUser());

Curly braces create a block body. No return statement exists.

const double = x => x * 2;

console.log(double(6));

The expression result is returned automatically.

const add = (a, b, c) => a + b + c;

console.log(add(1, 2, 3));

Multiple parameters require parentheses.

const user = {
    name: "JS",

    getName() {
        return this.name;
    }
};

console.log(user.getName());

When called as an object method, this refers to the object.

const user = {
    name: "JS",

    getName() {
        return this.name;
    }
};

const fn = user.getName;

console.log(fn());

The function is detached from the object. In modern JavaScript modules and strict mode, this becomes undefined.

const obj = {
    value: 10,

    show() {
        return this.value;
    }
};

console.log(obj.show());

The method is invoked through the object, so this refers to obj.

const user = {
    name: "JS",

    show() {
        function inner() {
            return this?.name;
        }

        return inner();
    }
};

console.log(user.show());

inner() is called as a regular function. It loses the object context.

const user = {
    name: "JS",

    show() {
        const inner = () => this.name;

        return inner();
    }
};

console.log(user.show());

Arrow functions capture this from the surrounding scope.

const user = {
    name: "React",

    getName() {
        return this.name;
    }
};

const fn = user.getName;

console.log(fn.call(user));

call() explicitly sets this.

const user = {
    value: 100,

    show() {
        setTimeout(function() {
            console.log(this?.value);
        }, 0);
    }
};

user.show();

The callback executes as a normal function and loses the object context.

const user = {
    value: 100,

    show() {
        setTimeout(() => {
            console.log(this.value);
        }, 0);
    }
};

user.show();

Arrow functions inherit this from show().

function greet() {
    return this.name;
}

const user = {
    name: "JS"
};

console.log(
    greet.call(user)
);

call() invokes the function immediately with the provided context.

function add(a, b) {
    return a + b;
}

console.log(
    add.call(null, 5, 10)
);

Arguments after the first parameter are passed individually.

const person = {
    name: "JS"
};

const employee = {
    name: "React"
};

function show() {
    return this.name;
}

console.log(
    show.call(employee)
);

call() allows method borrowing from another object.

function multiply(a, b) {
    return a * b;
}

console.log(
    multiply.apply(null, [2, 4])
);

apply() accepts arguments as an array.

function show(a, b) {
    return a + b;
}

console.log(
    show.apply(null, [3, 7])
);

apply() spreads values from the array into parameters.

function greet() {
    return this.name;
}

const user = {
    name: "JavaScript"
};

const bound = greet.bind(user);

console.log(bound());

bind() creates a new function with fixed this.

function add(a, b) {
    return a + b;
}

const addFive =
    add.bind(null, 5);

console.log(addFive(10));

bind() can partially apply arguments.

function greet() {
    return "Hello";
}

const fn = greet.bind(null);

console.log(fn());

bind() returns a new callable function.

function show() {
    return this.value;
}

const obj = {
    value: 50
};

const bound =
    show.bind(obj);

console.log(bound());

The bound function permanently uses obj as this.

function greet() {
    return this.name;
}

const user = {
    name: "React"
};

const bound =
    greet.bind(user);

console.log(bound.call({
    name: "JS"
}));

Once a function is bound, call() cannot change its this value.

function Person(name) {
    this.name = name;
}

const user = new Person("JS");

console.log(user.name);

new creates a new object and binds this to it.

function User() {
    this.age = 25;
}

const user = new User();

console.log(user.age);

Properties assigned to this become instance properties.

function Person(name) {
    this.name = name;
}

const user = Person("JS");

console.log(user);

Without new, the function executes normally and returns undefined.

function User(name) {
    this.name = name;
}

User.prototype.getName =
    function() {
        return this.name;
    };

const user = new User("React");

console.log(user.getName());

Prototype methods are available to all instances.

const user = {
    name: "JS",

    getName: () => this?.name
};

console.log(user.getName());

Arrow functions do not get their own this.

const user = {
    name: "React",

    getName() {
        return () => this.name;
    }
};

const fn = user.getName();

console.log(fn());

The arrow function captures this from getName().

const user = {
    name: "JS",

    show: () => this?.name
};

console.log(user.show());

Arrow functions should not be used as object methods when this is needed.

const arrow = () => this?.name;

console.log(
    arrow.call({
        name: "JS"
    })
);

call() cannot change this for arrow functions.

const arrow = () => this?.name;

const bound =
    arrow.bind({
        name: "React"
    });

console.log(bound());

bind() cannot modify this inside arrow functions.

const person = {
    name: "JS"
};

function show() {
    return this.name;
}

console.log(
    show.call(person)
);

call() allows borrowing behavior from another object.

const user = {
    name: "React",

    show() {
        return this.name;
    }
};

const admin = {
    name: "Admin"
};

console.log(
    user.show.call(admin)
);

call() changes this to admin.

function greet() {
    return this.name;
}

const user = {
    name: "JS"
};

const a = greet.bind(user);
const b = a.bind({
    name: "React"
});

console.log(b());

A bound function cannot be rebound.

function User() {
    this.name = "JS";

    return {
        name: "React"
    };
}

const user = new User();

console.log(user.name);

Returning an object from a constructor replaces the created instance.

function User() {}

User.prototype.role = "Admin";

const user = new User();

console.log(user.role);

JavaScript checks the prototype chain when a property is not found.

const user = {
    name: "JS",

    show() {
        return function() {
            return this?.name;
        };
    }
};

const fn = user.show();

console.log(fn.call(user));

The returned regular function receives its this from call().