Javascript call function with function parameter

Function.prototype.call()

The call() method calls the function with a given this value and arguments provided individually.

Try it

Syntax

call(thisArg) call(thisArg, arg1) call(thisArg, arg1, /* …, */ argN) 

Parameters

The value to use as this when calling func . If the function is not in strict mode, null and undefined will be replaced with the global object, and primitive values will be converted to objects.

Arguments for the function.

Return value

The result of calling the function with the specified this value and arguments.

Description

Note: This function is almost identical to apply() , except that the function arguments are passed to call() individually as a list, while for apply() they are combined in one object, typically an array — for example, func.call(this, «eat», «bananas») vs. func.apply(this, [«eat», «bananas»]) .

Normally, when calling a function, the value of this inside the function is the object that the function was accessed on. With call() , you can assign an arbitrary value as this when calling an existing function, without first attaching the function to the object as a property. This allows you to use methods of one object as generic utility functions.

Warning: Do not use call() to chain constructors (for example, to implement inheritance). This invokes the constructor function as a plain function, which means new.target is undefined , and classes throw an error because they can’t be called without new . Use Reflect.construct() or extends instead.

Examples

Using call() to invoke a function and specifying the this value

In the example below, when we call greet , the value of this will be bound to object obj , even when greet is not a method of obj .

function greet()  console.log(this.animal, "typically sleep between", this.sleepDuration); > const obj =  animal: "cats", sleepDuration: "12 and 16 hours", >; greet.call(obj); // cats typically sleep between 12 and 16 hours 

Using call() to invoke a function without specifying the first argument

If the first thisArg parameter is omitted, it defaults to undefined . In non-strict mode, the this value is then substituted with globalThis (which is akin to the global object).

.globProp = "Wisen"; function display()  console.log(`globProp value is $this.globProp>`); > display.call(); // Logs "globProp value is Wisen" 

In strict mode, the value of this is not substituted, so it stays as undefined .

"use strict"; globalThis.globProp = "Wisen"; function display()  console.log(`globProp value is $this.globProp>`); > display.call(); // throws TypeError: Cannot read the property of 'globProp' of undefined 

Transforming methods to utility functions

call() is almost equivalent to a normal function call, except that this is passed as a normal parameter instead of as the value that the function was accessed on. This is similar to how general-purpose utility functions work: instead of calling array.map(callback) , you use map(array, callback) , which avoids mutating Array.prototype , and allows you to use map with array-like objects that are not arrays (for example, arguments ).

Take Array.prototype.slice() , for example, which you want to use for converting an array-like object to a real array. You could create a shortcut like this:

const slice = Array.prototype.slice; // . slice.call(arguments); 

Note that you can’t save slice.call and call it as a plain function, because the call() method also reads its this value, which is the function it should call. In this case, you can use bind() to bind the value of this for call() . In the following piece of code, slice() is a bound version of Function.prototype.call() , with the this value bound to Array.prototype.slice() . This means that additional call() calls can be eliminated:

// Same as "slice" in the previous example const unboundSlice = Array.prototype.slice; const slice = Function.prototype.call.bind(unboundSlice); // . slice(arguments); 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 1, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Call Functions in JavaScript

One of the fundamental tasks with JavaScript is how to write and call functions in your code. This may seem like a simple thing, and it essentially is, however there are a few tips and tricks you can use to help making your use of JavaScript Functions easier and more intuitive. This article takes you through the basics of calling functions in your code, and some more advanced tips and tricks to writing better JavaScript functions that can help take your JavaScript coding to the next level.

How to call a function in JavaScript

Calling a function (aka method) in JavaScript is similar to any other programming language that uses a C-like syntax. Simply call the function by name, then pass in any required parameters in a comma delimited list enclosed in parenthesis.

To put this in a great example that can be easily visualized, let’s take the following sayHello function that accepts a parameter named name of type string:

function sayHello(name)  // implementation code here > 

To call this function, you simply call it directly by name, then pass in the parameter value:

Now, if you have a function you need to call that doesn’t have any parameters, you can call it similarly. A function without any parameters can be called by omitting any parameters, and call it the same way:

If the function accepts multiple parameters, then you can call it similarly with all the parameter values as a comma delimited list:

sayHello("Chris", "Pietschmann", 42); 

This previous example accepts three parameters. The first two are string values, while the third parameter accepts a number.

Call a JavaScript function with return value

While parameters are used to pass one or more values into a JavaScript function, you can use a return value to pass a value out of the function as well. The function can use the return statement to exit and pass some value back to the caller when it’s completed execution.

Here’s an example of a JavaScript function with a return value:

function multiply(a, b)  // simple example that multiplies two numbers var c = a * b; return c; > 

This function can be called using the same method as any other function. By just calling it the same way, you will simply ignore the return value, and move on.

// call function and ignore return value multiply(6, 7); 

If you need to capture the return value from the function, then you can assign it’s result to a variable. The variable will then contain the value returned from the function after execution.

Once the return value has been captured into a variable, that variable can then be used like any other variable. You can consume it’s value directly in this code for something, or even pass it as a parameter to another function.

If the return value of a function is only going to be used as an input parameter of another function, you can pass the return value directly to the function parameter. This is done by putting the function call in the parameters list of the other function call, just like you would a variable.

Here’s an example of passing a variable as a parameter to a function call, and another that passes the return value of a function directly to the parameters of another function:

// pass return value as parameter to another function call var c = multiply(6, 7); var d = multiply(c, 8); // pass return value directly as parameter to another function call var d = multiply(multiply(6, 7), 8); // here's the same broken out to multiple lines for readability var d = multiply( multiply(6, 7), 9 ); 

Passing Functions as Parameters

JavaScript is a functional programming language. This means that functions are variables too. As a result, you can pass functions around as parameters to other functions too. This offers some great flexibility benefits for code reuse, recursion, and other functional programming benefits.

Here’s an example of passing a function as a parameter to another function that builds on the above multiply(a,b) function examples:

// function that accepts a function as an input parameter function doMath(operation, a, b)  // call the parameter function // and return the result return operation(a, b); > // let's call this function var c = doMath(multiply, 6, 7); 

JavaScript Object Methods

Getting a little more object oriented (full JavaScript OOP is discussion for another article), you can have a JavaScript object with it’s own properties and methods. These methods are functions too. The reside on the object, and when called directly have access to the object using the this keyword. The this keyword can be used to reference the object and it’s properties.

Here’s an example of defining a JavaScript object that has some properties and methods:

// object definition var author =  firstName: "Chris", lastName: "Pietschmann", favoriteNumber: 2063, getFullName: function ()  return this.firstName + " " + this.lastName; > >; // call the getFullName method on the object var fullName = author.getFullName(); // return value is "Chris Pietschmann" 

Invoke JavaScript Functions using the call() method

If you have a JavaScript object that has it’s own properties and methods, you can call also call those methods using the call() method. The call() method enables you to call a function by passing in the context for the this keyword within the function, and any required parameters. This enables you to scope the this keyword for the method to reference the object.

Here’s an example of using the call() method to call the getFullName method of the above author object:

var fullName = author.getFullName.call(author); 

Here’s an example of defining a new function that doesn’t exist as a method of the object, then calling it with the context of the this keyword to the object.

function doubleFavoriteNumber()  return this.favoriteNumber * 2; > var a = doubleFavoriteNumber.call(author); 

The call() method accepts the this context to call the method with, in addition to any parameters needed for that function. You can pass these parameters to the function by appending these parameter values to the parameters list sent to the call() method.

Here’s another example that accepts a parameter value:

function doubleFavoriteNumber(n)  return this.favoriteNumber * n; > var a = doubleFavoriteNumber.call(author, 2); 

Function as Return Value of Function

This may sound confusing at first. A JavaScript function can be passed as a return value from another function. This can lead to some more advanced scenarios, and is useful to know is possible. Especially if you’re consuming a JavaScript library or NPM package that has methods / functions that return functions as a result to be consumed later.

Here’s an example of a function definition that returns a function as the return value from the function itself:

function getFullName(fName, lName)  return function ()  return fName + " " + lName; > > // call the function var func = getFullName("Chris", "Pietschmann"); 

Now calling this function will return a function, not any other type of value. The previous example doesn’t return «Chris Pietschmann» , but rather a function can when called will return that. You can then call this function when needed to generate that value;

Now, let’s call the function that was returned from the other function to get the final result returned:

Conclusion

Calling JavaScript functions is simple at first, but you can see there are a number of functional programming techniques that can be used. When you better understand that a JavaScript Function is an object, similar to strings and numbers, then you have the knowledge to write better JavaScript code.

Obviously these techniques help if you’re writing a new JavaScript libarary, framework, or NPM package. However, knowing these techniques will also help you to better consume other libraries, frameworks, and NPM packages in your own code.

Источник