Functional vs. object-oriented programming (OOP) - JavaScript Tutorial

- [Narrator] To get a feel for what functional programming is like, it helps to compare it with object-oriented programming, which many of you may be familiar with. Let's take a look at how these two different paradigms might solve a simple programming problem. So, let's say that we want to write a Shopping List program that helps us keep track of what we need to buy at the store. In object-oriented programming, the main units of computer programs are Classes and Objects. So, a simple object-oriented implementation might look something like this: you have a Shopping List class and a Shopping Item class. Each of these has their own member variables which hold our data, and internal methods to operate on that data. In contrast, the only thing we need to define initially for a functional approach, is a single function. Since functional programming only operates on simple structures, we can assume that our Shopping List will be represented by an array. Therefore, we can define our "add item" function by simply returning a copy of the list with a new item attached, since List Docking CAT returns a copy. Creating our objects in each paradigm looks like this. Notice how for the object-oriented approach, we create a new object for each piece of data. In other words, we have to define what sort of object each piece of data represents. In functional programming, things look a bit different. Our data is contained in simple structures, in this case, a simple hash with name and value keys. In functional programming, we're not so concerned with defining what everything is and what it can do. Instead, we're more concerned with the raw data itself and what operations and transformations we can perform on it. And this is what adding new objects to our Shopping List will look like in both paradigms. Notice that the object-oriented way actually mutates the original data. It changes the state of my Shopping List's inner array. As I mentioned before, for programs as small as this one, it's not hard to keep track of all the changes that we might make to an object throughout its lifetime. But, once programs get bigger, keeping track of all the state changes can be a difficult task and lead to hard-to-find bugs. On the other hand, in typical functional style, we create a new variable with a name representing what we need it for so our original data remains intact. So, in this example, even though both paradigms are adding a new item for the same reason, the object-oriented way gives no hint of why we're adding the new item, whereas the functional way tells us through the name we give our new list. As I mentioned before, this is actually an interesting side-effect of functional programming. Since we have to come up with a new name for each transformation we perform, it forces us to think carefully about what why we're performing that transformation and what we'll use it for. This can greatly improve our code's readability and therefore further reduce bugs. For example, take a look at the object-oriented code on the left. In this code, we're going through a series of "if" statements, and actually mutating the internal array of my Shopping List depending on certain conditions. And after all this happens, the array remains mutated, so that we have to know which conditions were true in order to know which changes took place. In contrast, the functional way, since we create a new variable for each transformation, our original data remains intact. So that afterward, we don't have to worry about which conditions were actually true or not.