Sometimes, we want to perform the same operation on an individual element as we would a group of elements. Consider the grape.. I could tell you to eat a grape, and you’d know what to do with it. I could also tell you to eat these grapes, and so long as your hungry for grapes, you would then eat them all, one by one.
In this example, the eat method can be used on a single grape, or a group of grapes. It will handle both cases accordingly.Composites work with trees, and when it comes to programming, trees are everywhere. One of the most common trees that we interact with is the file system, and the file system directories can be used to group files in other directories.
The nodes that contain groups of other nodes are referred to as branches, and the file system, a file folder, represents a branch. If we traverse the tree, we will eventually end up with nodes that do not contain or group other nodes.
These nodes are referred to as leaves,and in the file system, each file would represent a leaf. A composite is a leaf, or a branch, and the composite’s design pattern allows you to organize your objects in a way that treats leaves and branches uniformly. The Gang of Four define the intent of the composite pattern as composing objects into tree structures to represent part-whole hierarchies.
Composite lets clients treat individual objects and compositions of objects uniformly. And that’s exactly what we find in our exercise files under Chapter 3, Lesson 5. You will notice that there’s a catalog item class. A catalog item has a name and a price, it has a getter that returns the price for the catalog item, and it also has a print method that will print a name and the price to the console. Let’s consider using this catalog item. If you look at the index.js file, you will see that we create three instances of catalog items. All of them are shoes..
So, we have boots, sneakers and flip flops, and they each have a name and price. I could log the total for any of these instances, and on line 7, we go ahead and log the boots total to the console. I can also invoke the print method on either of these items, and we can take a look at this by going to the console and running our index.js file. And we can see the total for the boots, as well as the print method working on leather boots and kicks. So, the idea behind composites, is we have a single item.. A catalog item, in this case, would represent a leaf.
We want to create a class that could represent the branch, like catalog group. So, let’s say that we had a catalog group class, and we could create a new catalog group, like group shoes. And we’ll give the shoes group the name Shoes and Such, and we want to pass in an array of items that are contained in this catalog group, so we’ll have boots, sneakers and flip flops. Great.. So, now that I’ve created a catalog group.. In order to work with composites, this group needs to implement the same interface as the catalog item, or the leaf.
So, that means that we should be able to log the total for the whole group. And, just like we can log the total for an item, we use the exact same interface to do that. That also means that we should be able to print the details for the entire group. Now, just adding the same interface to the catalog group does not make a composite. In the next lesson, we’re going to go ahead and implement the catalog group, and we can see how we can arrange our catalog into a tree, where we can use the total, and the print method, recursively.