Calling javascript functions in javascript

JavaScript Function Invocation

The code inside a JavaScript function will execute when «something» invokes it.

Invoking a JavaScript Function

The code inside a function is not executed when the function is defined.

The code inside a function is executed when the function is invoked.

It is common to use the term «call a function» instead of «invoke a function«.

It is also common to say «call upon a function», «start a function», or «execute a function».

In this tutorial, we will use invoke, because a JavaScript function can be invoked without being called.

Invoking a Function as a Function

Example

The function above does not belong to any object. But in JavaScript there is always a default global object.

In HTML the default global object is the HTML page itself, so the function above «belongs» to the HTML page.

In a browser the page object is the browser window. The function above automatically becomes a window function.

Note

This is a common way to invoke a JavaScript function, but not a very good practice.
Global variables, methods, or functions can easily create name conflicts and bugs in the global object.

myFunction() and window.myFunction() is the same function:

Example

What is this?

In JavaScript, the this keyword refers to an object.

Which object depends on how this is being invoked (used or called).

The this keyword refers to different objects depending on how it is used:

In an object method, this refers to the object.

Alone, this refers to the global object.

In a function, this refers to the global object.

In a function, in strict mode, this is undefined .

In an event, this refers to the element that received the event.

Methods like call() , apply() , and bind() can refer this to any object.

Note

See Also:

The Global Object

When a function is called without an owner object, the value of this becomes the global object.

In a web browser the global object is the browser window.

This example returns the window object as the value of this :

Example

let x = myFunction(); // x will be the window object

function myFunction() return this;
>

Invoking a function as a global function, causes the value of this to be the global object.
Using the window object as a variable can easily crash your program.

Invoking a Function as a Method

In JavaScript you can define functions as object methods.

The following example creates an object (myObject), with two properties (firstName and lastName), and a method (fullName):

Example

const myObject = <
firstName:»John»,
lastName: «Doe»,
fullName: function () <
return this.firstName + » » + this.lastName;
>
>
myObject.fullName(); // Will return «John Doe»

The fullName method is a function. The function belongs to the object. myObject is the owner of the function.

The thing called this , is the object that «owns» the JavaScript code. In this case the value of this is myObject.

Test it! Change the fullName method to return the value of this :

Example

const myObject = <
firstName:»John»,
lastName: «Doe»,
fullName: function () <
return this;
>
>

// This will return [object Object] (the owner object)
myObject.fullName();

Invoking a function as an object method, causes the value of this to be the object itself.

Invoking a Function with a Function Constructor

If a function invocation is preceded with the new keyword, it is a constructor invocation.

It looks like you create a new function, but since JavaScript functions are objects you actually create a new object:

Example

// This is a function constructor:
function myFunction(arg1, arg2) this.firstName = arg1;
this.lastName = arg2;
>

// This creates a new object
const myObj = new myFunction(«John», «Doe»);

// This will return «John»
myObj.firstName;

A constructor invocation creates a new object. The new object inherits the properties and methods from its constructor.

The this keyword in the constructor does not have a value.
The value of this will be the new object created when the function is invoked.

Источник

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.

Источник