{"id":259,"date":"2019-10-14T16:55:20","date_gmt":"2019-10-14T19:55:20","guid":{"rendered":"https:\/\/blog.softmakers.com.br\/?p=259"},"modified":"2020-04-23T16:58:53","modified_gmt":"2020-04-23T19:58:53","slug":"trabalhando-com-map-filter-reduce","status":"publish","type":"post","link":"https:\/\/blog.softmakers.com.br\/index.php\/2019\/10\/14\/trabalhando-com-map-filter-reduce\/","title":{"rendered":"Trabalhando com map, filter e reduce"},"content":{"rendered":"\n

Entenda os comportamentos e funcionalidades, de forma Pr\u00e1tica e direta. <\/p>\n\n\n\n

Map<\/h3>\n\n\n\n
O map<\/strong> \u00e9 um m\u00e9todo que executa um callback<\/strong> para cada valor de um array <\/strong>modificando os mesmos, isso faz com que o map<\/strong> crie um novo array<\/strong> com os novos valores obtidos. <\/p>\n\n\n\n
Quando utilizar? <\/p>\n\n\n\n
Quando voc\u00ea quer que o resultado seja um \u201carray\u201d com \u201co mesmo\u201d tamanho do \u201carray\u201d inicial<\/strong>, por\u00e9m com valores modificados (ou n\u00e3o).<\/strong><\/p>\n\n\n\n

\nFunciona da seguinte maneira:\n\n<\/h4>\n\n\n\n
recebe 1 elemento do array. <\/strong> <\/li>
executa a fun\u00e7\u00e3o passada.
\u0096adiciona esse elemento no array<\/strong> de resposta. <\/li><\/ul><\/li><\/ul>\n\n\n\n
Aplica\u00e7\u00e3o B\u00e1sica<\/strong><\/p>\n\n\n\n
const array = ['values'];\n\nconst arrayResp = array.map(function(value){\n\t\/\/...Aqui \u00e9 aplicado o C\u00f3digo de execu\u00e7\u00e3o que retorna a intera\u00e7\u00e3o para o arrayResp.\n});\n\nconsole.log(arrayResp);<\/code><\/pre>\n\n\n\nExemplo 1: B\u00e1sico<\/strong><\/p>\n\n\n\n let list = [1,2,3].map(function(value){\n\treturn value * 2;\n});\n\nconsole.log(list); \/\/[2, 4, 6]<\/code><\/pre>\n\n\n\nBasicamente o m\u00e9todo este percorrendo o array e fazendo a multiplica\u00e7\u00e3o de cada valor por 2, e a cada soma o resultado \u00e9 adicionado a vari\u00e1vel list<\/strong>, tendo por fim a impress\u00e3o no console o array<\/strong> [2, 4, 6].<\/li><\/ul>\n\n\n\nExemplo 2: Com Arrow Functions<\/strong><\/p>\n\n\n\n const list = [1,2,3];\n\nlet multipliedByTwo = list.map(x => x * 2);\n\nconsole.log(multipliedByTwo); \/\/[2, 4, 6]<\/code><\/pre>\n\n\n\nNeste exemplo temos o mesmo processo do exemplo anterior, com algumas modifica\u00e7\u00f5es e a utiliza\u00e7\u00e3o do Arrow functions<\/a><\/strong><\/em>, desta forma podemos ter um c\u00f3digo mais curto (limpo) sem perder a ess\u00eancia. <\/li><\/ul>\n\n\n\nExemplo 3: Com Promises<\/strong><\/p>\n\n\n\nconst list = [1,2,3];\nlet multipliedByTwo = [];\n\nconst functionWithPromise = item => {\n\treturn Promise.resolve(item * 2);\n}\n\nconst anAsyncFunction = async item => {\n\treturn await functionWithPromise(item);\n}\n\nconst getData = async () => {\n\tmultipliedByTwo.push(\n\t\tawait Promise.all(\n\t\t\tlist.map(item => anAsyncFunction(item))\n\t\t)\n\t);\n\treturn multipliedByTwo[0];\n}\n\nasync function result(){\n\tconsole.log(await getData());\n}\n\nresult(); \/\/ [2 ,4, 6]<\/code><\/pre>\n\n\n\n Agora Observamos um exemplo mais trabalhado, utilizando Promises<\/strong><\/a>, simplificando, o map<\/strong> \u00e9 executado dentro do escopo da Promises.all, neste formato o map<\/strong> \u00e9 completamente executado e retorna um array<\/strong> com os valor somados, depois \u00e9 feito o “push”<\/strong><\/em> para o vari\u00e1vel multipliedByTwo<\/strong>, ou seja, \u00e9 obtido um array e aplicado dentro do outro, por este motivo o retorno da fun\u00e7\u00e3o getData<\/em><\/strong> esta “pegando” o item [0]<\/em>, imprimindo por fim o mesmo resultado dos exemplos anteriores.<\/li><\/ul>\n\n\n\nNOTA:<\/p> O m\u00e9todo map<\/code> n\u00e3o modifica o array original. No entanto, a fun\u00e7\u00e3o callback<\/code> invocada por ele pode faz\u00ea-lo. <\/p>Refer\u00eancia: https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map<\/a> <\/cite><\/blockquote>\n\n\n\n Filter<\/h3>\n\n\n\nComo o nome j\u00e1 diz essa fun\u00e7\u00e3o<\/strong> server para filtrar elementos<\/strong> de um array<\/strong> para um novo. O filter<\/strong> assim como o map<\/strong>, e outros, tamb\u00e9m \u00e9 um Functor<\/strong> logo n\u00e3o modificar\u00e1 nosso array<\/strong> original. <\/p>\n\n\n\n Quando utilizar? <\/p>\n\n\n\n Quando voc\u00ea quer que o resultado seja um \u201carray\u201d com o tamanho menor (ou n\u00e3o) que o \u201carray\u201d inicial<\/strong>, por\u00e9m \u201dapenas\u201d com valores que passaram por um teste l\u00f3gico.<\/strong><\/p>\n\n\n\nFunciona da seguinte maneira: <\/h4>\n\n\n\nrecebe 1 elemento do array<\/strong>.<\/li>executa a fun\u00e7\u00e3o passada. \u0096caso o retorno seja true<\/strong>.adiciona esse elemento no array<\/strong> de resposta.<\/li><\/ul><\/li> \u0096caso o retorno seja false.<\/strong> N\u00c3O<\/strong> adiciona esse elemento no array<\/strong> de resposta.<\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\nAplica\u00e7\u00e3o B\u00e1sica<\/strong><\/p>\n\n\n\n const array = ['values'];\n\nconst result = array.filter(\"\/\/...Aqui \u00e9 aplicado o C\u00f3digo de execu\u00e7\u00e3o que retorna o resultado que for 'true' para o result.\");\n\nconsole.log(result);<\/code><\/pre>\n\n\n\nExemplos Simples utilizando Arrow Functions<\/strong>:<\/p>\n\n\n\n const list = [1, 5, 9, 8, 2, 10, 3, 4];\n\nlet greaterThanFive = list.filter(number => {return number > 5});\n\nconsole.log(greaterThanFive) \/\/[9, 8, 10]<\/code><\/pre>\n\n\n\nNo exemplo acima \u00e9 aplicado o Arrow functions<\/a><\/strong><\/em> dentro do escopo do filter<\/strong> retornando apenas os n\u00fameros maiores que 5, criando um novo array <\/strong>na vari\u00e1vel greaterThanFive<\/strong>.<\/li><\/ul>\n\n\n\nExemplos Simples utilizando Arrow Functions e If tern\u00e1rio:<\/strong><\/p>\n\n\n\nconst list = [1, 5, 9, 8, 2, 10, 3, 4];\n\nlet oddNumbers = list.filter(number => (number % 2 == 1 ? true : false));\n\nconsole.log(oddNumbers) \/\/[1, 5, 9, 3]<\/code><\/pre>\n\n\n\nNeste exemplo junto com o Arrow functions, tamb\u00e9m esta aplicado o if tern\u00e1rio<\/a> <\/strong><\/em>dentro do mesmo escopo do filter<\/strong> retornando apenas os n\u00fameros \u00edmpares, criando um novo array <\/strong>na vari\u00e1vel oddNumbers.<\/strong><\/li><\/ul>\n\n\n\nNOTA: <\/p> filter<\/code> n\u00e3o altera o array<\/code> a partir da qual foi invocado. <\/p> Refer\u00eancia: https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filtro<\/a> <\/cite><\/blockquote>\n\n\n\n Reduce<\/h3>\n\n\n\nM\u00e9todo que executa uma fun\u00e7\u00e3o de redutor<\/strong> (que voc\u00ea fornece) em cada elemento da matriz, resultando em um \u00fanico valor de sa\u00edda. <\/p>\n\n\n\n Quando utilizar?<\/p>\n\n\n\n Quando voc\u00ea quer que o resultado seja um \u201carray\u201d (ou qualquer outro tipo existente) <\/strong>e seu(s) o(s) valor(es) pode(m) ser de qualquer tipo<\/strong>. Ainda pode-se falar que quando precisa iterar o mesmo array<\/strong> usando filter<\/strong> e map<\/strong>, ao inv\u00e9s de faz\u00ea-lo duas vezes, o reduce<\/strong>, mesmo sendo mais complexo, \u00e9 uma op\u00e7\u00e3o para isso. Dentro dele d\u00e1 para em uma intera\u00e7\u00e3o fazer o que \u00e9 preciso de um filter<\/strong> e um map<\/strong>. <\/p>\n\n\n\nFunciona da seguinte maneira:<\/h4>\n\n\n\nA fun\u00e7\u00e3o de redutor<\/strong> usa quatro argumentos: \u0096Acumulador (acc)<\/li> \u0096Valor Atual (cur)<\/li> \u0096\u00cdndice atual (idx) <\/li> \u0096Matriz de Origem (src) <\/li><\/ul><\/li>O valor retornado da sua fun\u00e7\u00e3o redutor<\/strong> \u00e9 atribu\u00eddo ao acumulador<\/strong>, cujo valor \u00e9 lembrado em cada itera\u00e7\u00e3o<\/strong> em todo o array<\/strong> e, finalmente, torna-se o valor resultante final \u00fanico.<\/li><\/ul>\n\n\n\nAplica\u00e7\u00e3o B\u00e1sica<\/strong><\/p>\n\n\n\nconst array = ['values'];\n\nconst result = array.reduce(function(accumulator, currentValue){\n\t\/\/... Aqui \u00e9 aplicado o C\u00f3digo de execu\u00e7\u00e3o que retorna o resultado para o result.\n});\n\nconsole.log(result);<\/code><\/pre>\n\n\n\n Exemplos Simples utilizando Arrow Functions<\/strong>:<\/p>\n\n\n\nconst list = [1, 2, 3, 4];\n\nconst totalSum = list.reduce((accumulator, currentValue) => {\n\treturn accumulator + currentValue;\n});\n\nconsole.log(totalSum); \/\/10<\/code><\/pre>\n\n\n\nNo exemplo acima o reduce<\/strong> executa a soma de todas as intera\u00e7\u00f5es, retornando o valor a soma total na vari\u00e1vel totalSum<\/strong>, explicado com mais detalhes no pr\u00f3ximo exemplo.<\/li><\/ul>\n\n\n\nconst list = [1, 2, 3, 4];\n\nconst reducer = (accumulator, currentValue) => accumulator + currentValue;\n\nconsole.log(list.reduce(reducer)); \/\/10\n\nconsole.log(list.reduce(reducer, 5)); \/\/15<\/code><\/pre>\n\n\n\nNo exemplo acima foi criada a fun\u00e7\u00e3o reducer<\/strong>, com os par\u00e2metros accumulator<\/strong> & currentValue<\/strong>, onde temos a aplica\u00e7\u00e3o da fun\u00e7\u00e3o interna do reduce<\/strong>, desta forma trabalhamos de uma forma mais abrangente. 1 – Observamos que no primeiro console, passamos apenas como par\u00e2metro a fun\u00e7\u00e3o reducer,<\/strong> isso porque no m\u00e9todo reduce<\/strong> o seu primeiro par\u00e2metro \u00e9 um acumulador, desta forma a primeira intera\u00e7\u00e3o apenas o acumulador \u00e9 preenchido, ou seja, no reducer<\/strong> o par\u00e2metro (vari\u00e1vel) accumulator<\/strong>, recebe o valor inicial e fica aguardando os demais valores, do segundo em diante, “se existir<\/em>“, os valores s\u00e3o colocados no par\u00e2metro (vari\u00e1vel) currentValue<\/strong>, somando o accumulator<\/strong> com o currentValue<\/strong> , at\u00e9 chegar a ultima intera\u00e7\u00e3o, por fim imprimindo no console o valor final, neste caso “10”<\/em><\/strong>. 2 – No Segundo Console observamos que diferente do primeiro s\u00e3o passados dois par\u00e2metro no m\u00e9todo reduce<\/strong>, como explicado no primeiro console, o m\u00e9todo reduce<\/strong> tem como primeiro par\u00e2metro um acumulador, certo, mais se o primeiro \u00e9 um acumulador, como \u00e9 que ele trabalha passando 2 par\u00e2metro?, Isto se da por conta de sua estrutura original, na verdade, o reduce<\/strong> recebe valores impl\u00edcitos, assim como no primeiro console ele recebe a fun\u00e7\u00e3o reducer<\/strong>, que sua estrutura s\u00e3o dois par\u00e2metro, neste caso ele recebe a mesma fun\u00e7\u00e3o, executa por inteiro este primeiro par\u00e2metro “reducer”<\/em><\/strong>, que o retorno se torna o acumulador e tem como valor corrente o pr\u00f3ximo par\u00e2metro “5”<\/em><\/strong>,<\/em> por fim somando o acumulador com o valor corrente e imprimindo no console o resultado da soma “15”.<\/strong> <\/li><\/ul>\n\n\n\nNOTA:<\/p> Se o valorInicial<\/code> n\u00e3o tiver sido passado como argumento, ent\u00e3o Acumulador<\/code> ser\u00e1 igual ao primeiro valor no array e valorAtual<\/code> ser\u00e1 igual ao segundo. <\/p>Refer\u00eancia: https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/Reduce<\/a> <\/cite><\/blockquote>\n\n\n\n Aten\u00e7\u00e3o:<\/h4>\n\n\nTodos os Tr\u00eas m\u00e9todos, map, filter e reduce<\/strong>, s\u00f3 funciona com array<\/strong>, mais existem particularidades que dever\u00e3o ser “SEMPRE”<\/strong><\/em> levadas em considera\u00e7\u00f5es. 1 – Garanta “SEMPRE”<\/strong><\/em> que ser\u00e1 um array<\/strong> que chamar\u00e1 os m\u00e9todos:<\/p>\n\nSe n\u00e3o for um array<\/strong>, ser\u00e1 executado uma exce\u00e7\u00e3o de erro que por sua vez quebra todo o processo.<\/li>\n<\/ul>\n2 – O Array<\/strong> pode ser Vazio?<\/p>\n\nPara o map <\/strong>& filter<\/strong> se o array<\/strong> tiver vazio, os m\u00e9todos retornar\u00e3o um array vazio.<\/li>\nPara o reduce<\/strong>, se o array <\/strong>tiver vazio, o m\u00e9todo executa uma exce\u00e7\u00e3o do erro, quebrando todo o processo, desta forma \u00e9 de suma import\u00e2ncia que ao ser utilizado o m\u00e9todo reduce<\/strong>, que seja garantido que o array tenha no m\u00ednimo um Valor, ou seja, \u00e9 necess\u00e1rio Sempre <\/b>testar se o array<\/b> origem n\u00e3o esta vazio<\/b>, pois o r<\/strong>educe<\/b> s\u00f3 funciona se o array<\/b> origem <\/b>tiver amenos um valor.<\/li>\n<\/ul>\n\n\n Exemplos Simples para o teste:<\/strong><\/p>\n\n\n\nlet list;\n\/\/ ou\nlet list = [];\n\nconst result = Array.asArray(list) && list.length > 0 \n\t? list.reduce((accumulator, currentValue) => accumulator + currentValue)\n\t: 0\n\t\nconsole.log(result) \/\/0<\/code><\/pre>\n\n\n\nO teste pode ser feito de v\u00e1rias formas, no exemplo acima, foi propositalmente aplicado um “if tern\u00e1rio”<\/strong><\/em> para garantir um valor de retorno, mais podemos apenas criar um “if”<\/strong> padr\u00e3o <\/em>executando (no caso do reduce<\/strong>) se for um array e n\u00e3o estiver vazio, para o map <\/strong>& filter<\/strong> n\u00e3o se faz necess\u00e1rio testar se esta vazio, como explicado acima.<\/li><\/ul>\n\n\n\nExemplos Utilizando emoji:<\/h4>\n\n\n\nfonte: https:\/\/google.com.br\/imghp<\/a><\/figcaption><\/figure>\n\n\n\nExemplos Utilizando frutas:<\/h4>\n\n\n\nfonte: https:\/\/google.com\/imghp<\/a><\/figcaption><\/figure>\n\n\n\nExemplos com a aplica\u00e7\u00e3o dos tr\u00eas m\u00e9todos em conjunto:<\/h4>\n\n\n\nconst products = [{ id: 1, nome: 'prod 1'},\n\t\t\t\t{ id: 1, nome: 'prod 1'},\n\t\t\t\t{ id: 1, nome: 'prod 1'}]\n\t\t\t\t \nconst purchaseRequests = [{ id: 10, idProd: 1, value: 10},\n\t\t\t\t\t\t{ id: 11, idProd: 3, value: 20},\n\t\t\t\t\t\t{ id: 12, idProd: 2, value: 40},\n\t\t\t\t\t\t{ id: 13, idProd: 3, value: 30}]\n\nlet arrayResponse = {}\n\nconst reducer = (accumulator, currentValue) => accumulator = currentValue\n\nconst calculate = (array, value) => {\n\tarray.push(value)\n\t\n\tlet totalValue = array.reduce(reducer)\n\t\n\tlet priceAverage = totalValue \/ array.length\n\t\n\treturn ([`amount : ${array.length}, priceAverage : ${priceAverage}, totalValue : ${totalValue}`])\n}\n\nconst result = () => {\n\ttry{\n\t\tproducts.map(value => {\n\t\t\tlet values = [];\n\t\t\t(purchaseRequests.filter(request => {\n\t\t\t\trequest.idProd === value.id\n\t\t\t\t\t? arrayResponse[request.idProd] = calculate(values,request.value)\n\t\t\t\t\t: 0\t\t\t\t\t\n\t\t\t\t})\n\t\t\t)\n\t\t})\n\t\treturn arrayResponse\n\t}catch(e){\n\t\treturn e\n\t}\n}\n\nconsole.log(result())\n\n\/* { '1': ['amount : 1, priceAverage: 10, totalValue : 10'],\n\t'2': ['amount : 1, priceAverage: 40, totalValue : 40'],\n\t'3': ['amount : 2, priceAverage: 25, totalValue : 50']} *\/<\/code><\/pre>\n\n\n\nPara finalizar deixo o exemplo acima, analise, tire suas pr\u00f3prias conclus\u00f5es e at\u00e9 o pr\u00f3ximo Post!<\/p>\n","protected":false},"excerpt":{"rendered":"Entenda os comportamentos e funcionalidades, de forma Pr\u00e1tica e direta. Map O map \u00e9 um m\u00e9todo que executa um callback para cada valor de um array modificando os mesmos, isso faz com que o map crie um novo array com os novos valores obtidos. Quando utilizar? Quando voc\u00ea quer que o resultado seja um \u201carray\u201d com \u201co mesmo\u201d … Continuar lendo Trabalhando com map, filter e reduce<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":263,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[45,46,40,43,41,48,49,42,47],"class_list":["post-259","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","tag-async","tag-await","tag-filter","tag-json","tag-map","tag-node","tag-nodejs","tag-promise","tag-reduce"],"_links":{"self":[{"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/posts\/259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":18,"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/posts\/259\/revisions"}],"predecessor-version":[{"id":452,"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/posts\/259\/revisions\/452"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/media\/263"}],"wp:attachment":[{"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/categories?post=259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.softmakers.com.br\/index.php\/wp-json\/wp\/v2\/tags?post=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Funciona da seguinte maneira:<\/h4>\n\n\n\nA fun\u00e7\u00e3o de redutor<\/strong> usa quatro argumentos: \u0096Acumulador (acc)<\/li> \u0096Valor Atual (cur)<\/li> \u0096\u00cdndice atual (idx) <\/li>\u0096Matriz de Origem (src) <\/li><\/ul><\/li>