Mastering JavaScript Functional Programming - Second Edition

Decorator or wrapper

The Decorator pattern (also known as wrapper) is useful when you want to add additional responsibilities or functionalities to an object in a dynamic way. Let's consider a simple example, which we will illustrate with some React code. (Don't worry if you do not know this framework; the example will be easy to understand. The idea of going with React is because it can very well take advantage of this pattern. Also, we have already seen pure JavaScript higher-order function examples, so it's good to see something new.) Suppose we want to show some elements on the screen, and for debugging purposes, we want to show a thin red border around the object. How can you do it?

If you were using OOP, you would probably have to create ...