DEV Community

Muhammad Ahmad
Muhammad Ahmad

Posted on

Functional Programming in JS - 0x09: OOP + FP =?

Mixing functional and object-oriented programming in JavaScript

Object-oriented programming has been the dominant programming paradigm for several decades. It is taught in Computer Science 101 classes around the world, while functional programming is not. It is what software architects use to design applications, while
functional programming is not. And it makes sense too: OOP makes it easy to conceptualize abstract ideas. It makes it easier to write code.

So, unless you can convince your boss that the application needs to be all functional, we’re going to be using functional programming in an object-oriented world. This part will explore ways to do this.

Functional inheritance

Perhaps the most accessible way to apply functional programming to JavaScript applications is to use a mostly functional style within OOP principles, such as inheritance.

To explore how this might work, let’s build a simple application that calculates the price of a product. First, we’ll need some product classes:

var Shirt = function(size) {
    this.size = size;
};
var TShirt = function(size) {
    this.size = size;
};
TShirt.prototype = Object.create(Shirt.prototype);
TShirt.prototype.constructor = TShirt;
TShirt.prototype.getPrice = function() {
    if (this.size == 'small') {
        return 5;
    } else {
        return 10;
    }
}
var ExpensiveShirt = function(size) {
    this.size = size;
}
ExpensiveShirt.prototype = Object.create(Shirt.prototype);
ExpensiveShirt.prototype.constructor = ExpensiveShirt;
ExpensiveShirt.prototype.getPrice = function() {
    if (this.size == 'small') {
        return 20;
    } else {
        return 30;
    }
}
Enter fullscreen mode Exit fullscreen mode

We can then organize them within a Store class as follows:

var Store = function(products) {
    this.products = products;
}
Store.prototype.calculateTotal = function() {
    return this.products.reduce(function(sum, product) {
        return sum + product.getPrice();
    }, 10) * TAX; // start with $10 markup, times global TAX var
};
var TAX = 1.08;
var p1 = new TShirt('small');
var p2 = new ExpensiveShirt('large');
var s = new Store([p1, p2]);
console.log(s.calculateTotal()); // Output: 35
Enter fullscreen mode Exit fullscreen mode

The calculateTotal() method uses the array’s reduce() function to cleanly sum together the prices of the products.

This works just fine, but what if we need a dynamic way to calculate the markup value?
For this, we can turn to a concept called Strategy Pattern.

Strategy Pattern

Strategy Pattern is a method for defining a family of interchangeable algorithms. It is used by OOP programmers to manipulate behavior at runtime, but it is based on a few functional programming principles:

  • Separation of logic and data
  • Composition of functions
  • Functions as first-class objects

And a couple of OOP principles as well:

  • Encapsulation
  • Inheritance

In our example application for calculating product cost, explained previously, let’s say we want to give preferential treatment to certain customers, and that the markup will have to be adjusted to reflect this.
So let’s create some customer classes:

var Customer = function() {};
Customer.prototype.calculateTotal = function(products) {
    return products.reduce(function(total, product) {
        return total + product.getPrice();
    }, 10) * TAX;
};
var RepeatCustomer = function() {};
RepeatCustomer.prototype = Object.create(Customer.prototype);
RepeatCustomer.prototype.constructor = RepeatCustomer;
RepeatCustomer.prototype.calculateTotal = function(products) {
    return products.reduce(function(total, product) {
        return total + product.getPrice();
    }, 5) * TAX;
};
var TaxExemptCustomer = function() {};
TaxExemptCustomer.prototype = Object.create(Customer.prototype);
TaxExemptCustomer.prototype.constructor = TaxExemptCustomer;
TaxExemptCustomer.prototype.calculateTotal = function(products) {
    return products.reduce(function(total, product) {
        return total + product.getPrice();
    }, 10);
};
Enter fullscreen mode Exit fullscreen mode

Each Customer class encapsulates the algorithm. Now we just need the Store class to call the Customer class’s calculateTotal() method.
0x06

