Function Composition: Augmenting an existing function with additional function in Javascript

function currying javascript
compose function javascript
javascript function composition
mixins javascript
javascript mixin vs composition
currying sum function javascript
javascript module pattern w3schools
mixins python

I import a library with a function and would like to replace that function with a function that takes the original function as an argument together with an additional function.

The original function might be logThis:

function logThis() {console.log('this'));

I can create a new function which executes logThis and then logs 'that';

function logThisThenThat() {

I would like to replace logThis with a new function which executes the original function and thereafter another function? Is this possible with function composition or will I have to create a new function with a different name which is made up of the original function and additional functions.

Something along the lines of:

logThis = compose(logThis, logThat);

If you pass logThis() into your compose() function, you will hold a reference to it in the closure, so it will live on when you make a new logThis(). The name isn't really that important so long as you rename in an order that lets you get the reference to the old logThis() before you point the name at a new function. For example, the right side of logThis = compose(logThis, logThat) runs before the name assignment below, so you capture the function reference before reassigning the name:

function logThis() {console.log('this')};
function logThat() {console.log('that')};

let compose = (f1, f2) => () => {

logThis = compose(logThis, logThat)

Curry and Function Composition - JavaScript Scene, together is like snapping together a series of pipes for our data to flow through. Function Composition as an Alternative to Inheritance We’ve already seen in the prior examples how one can infinitely combine functions into to larger, reusable, goal-orientated units.

You can override the existing function with a new one.

Keep a copy of the original like this...

_logThis = logThis;

...and then make your new version call the original one...

function logThis() {
    // your other function call or new code goes here

This isn't a particularly good idea though, since that will modify what happens for every single existing call to that method. This needs to be handled with care.

Also, scope is a big factor here. This is a basic example of what you're trying to do.

Master the JavaScript Interview: What is Function Composition?, In other words, a mixin provides methods that implement a certain Also the method .on(name, handler) that adds handler function as the We can use mixins as a way to augment a class by adding multiple Mixins may become a point of conflict if they accidentally overwrite existing class methods. JavaScript is an easy to learn programming language. It also uses lots of functional programming features that make our lives easier. It’s used to hide items from the outside while letting the

You can create a function like this.

function logThis() {

function logThat() {

let compose = (...func) => ()=> {
	let functions = func;
	functions.forEach((fn) => fn());

logThis = compose(logThis, logThat);

Mixins, If the function had more parameters, it could simply continue to return new functions until all of the arguments are supplied and the application  Composition is a technique that allows you to take two or more simple functions, and combine them into a single, more complex function that performs each of the sub functions in a logical sequence

JavaScript Module Pattern: In-Depth, All of the code that runs inside the function lives in a closure, which provides It does allow some neat compositions, but that comes at the expense of flexibility. If this module were to be augmented again, further in the application's Eich should have started with the semantics of an existing scripting  The exact form of your composition function will depend on the level of generality you need and the kind of API you prefer. Partial Function Application. Partial function application is the process of fixing the value of one or more of a function’s arguments, and then returning the function to be fully invoked later.

A simple explanation of functional pipe in JavaScript - DEV, The need for piping functions comes from two problems butting The more JavaScript shipped, the longer it will take to download and parse, to provide broad APIs for a given type is prototype augmentation. This means that we can now compose this stuff from left-to-right, which is a little more readable:. The composition operator (like all infix operators) has lower precedence than normal function application. This means that the functions used in composition can have arguments without needing to use parentheses. For example, if the “add” and “times” functions have an extra parameter, this can be passed in during the composition.

Function Composition in JavaScript with Array.prototype , Function Composition in JavaScript with Array.prototype. dynamically compose functions from other functions, let's take a brief step back. value, we can use this approach to combine existing functions into new functions:. When Brendan Eich created JavaScript in 1995, he intended to do Scheme in the browser. Scheme, being a dialect of Lisp, is a functional programming language. Things changed when Eich was told that the new language should be the scripting language companion to Java. Eich eventually settled on a language that has a C-style syntax (as does Java), yet has first-class functions. Java technically

  • excellent... that's exactly what i was looking for. is it possible to make this work with n number of functions instead of just two? although in my current use case i will only need two and i could just add more functions one by one.
  • Yeah @DennisBauszus , you just need to pass an array of functions or capture all the arguments. Something like let compose = (...fns) => () => fns.forEach(f=>f())
  • Cool... Just seen the latest answer from manuerumx who suggested the same. Works a treat. Thanks.
  • That's exactly what I did and it works. I thought it looks quite pythonic and that there might be a different more javascripty method out there.
  • I doubt you'll ever see extending functions being a native thing since it's so straight forward to do. I'm sure there are 3rd party libraries out there that make it look fluffy, but it'll do ^^ that at it's lowest level.