JavaScript: How To Intercept Function and Method Calls

JavaScript:  How To Intercept Function and Method Calls

Intercepting function or method invocation in JavaScript. Monkey-patching or proxies. Let’s talk about that.

The other day I had an object and needed to know when any of its methods were invoked. There were many methods on that object, and these methods were invoked throughout a lot of files. So it seemed impractical to add an extra line of code after every invocation to get a notification of the invocation.

The problem

Let’s consider the following object:

let myObj = {
  multiply(x, y) {
    return x * y;
  },
  squared(x) {
    return x ** x;
  }
};

Now every time you call myObj.multiply(x, y) or myObj.squared(x) you want to know that a method was invoked on the myObj object. And in the ideal world, you would like to know which method it was and what arguments it was invoked with. Something like this.

interceptMethodCalls(myObj, (fnName, fnArgs) => { ... });

Monkey-patching

“Monkey patching is a technique to add, modify, or suppress the default behavior of a piece of code at runtime without changing its original source code.”

https://www.audero.it/blog/2016/12/05/monkey-patching-javascript

So monkey-patching is basically a dynamic replacement of attributes at runtime. How can we go about our problem with monkey-patching?

function interceptMethodCalls(obj, fn) {
  Object.keys(obj).forEach(key => { // (A)
    const prop = obj[key];
    if (typeof prop === 'function') { // (B)
      const origProp = prop;
      obj[key] = (...args) => { // (C)
        fn(key, args); // (D)
        return Reflect.apply(origProp, obj, args); // (E)
      }
    }
  });
}

programming javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

Learning JavaScript: Data Types and Variables

To paraphrase the title of an old computer science textbook, “Algorithms + Data = Programs.” The first step in learning a programming language such as JavaScript is to learn what types of data the language can work with. The second step is to learn how to store that data in variables. In this article I’ll discuss the different types of data you can work with in a JavaScript program and how to create and use variables to store and manipulate that data.

[ Professor JavaScript ]: Introduction

Professor JavaScript is a JavaScript online learning courses YouTube Channel. Students can learn how to develop codes with JavaScript from basic to advanced levels through the online courses in this YouTube channel.

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

Now Learn JavaScript Programming Language With Microsoft

Microsoft has released a new series of video tutorials on YouTube for novice programmers to get a hands-on renowned programming language — JavaScript.