Take a look at the example below: let animals = [ How to Use filter()įilter() is a method that lets you create a new array based on conditions that evaluate to true from an existing array. These methods are fantastic to use and read in code because they don’t require a state to exist to work. However, if something goes wrong, the process hasn’t finished running, or the flow somehow breaks, the functions that depend on correct values will also break as a side effect.įilter(), find(), map(), reduce(), every() and some() are six JavaScript array methods that should be used more often to prevent such blips from occurring. while and for loops may be used to filter, find or do something to each value inside the array. In JavaScript, we often work with arrays but a lot of developers tend to use an imperative pattern when it’s not necessary. That’s what functional programming is in a nutshell. It doesn’t matter in which order you put in the sugar and coffee powder - as long as it’s in the mug. For example, the task of making instant coffee. There are some scenarios where the order doesn’t matter as much. For some circumstances, a procedural pattern is necessary but it’s not required for all scenarios. Else try again.Įach step in the process needs to be done in order for the final outcome to occur. Else proceed to turn computer on.Įnter password. ![]() Take a look at the procedural model below: Start. This is code that’s written in a way that represents a flow of thought, resulting in a series of dependencies for the chain to work. The Quick Lowdown on Functional ProgrammingĪ lot of smelly JavaScript code is written in an imperative or procedural pattern. This is where functional patterns come in. A lot of developers tend to write their code in a procedural manner - where one blip in the procedure can break the code or create side-effect bugs. JavaScript is a language that’s prone to imperative patterns because of how easy it is to pick up. When it comes to functional programming, it’s more to do with the processes that get you from point A to point B than how data and groups of business logic are structured. Finally, once map is done looping through our array it will return a brand new array of elements that are equal to the return values of the function we pass to map.Not everything is an object. Then this entire process repeats with the next element in our array all the way until we have no more elements. That value will be stored as the first element in a new array. This function will then run and return a value which in our case is the person's name. In our case that means that the first element in our people array will be set to person. When we first call map we pass it our function and the map method will take the first element of our people array and pass it to the function we pass to map. To help us understand this function a bit better we can look at what happens at each step of map. This function takes one parameter which is the current person within the array. In our above example we passed the function person => person.name to map. This function at a minimum must take a single argument which is the current element within the array. ![]() If you are familiar with the forEach array method map works very similarly in that it calls the method passed to map once for each array element. This function is called once for each item in the array. Map is a method you can call on any array and it takes one parameter which is a function. In the above examples the people array is never actually changed and still contains the people objects with their name and age. Instead it creates a brand new array which is returned from map. Another important thing to note is that the map method does NOT modify the array you call map on. log (peopleNames ) // Īs you can see the code for map is much simpler. Const people = const peopleNames = people.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |