Código Limpo é uma Responsabilidade — ArrayAPI

Bom, estava com uma ideia sobre um série de posts sobre a responsabilidade do desenvolvedor em códigos limpos e bem estruturados. Para quem trabalha com Javascript, já esta ligado que isso em nossa área é mais difícil que governo brasileiro sem desviar dinheiro.

Porem, não custa tentar né? Hoje vamos falar sobre o ArrayAPI e como ele pode ajudar a deixar seu código curto, auto-explicativo e o melhor de tudo : direto.

Eu vou dividir os exemplos em 3 partes : explicação, implementação e como seria no ES6, não que tenha muita diferença! Vocês não são Regina, mas LET’S GO! (pqp que piada horrível!)

MAP

O MAP é um método que gera 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. Exemplo:

var x = [1,2,3].map(function (value) { 
 return value * 2
});
console.log(x) //[2,4,6] 

Em ES6

var x = [1,2,3].map(v => v*2); 
console.log(x) //[2,4,6] 

Filter

Essa já é um pouco mais simples de entender, ela vai criar um teste lógico dentro de um callback, e a partir disso devolver um array com os valores do outro array que passaram no teste! Exemplo:

var x = [1,2,3].filter(function (val) { 
 return val % 2 == 0
});
console.log(x); //[2] 

Em ES6:

var x = [1,2,3].filter(v => v % 2 == 0); 
console.log(x); //[2] 

Reduce / ReduceRight

Reduce é uma função incrível! Esse método realiza um callback! Sua função? Reduzir um array à um único valor! Como faz isso? Aplica um callback para um acumulador a partir de cada valor em um array. O Reduce faz isso da Esquerda > Direita, o ReduceRight faz a mesma coisa porem da Direita > Esquerda. Ja que esse é um pouco mais complicado, vamos dar uma olhada na estrutura alem do exemplo:

array.reduce(function(acumulador, valor , index, array ) {…}

//Em ação!
var x = [1,2,3].reduce(function(a, v, i ,arr) { 
 return a + v;
});
console.log(x) //6 

Em ES6:

var x = [1,2,3].reduce((a, v, i ,arr) => a + v); 
console.log(x) //6 

Every/Some

Esses métodos como alguns outros são esquecido por muitos, porem, podem ser muito úteis! Tanto o every quanto o some são testes de array.

O every age como o fator AND, ou seja, se TODOS os elementos passarem no teste, ele retornara true, porem, basta apenas um não cumprir a regra para restornara um false.

O some age como o fator OR, em outras palavras, se apenas UM elemento cumprir a regra ele retornara true. Em exemplo:

var x = [1,2,3].every(function(v){ 
 return v+v >= 2
})
console.log(x) //true
//VENDO A DIFERENÇA
var y = [1,2,3].every(function(v){ 
 return v*v >= 9
})
console.log(y) //false
var y = [1,2,3].some(function(v){ 
 return v*v >= 9
})
console.log(y) //true 

Em ES6:

var x = [1,2,3].every(v => v+v >= 2) 
console.log(x) //true 

Agora na prática!

Imaginemos que tenho que pegar a média dos maiores de idade que frequentam um clube.

Simulando um retorno de Banco

var pessoas = [ 
 {name : “Guilherme”, age: 21},
 {name : “Mario”, age: 16},
 {name : “Luiza”, age: 17},
 {name : “Carlos”, age: 19},
 {name : “André”, age: 26},
 {name : “Bianca”, age: 18},
 {name : “Maria”, age: 14}
]

Como fariamos isso sem ArrayAPI

var maioresDe18 = []; 
for (var i = 0; i < pessoas.length; i++) { 
 if (pessoas[i].age >= 18) maioresDe18.push(pessoas[i])
}
var mediaIdade = 0; 
for (i = 0; i < maioresDe18.length; i++){ 
 mediaIdade += maioresDe18[i].age 
}
mediaIdade = mediaIdade/maioresDe18.length; 
console.log(mediaIdade) 

Com Array API

var mediaIdade = pessoas.filter(function (p) { 
 return p.age >= 18
}).map(function(p) {
 return p.age
}).reduce(function(a, v, i, arr) {
 return i + 1 == arr.length ? (a + v) / arr.length : a + v
})

Com uma firulas e ES6

var media = (a, v, i, arr) => i + 1 == arr.length ? (a + v) / arr.length : a + v, 
    maioridade = p => p.age >= 18,
    mediaIdade = pessoas
                  .filter(maioridade) //Retorna maiores de 18
                  .map(p => p.age) //Objeto => Int (Idades)
                  .reduce(media); // Faz media
console.log(mediaIdade); //21

Menção Honrosa (.forEach)

As vezes não queremos um retorno! Só queremos um for facilitado! Por mais que não goste, existe o .forEach no ArrayAPI que permite que você emule o famoso for (int x : list) do java e outras linguagens!

[1,2,3].forEach(function(n) {
 console.log(“Estamos vendo o numero: “+n);
})

That’s all folks! Espero que tenham gostado e que isso some na experiência de vocês! Ja faz algum tempo que estou nessa “vibe” e estou adorando os códigos que eu produzo! Para quem se interessar a Mozilla tem uma documentação GIGANTESCA de Javascript, a qual eu uso quase sempre para me guiar!

OBS: Esse é o primeiro de uma série que pretendo fazer, vale lembrar que é possivel gerar código limpo sem a API

OBS2: Um obrigado ao Leo Cavalcante pelas dicas para que melhorasse o texto!

Criticas, sugestões, meu endereço pra me mandar bacon ou chocolate?
Ta na mão : Twitter | Facebook | Linkedin

Abraços!