var Store = function(products) {
    this.products = products;
    this.customer = new Customer();
    // bonus exercise: use Maybes from 0x06 instead of a default customer instance 
}
Store.prototype.setCustomer = function(customer) {
    this.customer = customer;
}
Store.prototype.getTotal = function() {
    return this.customer.calculateTotal(this.products);
};
var p1 = new TShirt('small');
var p2 = new ExpensiveShirt('large');
var s = new Store([p1, p2]);
var c = new TaxExemptCustomer();
s.setCustomer(c);
s.getTotal(); // Output: 45
Enter fullscreen mode Exit fullscreen mode

The Customer classes do the calculating, the Product classes hold the data (the prices), and the Store class maintains the context. This achieves a very high level of cohesion and a very good mixture of object-oriented programming and functional programming. JavaScript’s high level of expressiveness makes this possible and quite easy.

Mixins

In a nutshell, mixins are classes that can allow other classes to use their methods. The methods are intended to be used solely by other classes, and the mixin class itself is never to be instantiated. This helps to avoid inheritance ambiguity. And they’re a great means of mixing functional programming with object-oriented programming.

Mixins are implemented differently in each language. Thanks to JavaScript’s flexibility and expressiveness, mixins are implemented as objects with only methods. While they can be defined as function objects (that is, var mixin = function(){...};), it would be better for the structural discipline of the code to define them as object literals (that is, var mixin = {...};). This will help us to distinguish between classes and mixins. After all, mixins should be treated as processes, not objects.

Let’s start with declaring some mixins. We’ll extend our Store application from the previous section, using mixins to expand on the classes:

var small = {
    getPrice: function() {
        return this.basePrice + 6;
    },
    getDimensions: function() {
        return [44, 63]
    }
}
var large = {
    getPrice: function() {
        return this.basePrice + 10;
    },
    getDimensions: function() {
        return [64, 83]
    }
};
Enter fullscreen mode Exit fullscreen mode

We’re not limited to just this. Many more mixins can be added, like colors or fabric material. We’ll have to rewrite our Shirt classes a little bit, as shown in the following code snippet:

var Shirt = function() {
    this.basePrice = 1;
};
Shirt.getPrice = function() {
    return this.basePrice;
}
var TShirt = function() {
    this.basePrice = 5;
};
TShirt.prototype = Object.create(Shirt.prototype);
TShirt..prototype.constructor = TShirt;
Enter fullscreen mode Exit fullscreen mode

Now we’re ready to use mixins.

Classical mixins

You’re probably wondering just how these mixins get mixed with the classes. The classical way to do this is by copying the mixin’s functions into the receiving object. This can be done with the following extension to the Shirt prototype:

Shirt.prototype.addMixin = function(mixin) {
    for (var prop in mixin) {
        if (mixin.hasOwnProperty(prop)) {
            this.prototype[prop] = mixin[prop];
        }
    }
};
Enter fullscreen mode Exit fullscreen mode

And now the mixins can be added as follows:

TShirt.addMixin(small);
var p1 = new TShirt();
console.log(p1.getPrice()); // Output: 11

TShirt.addMixin(large);
var p2 = new TShirt();
console.log(p2.getPrice()); // Output: 15
Enter fullscreen mode Exit fullscreen mode

However, there is a major problem. When the price of p1 is calculated again, it comes back as 15, the price of a large item. It should be the value for a small one!

console.log( p1.getPrice() ); // Output: 15
Enter fullscreen mode Exit fullscreen mode

Functional mixins

There’s another way to use mixins, one that is more aligned with functional programming.

Instead of copying the methods of the mixin to the target object, we need to create a new object that is a clone of the target object with the mixin’s methods added in. The object must be cloned first, and this is achieved by creating a new object that inherits from it. We’ll call this variation plusMixin.

Shirt.prototype.plusMixin = function(mixin) {
    // create a new object that inherits from the old
    var newObj = this;
    newObj.prototype = Object.create(this.prototype);
    for (var prop in mixin) {
        if (mixin.hasOwnProperty(prop)) {
            newObj.prototype[prop] = mixin[prop];
        }
    }
    return newObj;
};

var SmallTShirt = Tshirt.plusMixin(small); // creates a new class
var smallT = new SmallTShirt();

console.log(smallT.getPrice()); // Output: 11

var LargeTShirt = Tshirt.plusMixin(large);
var largeT = new LargeTShirt();

console.log(largeT.getPrice()); // Output: 15
console.log(smallT.getPrice()); // Output: 11 (not effected by 2nd mixin
call)
Enter fullscreen mode Exit fullscreen mode

Here comes the fun part! Now we can get really functional with the mixins. We can create every possible combination of products and mixins.

// in the real world there would be way more products and mixins!
var productClasses = [ExpensiveShirt, Tshirt];
var mixins = [small, medium, large];
// mix them all together
products = productClasses.reduce(function(previous, current) {
    var newProduct = mixins.map(function(mxn) {
        var mixedClass = current.plusMixin(mxn);
        var temp = new mixedClass();
        return temp;
    });
    return previous.concat(newProduct);
}, []);
products.forEach(function(o) {
    console.log(o.getPrice())
});
Enter fullscreen mode Exit fullscreen mode

To make it more object-oriented, we can rewrite the Store object with this functionality.
We’ll also add a display function to the Store object, not the products, to keep the interface logic and the data separated.

// the store
var Store = function() {
    productClasses = [ExpensiveShirt, TShirt];
    productMixins = [small, medium, large];
    this.products = productClasses.reduce(function(previous, current) {
        var newObjs = productMixins.map(function(mxn) {
            var mixedClass = current.plusMixin(mxn);
            var temp = new mixedClass();
            return temp;
        });
        return previous.concat(newObjs);
    }, []);
}
Store.prototype.displayProducts = function() {
        this.products.forEach(function(p) {
                $('ul#products').append('<li>' + p.getTitle() + ':
                    $ '+p.getPrice()+' < /li>');
                });
        }
Enter fullscreen mode Exit fullscreen mode

And all we have to do is create a Store object and call its displayProducts() method to generate a list of products and prices!

<ul id="products">
    <li>small premium shirt: $16</li>
    <li>medium premium shirt: $18</li>
    <li>large premium shirt: $20</li>
    <li>small t-shirt: $11</li>
    <li>medium t-shirt: $13</li>
    <li>large t-shirt: $15</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

These lines need to be added to the product classes and mixins to get the preceding output to work:

Shirt.prototype.title = 'shirt';
TShirt.prototype.title = 't-shirt';
ExpensiveShirt.prototype.title = 'premium shirt';

// then the mixins got the extra 'getTitle' function:
var small = {
    ...
    getTitle: function() {
        return 'small ' + this.title; // small or medium or large
    }
}
Enter fullscreen mode Exit fullscreen mode

And, just like that, we have an e-commerce application that is highly modular and extendable.

New shirt styles can be added absurdly easily—just define a new Shirt subclass and add to it the Store class’s array product classes.

Mixins are added in just the same way. So now when our boss says, “Hey, we have a new type of shirt and a coat, each available in the standard colors, and we need them added to the website before you go home today”, we can rest assured that we’ll not be staying late!

Summary

JavaScript has a high level of expressiveness. This makes it possible to mix functional and object-oriented programming. Modern JavaScript is not solely OOP or functional—it is a mixture of the two.

Concepts such as Strategy Pattern and mixins are perfect for JavaScript’s prototype structure, and they help to prove that today’s best practices in JavaScript share equal amounts of functional programming and object-oriented programming.

If you were to take away only one thing from this series, I would want it to be how to apply functional programming techniques to real-world applications. And this series showed you how to do exactly that.

Discussion (0)