4 Ways to Invoke a JavaScript Function

This my note from the original article from this StackOverflow Answer. You can check that out also.

There are 4 ways to invoke a function and according to those ways, this value is different. So I will try to explain in according to my understanding with simple examples.

1. As a Method

A method is a function attached to an object. So, please refer to the below code.

const funcObj = {};
funcObj.myArray = [1, 2, 3];

funcObj.myMethod = function () {
  // [point 1]
  console.log(this.myArray);
  console.log(this);
};

funcObj.myMethod();

In here we can create a js object and attach properties to it. Once we invoke the myMethod, this is bound the funcObj. So, we can user inner properties inside within that function.

But if we have inner functions, most of the time this will refer to global scope. Please refer below code block.

const funcObj = {};
funcObj.testPro = [1, 2, 3];
funcObj.myMethod = function () {
  function innerFunction() {
    console.log(this);
  }
  innerFunction();
};
funcObj.myMethod();

Once we invoke the myMethod it will show the global this in the console output. We can do this work-around to overcome that.

// "use strict"

const funcObj = {};
funcObj.testPro = [1, 2, 3];
funcObj.myMethod = function () {
  const that = this;
  function innerFunction() {
    console.log(that);
  }
  innerFunction();
};
funcObj.myMethod();

We can have a variable that assigns the value of this and use in the inner function.

Most importantly make sure to use strict mode to avoid accessing to other scops.

2. As a Function

We can invoke a function calling directly it.

function myFunc() {
  console.log("Hi there..");
  console.log(this);
}

myFunc();

Here this will refer to global scop this. We can avoid this by using strict mode.

3. As a Constructor

When you invoke a constructor, you will create a new object and bound this to that new object. This is kinda similar to Method way. We need to explicitly get this value to inner function unless it will refer to the global value. Please refer the below code block.

function MyFunction() {
  this.name = "MyFunction";
  this.innerFunction = () => {
    return this;
  };
  this.returnTest = function () {
    return test;
  };
  let that = this;
  function test() {
    return that;
  }
}

const myNewFuncObject = new MyFunction();
const values = myNewFuncObject.returnTest();
console.log(values());

4. Using Apply Method

Every function in JavaScript has the apply method. From that method, we can decide what we need on this value.

const that = getGlobalScope();

function myFunction(arg1, arg2) {
  console.log(arg1);
  console.log(arg2);
  console.log(this);
}
var args = ["arg1 value", "arg2 value"];
myFunction.apply(that, args);

function getGlobalScope() {
  // I wanted to have global scope in here
  return this;
}

So, this will be the global scope value in here.

That’s for today friends. See you soon. Thank you.

Main image credit.