Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ❤ 💻
We are community that shares solutions with each other.

If you think you have something to add here.

you are welcome with your fresh ideas - List Articles

JavaScript - different ways to call function

0 contributions
12 points

In JavaScript it is possible to call function in different ways.

Quick solutions:

// ONLINE-RUNNER:browser;

'use strict'; // remove it and run to see what happened with this keyword

function print(a, b){
    console.log(this + ' ' + (a + b));
}

print(1, 2);            // undefined 3

print.call(1, 2, 3);    // 1 5
print.apply(1, [2, 3]); // 1 5

var proxy = print.bind(1);

proxy(2, 3);            // 1 5
proxy(4, 5);            // 1 9

Check below more detailed examples:

1. Direct calling method example

This the way we call usually functions.

// ONLINE-RUNNER:browser;

var Printer = {
    name: 'PRINTER',
    print: function(a, b, c) {
        var text = 'context-name: ' + this.name + ', '
            +'argument-values: [a=' + a + ', b=' + b + ', c=' + c + ']';
    
        console.log(text);
    }
}

Printer.print(1, 2, 3);

2. Function call method example

In this approach it is possible to call function with new context - arguments are placed after context.

// ONLINE-RUNNER:browser;

var Printer = {
    name: 'PRINTER',
    print: function(a, b, c) {
        var text = 'context-name: ' + this.name + ', '
            +'argument-values: [a=' + a + ', b=' + b + ', c=' + c + ']';
    
        console.log(text);
    }
}

var Manager = {
    name: 'MANAGER'
};

Printer.print.call(Manager, 1, 2, 3);

3. Function apply method example

In this approach it is possible to call function with new context - arguments are passed as array.

// ONLINE-RUNNER:browser;

var Printer = {
    name: 'PRINTER',
    print: function(a, b, c) {
        var text = 'context-name: ' + this.name + ', '
            +'argument-values: [a=' + a + ', b=' + b + ', c=' + c + ']';
    
        console.log(text);
    }
}

var Manager = {
    name: 'MANAGER'
};

Printer.print.apply(Manager, [1, 2, 3]);

4. Function bind method example

With this approach proxy finction is created with new context.

// ONLINE-RUNNER:browser;

var Printer = {
    name: 'PRINTER',
    print: function(a, b, c) {
        var text = 'context-name: ' + this.name + ', '
            +'argument-values: [a=' + a + ', b=' + b + ', c=' + c + ']';
    
        console.log(text);
    }
}

var Manager = {
    name: 'MANAGER'
};


var printProxy = Printer.print.bind(Manager);

printProxy(1, 2, 3);

Other way how to create proxy metrod is:

// ONLINE-RUNNER:browser;

function createProxy(context, action) {
    var proxy = function() {
        return action.apply(context, arguments);
    };
    return proxy;
}

// Usage example:

var Printer = {
    name: 'PRINTER',
    print: function(a, b, c) {
        var text = 'context-name: ' + this.name + ', '
            +'argument-values: [a=' + a + ', b=' + b + ', c=' + c + ']';
    
        console.log(text);
    }
}

var Manager = {
    name: 'MANAGER'
};

var printProxy = createProxy(Manager, Printer.print);

printProxy(1, 2, 3);
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more