Call functions in function javascript

JavaScript Function call()

With the call() method, you can write a method that can be used on different objects.

All Functions are Methods

In JavaScript all functions are object methods.

If a function is not a method of a JavaScript object, it is a function of the global object (see previous chapter).

The example below creates an object with 3 properties, firstName, lastName, fullName.

Example

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

// This will return «John Doe»:
person.fullName();

In the example above, this refers to the person object.

this.firstName means the firstName property of this.

this.firstName means the firstName property of person.

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 JavaScript call() Method

The call() method is a predefined JavaScript method.

It can be used to invoke (call) a method with an owner object as an argument (parameter).

With call() , an object can use a method belonging to another object.

This example calls the fullName method of person, using it on person1:

Example

const person = <
fullName: function() <
return this.firstName + » » + this.lastName;
>
>
const person1 = <
firstName:»John»,
lastName: «Doe»
>
const person2 = <
firstName:»Mary»,
lastName: «Doe»
>

// This will return «John Doe»:
person.fullName.call(person1);

This example calls the fullName method of person, using it on person2:

Example

const person = <
fullName: function() <
return this.firstName + » » + this.lastName;
>
>
const person1 = <
firstName:»John»,
lastName: «Doe»
>
const person2 = <
firstName:»Mary»,
lastName: «Doe»
>

// This will return «Mary Doe»
person.fullName.call(person2);

The call() Method with Arguments

The call() method can accept arguments:

Example

const person = <
fullName: function(city, country) <
return this.firstName + » » + this.lastName + «,» + city + «,» + country;
>
>

const person1 = firstName:»John»,
lastName: «Doe»
>

person.fullName.call(person1, «Oslo», «Norway»);

Источник

Call functions in function javascript

Last updated: Jan 8, 2023
Reading time · 3 min

# Call a Function inside another Function in JavaScript

To call a function inside another function, define the inner function inside the outer function and invoke it.

When using the function keyword, the function gets hoisted to the top of the scope and can be called from anywhere inside the outer function.

Copied! 
function outerFunc(a, b)  function innerFunc(a, b)  return a + b; > const result = innerFunc(a, b); return result; > console.log(outerFunc(10, 10)); // 👉️ 20 console.log(outerFunc(10, 20)); // 👉️ 30 

The following example shows how we can call the inner function before it is declared.

This is because of how hoisting works in JavaScript.

Copied! 
function outerFunc()  const num1 = 5; const num2 = 10; // 👇️ call inner function before it's declared const result = innerFunc(); function innerFunc()  return num1 + num2; > return result; > console.log(outerFunc()); // 👉️ 15 

This only works for functions declared using the function keyword (not for arrow functions).

You can imagine that the declaration of the function gets hoisted to the top of the scope, so it can be called from anywhere in the scope.

# Returning the inner function from the outer function

An alternative approach is to return the inner function from the outer one.

Copied! 
function outerFunc()  function innerFunc(a, b)  return a + b; > return innerFunc; > const innerFunc = outerFunc(); console.log(innerFunc(2, 3)); // 👉️ 5 console.log(innerFunc(3, 3)); // 👉️ 6 

Notice that we didn’t use parentheses () to invoke the inner function inside the outer one.

We returned the function without invoking it. In other words, we returned a reference to the inner function, not the result of calling it.

This allows us to invoke the inner function as many times as necessary, passing it different arguments every time.

# Inner function remembers variables declared in the outer function

What’s most useful in this scenario is that the inner function remembers the variables declared in the outer function between invocations.

Copied! 
function outerFunc()  const z = 100; function innerFunc(a, b)  return a + b + z; > return innerFunc; > const innerFunc = outerFunc(); console.log(innerFunc(2, 3)); // 👉️ 105 console.log(innerFunc(3, 3)); // 👉️ 106 

Notice that the inner function remembers the value of the z variable between invocations.

This concept is called a closure in JavaScript.

The inner function gets bundled with references to its surrounding state.

This means that the inner function has access to the variables declared inside of the outer function’s scope at any time.

This is useful in many different scenarios. For example, you could pass a parameter to the outer function that it will remember for any of the inner function calls.

Copied! 
function outerFunc(a)  function innerFunc(b, c)  return a + b + c; > return innerFunc; > const innerFunc = outerFunc(10); console.log(innerFunc(1, 1)); // 12 console.log(innerFunc(1, 2)); // 13 

We passed 10 as a parameter to the outer function and stored the result in a variable.

The innerFunc variable stores a reference to the innerFunc function where the a variable points to a value of 10 .

Now we can omit 10 from the parameters when calling the inner function.

# Returning an object from the outer function

You can also return an object from the outer function.

Copied! 
function outerFunc()  function innerFunc(a, b)  return a + b; > return innerFunc>; > const outer = outerFunc(); console.log(outer.innerFunc(10, 10)); // 20 console.log(outer.innerFunc(20, 15)); // 35 

The object contains a single property — the inner function.

You can call the inner function by accessing the property on the object.

I’ve written a detailed article on how to call a function in an object.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник