{"id":6643,"date":"2023-08-22T04:00:07","date_gmt":"2023-08-22T04:00:07","guid":{"rendered":"https:\/\/www.ardorsys.com\/blog\/?p=6643"},"modified":"2023-08-22T04:56:17","modified_gmt":"2023-08-22T04:56:17","slug":"array-methods-in-javascript-filter-find-map-reduce-every-and-some","status":"publish","type":"post","link":"https:\/\/www.ardorsys.com\/blog\/array-methods-in-javascript-filter-find-map-reduce-every-and-some\/","title":{"rendered":"Array Methods in JavaScript: Filter, Find, Map, Reduce, Every, and Some"},"content":{"rendered":"

Not everything is an object. When it comes to functional programming, it\u2019s 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.<\/p>\n

JavaScript is a language that\u2019s prone to imperative patterns because of how easy it is to pick up. A lot of developers<\/a> tend to write their code in a procedural manner \u2014 where one blip in the procedure can break the code or create side-effect bugs.<\/p>\n

This is where functional patterns come in.<\/p>\n

The Quick Lowdown on Functional Programming<\/h3>\n

A lot of smelly JavaScript code is written in an imperative or procedural pattern. This is code that\u2019s written in a way that represents a flow of thought, resulting in a series of dependencies for the chain to work.<\/p>\n

Take a look at the procedural model below:<\/p>\n

Start.\r\n\r\nCheck computer power status\r\nif on, proceed to next step. Else proceed to turn computer on.\r\nEnter password. If password accepted, proceed. Else try again.\r\nOpen browser. \r\nStart browsing the Internet.\r\n\r\nEnd.<\/code><\/pre>\n
Each step in the process needs to be done in order for the final outcome to occur. For some circumstances, a procedural pattern is necessary but it\u2019s not required for all scenarios.<\/p>\n
There are some scenarios where the order doesn\u2019t matter as much. For example, the task of making instant coffee. It doesn\u2019t matter in which order you put in the sugar and coffee powder \u2014 as long as it\u2019s in the mug. That\u2019s what functional programming<\/a> is in a nutshell.<\/p>\n
In JavaScript, we often work with arrays but a lot of developers tend to use an imperative pattern when it\u2019s not necessary.\u00a0while<\/code>\u00a0and\u00a0for<\/code>\u00a0loops may be used to filter, find or do something to each value inside the array.<\/p>\n
However, if something goes wrong, the process hasn\u2019t finished running, or the flow somehow breaks, the functions that depend on correct values will also break as a side effect.<\/p>\n
filter()<\/code>,\u00a0find()<\/code>,\u00a0map()<\/code>,\u00a0reduce()<\/code>,\u00a0every()<\/code>\u00a0and\u00a0some()\u00a0<\/code>are six JavaScript array methods that should be used more often to prevent such blips from occurring. These methods are fantastic to use and read in code because\u00a0they don\u2019t require a state to exist<\/em>\u00a0to work.<\/p>\n
How to Use filter()<\/h4>\n
filter()<\/code>\u00a0is a method that lets you create a new array based on conditions that evaluate to\u00a0true<\/code>\u00a0from an existing array.<\/p>\n
Take a look at the example below:<\/p>\n
let animals = [\r\n   {name: 'Tibbers', type: 'cat', isNeutered: true, age: 2},\r\n   {name: 'Fluffball', type: 'rabbit', isNeutered: false, age: 1},\r\n   {name: 'Strawhat', type: 'cat', isNeutered: true, age: 5}\r\n ]\r\n\r\n \/*using imperative*\/\r\n let neuteredAnimals = [];\r\n\r\nfor (let i=0; i < animals.length; i++){\r\n  let a = animals[i];\r\n  if(a.isNeutered){\r\n    neuteredAnimals.push(a);\r\n  }\r\n}<\/code><\/pre>\n
The above example is a procedural pattern we often see in the wild as a way to loop through each item in the array, test the condition then push it into the new array.<\/p>\n
With the\u00a0filter()<\/code>\u00a0method, you just need to set the condition. For example:<\/p>\n
let animals = [\r\n    {name: 'Tibbers', type: 'cat', isNeutered: true, age: 2},\r\n    {name: 'Fluffball', type: 'rabbit', isNeutered: false, age: 1},\r\n    {name: 'Strawhat', type: 'cat', isNeutered: true, age: 5}\r\n  ]\r\n\r\n \/*using functional filter() where a represents an item in the array*\/\r\n let neuteredAnimals = animals.filter((a) => {\r\n     return a.isNeutered;\r\n });<\/code><\/pre>\n
Here, we just need to set up the filter method against the array. The anonymous function lets\u00a0a<\/code>\u00a0represent a single item in the array in the same manner as\u00a0a = animals[i]<\/code>\u00a0did in the procedural pattern. Whatever is returned within the\u00a0filter()<\/code>\u00a0is what gets put into the new array.<\/p>\n
How to use find()<\/h4>\n
In JavaScript,\u00a0find()<\/code>\u00a0is used to create a new object based on the condition you set. On the surface, it looks like\u00a0filter()<\/code>\u00a0but they\u2019re not the same.\u00a0filter()<\/code>\u00a0returns an array of matched objects while\u00a0find()<\/code>\u00a0will return the first matched object.<\/p>\n
See the example below:<\/p>\n
let animals = [\r\n    {name: 'Tibbers', type: 'cat', isNeutered: true, age: 2},\r\n    {name: 'Fluffball', type: 'rabbit', isNeutered: false, age: 1},\r\n    {name: 'Strawhat', type: 'cat', isNeutered: true, age: 5}\r\n  ]\r\n\r\nanimalTypeFound = animals.find( animal => animal.type === 'cat' );\r\n\r\n\/\/ animalTypeFound will return:\r\n\/\/ {name: 'Tibbers', type: 'cat', isNeutered: true, age: 2}\r\n\r\nanimalTypeFilter = animals.filter( animal => animal.type === 'cat' );\r\n\r\n\/\/ animalTypeFilter will return:\r\n\/\/ [{name: 'Tibbers', type: 'cat', isNeutered: true, age: 2}, {name: 'Strawhat', type: 'cat', isNeutered: true, age: 5}]\r\n<\/code><\/pre>\n
find()<\/code>will stop at the first match while\u00a0filter()<\/code>\u00a0will continue and return all matched items in the array.<\/p>\n
How to Use map()<\/h4>\n
You have an array but you want it to look different. You could loop through using a\u00a0forEach()<\/code>\u00a0function but that will only create complications later down the line.<\/p>\n
Mapping lets you move the values around, reassign them to different selectors and whatever else you want to do to them. The result of\u00a0map()<\/code>\u00a0is an object that lets you store key-pair values or just an array of simple values.<\/p>\n
See the code below for syntax and examples:<\/p>\n
let animals = [\r\n    {name: 'Tibbers', type: 'cat', isNeutered: true, age: 2},\r\n    {name: 'Fluffball', type: 'rabbit', isNeutered: false, age: 1},\r\n    {name: 'Strawhat', type: 'cat', isNeutered: true, age: 5}\r\n  ]\r\n\r\n\/\/ what you need: \r\n\/\/ ['Tibbers', 'Fluffball', 'Strawhat']\r\n\r\nlet animalNames = animals.map(animal => {return animal.name});\r\n\r\n\/\/ what you need: \r\n\/\/ [{name: 'Tibbers', species: 'cat'}, {name: 'Fluffball', species: 'rabbit'}, {name: 'Strawhat', species: 'cat'}]\r\n\r\nlet petDetails = animals.map(animal => {\r\n    return {\r\n        name: animal.name, \r\n        species: animal.type\r\n    };\r\n});<\/code><\/pre>\n
How to Use reduce()<\/h4>\n
We hear about\u00a0reduce<\/code>\u00a0from time to time but no one really talks about what exactly it is. In short,\u00a0reduce<\/code>\u00a0lets you interact two values or objects adjacent to each other from left to right.<\/p>\n
For example, you have the following array:\u00a0[100, 20, 10]<\/code><\/p>\n
If you were to use\u00a0reduce()<\/code>\u00a0on it, the first set of values will be\u00a0100<\/code>\u00a0and\u00a020<\/code>. Then whatever the output of that is used to interact with\u00a010<\/code>.<\/p>\n
let numbers = [100, 20, 10];\r\n\r\n\/\/ result will return 70 as the value\r\n\/\/ The function inside reduce will run twice. \r\n\/\/ the first time, x = 100, y = 20\r\n\/\/ the second time, x = 80, y = 10\r\n\r\nresult = numbers.reduce((x, y) => { return x - y; });<\/code><\/pre>\n
reduce()<\/code>\u00a0can also take two arguments. The first is the function that determines what happens to the two values and the second sets the starting value.<\/p>\n
let animals = [\r\n    {name: 'Tibbers', type: 'cat', isNeutered: true, age: 2},\r\n    {name: 'Fluffball', type: 'rabbit', isNeutered: false, age: 1},\r\n    {name: 'Strawhat', type: 'cat', isNeutered: true, age: 5}\r\n  ]\r\n\r\n\/\/ How old are all the animals combined?\r\n\/\/ 0 is the starting value and acts as the first acculmulator value\r\n\/\/ will return 8\r\n\r\nlet totalAge = animals.reduce((acculmulator, animal) => {\r\n    return acculmulator + animal.age;\r\n}, 0);\r\n\r\n\/\/ lets say you want to find out the oldest animal \r\n\/\/ code below will return {name: 'Strawhat', type: 'cat', isNeutered: true, age: 5}\r\n\r\nlet oldestPet = animals.reduce((oldest, animal) => {\r\n    return (oldest.age || 0) > animal.age ? oldest : animal;\r\n  }, {});\r\n\r\n  \/\/ decrypting the code above and how terniaries work \r\n  \/\/ the condition --> (oldest.age || 0) > animal.age \r\n  \/\/ if true --> ? oldest\r\n  \/\/ else --> : animal<\/code><\/pre>\n
How to Use every()<\/h4>\n
Every returns a\u00a0true<\/code>\u00a0or\u00a0false<\/code>\u00a0value based on the condition set. It works in a similar fashion as\u00a0filter()<\/code>\u00a0but instead of returning an object or value,\u00a0every()<\/code>\u00a0spits back a boolean.<\/p>\n
This makes it good for quickly checking whether everything inside an array meets the criteria.<\/p>\n
let animals = [\r\n    {name: 'Tibbers', type: 'cat', isNeutered: true, age: 2},\r\n    {name: 'Fluffball', type: 'rabbit', isNeutered: false, age: 1},\r\n    {name: 'Strawhat', type: 'cat', isNeutered: true, age: 5}\r\n  ]\r\n\r\nlet allNeutered = animals.every(animal => {return animal.isNeutered});\r\n\r\n\/\/will return false because not all values under isNeutered evaluates to true<\/code><\/pre>\n
How to use some()<\/h4>\n
some()<\/code>\u00a0works the same way as\u00a0every()<\/code>\u00a0but only at least one of the conditions needs to evaluate to\u00a0true.<\/code><\/p>\n
See example below:<\/p>\n
let animals = [\r\n    {name: 'Tibbers', type: 'cat', isNeutered: true, age: 2},\r\n    {name: 'Fluffball', type: 'rabbit', isNeutered: false, age: 1},\r\n    {name: 'Strawhat', type: 'cat', isNeutered: true, age: 5}\r\n  ]\r\n\r\nlet someAreCats = animals.some(animal => {return animal.type === 'cat'});\r\n\r\n\/\/ will return true because at least one animal.type returned 'cat'<\/code><\/pre>\n
In real-world use cases, you might use\u00a0every()<\/code>\u00a0and\u00a0some()<\/code>\u00a0to check values in an array before sending them off to the database.<\/p>\n
Or perhaps you want to make sure that there is a certain category of an item in a cart before applying a special discount. Or you\u2019re coding a booking system and you wanted to make sure that every customer who can book satisfies the minimum age requirements.<\/p>\n
Lets Mix and Match!<\/h4>\n
You can use these array methods on their own or in chains. The result from the first method will be used as the value for the following method.<\/p>\n
See the example below:<\/p>\n
let animals = [\r\n    {name: 'Tibbers', type: 'cat', isNeutered: true, age: 2, enteredPagent: true, cutenessScore: 347},\r\n    {name: 'Fluffball', type: 'rabbit', isNeutered: false, age: 1, enteredPagent: true, cutenessScore: 193},\r\n    {name: 'Strawhat', type: 'cat', isNeutered: true, age: 5, enteredPagent: false, cutenessScore: 521}\r\n  ]\r\n\r\n\/\/lets say you want to find the total cuteness score of all valid pagent entrants\r\n\r\nlet totalScore = animals\r\n                    .filter(animal => {return animal.isNeutered})\r\n                    .reduce((accumulator, animal) => {return accumulator + animal.cutenessScore}, 0);\r\n\r\n\/\/ totalScore will return 868<\/code><\/pre>\n
Depending on your dataset, you can become quite efficient with arrays, reducing the need to manually loop through every object and array to do what you need to do.<\/p>\n
Final Words<\/h4>\n
JavaScript can be efficient \u2014 if you take the time to learn it properly. Developers new to JavaScript tend to fall into procedural patterns because it\u2019s easy.<\/p>\n
However, easy can quickly turn into a spaghetti jumble of complicated once you work with more than one\u00a0for<\/code>\u00a0or\u00a0while<\/code>\u00a0loop. Array methods eliminate the potential craziness that comes with long code, nested brackets and, lost semi-colons.<\/p>\n
Source: Dottedsquirrel<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript is a language that\u2019s prone to imperative patterns because of how easy it is to pick up. A lot of developers tend to write their code in a procedural manner \u2014 where one blip in the procedure can break the code or create side-effect bugs.\n","protected":false},"author":1,"featured_media":6644,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[150],"tags":[152,151],"class_list":{"0":"post-6643","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-array","9":"tag-javascript"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/posts\/6643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/comments?post=6643"}],"version-history":[{"count":2,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/posts\/6643\/revisions"}],"predecessor-version":[{"id":7249,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/posts\/6643\/revisions\/7249"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/media\/6644"}],"wp:attachment":[{"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/media?parent=6643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/categories?post=6643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ardorsys.com\/blog\/wp-json\/wp\/v2\/tags?post=6643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}