Inversion of Control is a standard technique in software, and some software communities may be familiar with the term. It is probably a less familiar term to many developers in the JavaScript community, as it’s a less commonly used phrase in this context. However, the technique is a core part of the JavaScript environment that is used in everyday work.

First let me explain what Inversion of Control is, and how it is used. Procedural or imperative code that executes from top to bottom is said to have a flow of control. It is obvious the order in which the statements will be performed. However, there are some drawbacks to only having your program perform in this way.

Consider a classic use of JavaScript handling a click event in the web browser. By using Inversion of Control, the program can delegate some responsibility to the browser. Instead of having to check if a click event has happened periodically, a piece of JavaScript code can be given to the browser to run after the event occurs. This coding is usually referred to as a callback function. Notice that the developer does not have a firm idea of what order the code will run in before it is executed. The order is dependent on when the user clicks on an element on the page.

The browser then takes control of the flow of execution, and when it detects the click event, it calls back into the callback function that was given to it. This process is advantageous. The web browser, most frameworks, environments like Node, and other applications of JavaScript provide these types of helpful interfaces for application programmers.

They take on the burden of handling when and how code should be executed. Web developers then can focus on the proper application behavior when events like mouseover, click, or http requests happen.

So, what now? If we apply our understanding of how this can be useful, there are more advanced ways of taking advantage of it. Not only can we structure programs using callback functions, but using modern ECMAScript allows us to make the code even clearer.

Promises, generators, and async functions are being added to the environments that run modern JavaScript. Each of these has valuable uses.

As programs grow, and the amount of code needed to deliver feature-rich applications expands, it becomes more important to manage how the code is structured. ES6 modules are necessary additions to a modern codebase and allow a developer to think more acutely on the task at hand. Writing code in a more loosely coupled fashion cannot only let the code to be less complicated but also allows for it to be reused in more places. Inversion of Control is the underlying foundation that allows much of this to happen.

For further material on Inversion of Control, let me refer you to Mattias P. Johansson and his excellent description.

Hopefully, this has been a helpful overview on what Inversion of Control is, how you may already be using it, and how you can use it to your advantage in future applications.