Javascript con sabor a ES6: Arrays

Pablo Ulloa Castro
Sep 2, 2018 · 6 min read

Para quienes no esten familiarizados con el acrónimo ES6, al googlearlo pueden encontrar qué es un acrónimo de ECMAScript, el cuál tiene muchas definiciones, pero personalmente me quedo con esta.

ECMAScript viene siendo un estándar en el cuál está basado el JavaScript que todos conocemos, pero hasta por ahí nomás. Esto debido a que los navegadores o “browsers” poseen cada uno su propio motor de interpretación de JavaScript, lo cuál lo aleja de ser un estándar. Es por esto que ES6 es un estándar que no necesariamente está siendo soportado por todos los navegadores actuales (lamentablemente para nosotros los desarrolladores).

Debido a esto, es que nos vemos forzados a utilizar traspiladores como Babel, ya sea de forma directa o mediante un intermediario como lo es Webpack, el cuál nos permite generar código apto para su uso en producción de forma sencilla y ligera, pero una vez ya agarrando la costumbre se darán cuenta de que es algo sumamente práctico, hermoso y desconocido.

Parte del set de herramientas y beneficios (muuuchos beneficios) que podemos aprovechar de ES6, es el uso de programación funcional dentro de objetos complejos como son los arreglos.

Sin más preámbulo, comenzaremos con unos cuántos casos y ejemplos de como aplicar programación funcional en arreglos de JavaScript, aprovechando ES6:

forEach

El método forEach de los arreglos en JavaScript nos permite lo siguiente: dado un arreglo A de tamaño n, con elementos de tipo E, operamos una operación P a cada elemento de A en forma consecutiva, sin retornar nada al finalizar el método forEach.

Quizás quede más claro con un ejemplo, imaginemos que tenemos un arreglo ‘arreglo’ con números del 1 al 5, y queremos imprimir cada uno de estos números por consola. Un enfoque sin usar forEach puede ser:

arreglo = [1,2,3,4,5];function forEach(arr, func) {
var i;
for (i = 0; i < arr.length; i++) {
func(arr[i]);
}
}
forEach(arreglo, e => console.log(e));

Usando forEach queda bastante más elegante:

arreglo.forEach(e => console.log(e));

map

El método map nos permite lo siguiente: dado un arreglo A de tamaño n, con elementos de tipo E, operamos una operación P a cada elemento de A en forma consecutiva, transformandolos en elementos de tipo F, retornando un nuevo arreglo de n elementos F.

Es importante destacar la palabra nuevo, ya que el arreglo original no sufre alteraciones. Veamos un ejemplo de esto con nuestro arreglo ‘arreglo’, transformando cada elemento de este arreglo en su valor al cuadrado. Partiremos sin el método map:

arreglo = [1,2,3,4,5];function map(arr, func) {
var i;
var tmp = [];
for (i = 0; i < arr.length; i++) {
tmp.push(func(arr[i]));
}
return tmp;
}
arreglo2 = map(arreglo, e => e*e );

Usando map:

arreglo2 = arreglo.map(e => e*e);

reduce

El método reduce permite lo siguiente: dado un arreglo A de tamaño n, con elementos de tipo E, operamos una operación P a cada elemento de A en forma consecutiva, en conjunto con un acumulador X, retornando un único elemento de tipo E.

En este caso el retorno ya no es un arreglo de elementos A, sino que es un único elemento A. Un ejemplo simple de reduce puede ser el resultado de sumar todos los elementos de nuestro arreglo ‘arreglo’. Sin el método reduce:

arreglo = [1,2,3,4,5];function reduce(arr, func) {
var i;
var acc = 0;
for (i = 0; i < arr.length; i++) {
acc = func(acc,arr[i]);
}
return acc;
}
suma = reduce(arreglo, (e,f) => e+f);

Usando reduce:

suma = arreglo.reduce((e,f) => e+f);

filter

El método filter permite lo siguiente: dado un arreglo A de tamaño n, con elementos de tipo E, operamos una operación booleana P a cada elemento de A en forma consecutiva, retornando un nuevo arreglo de m elementos, que contiene solo aquellos que hayan dado true al ser operados mediante P.

Al igual que el caso anterior, el arreglo original no sufre alteraciones. A continuación veremos un ejemplo de filter con nuestro arreglo ‘arreglo’, filtrando solamente aquellos números que sean pares (módulo 2 sea igual a 0). Sin el método filter:

arreglo = [1,2,3,4,5];function filter(arr, func) {
var i;
var tmp = [];
for (i = 0; i < arr.length; i++) {
if (func(arr[i])) {
tmp.push(arr[i]);
}
}
return tmp;
}
arreglo2 = filter(arreglo, e => e % 2 == 0);

Usando filter:

arreglo2 = arreglo.filter(e => e % 2 == 0);

sort

El método sort permite lo siguiente: dado un arreglo A de tamaño n, con elementos de tipo E, operamos una operación comparativa P a cada par de elementos de A, retornando el mismo arreglo de n elementos E, ordenados según el criterio P.

A diferencia de la tónica habitual, en este caso el arreglo original sí se ve alterado. A continuación veremos un ejemplo de sort con nuestro arreglo ‘arreglo’, ordenando de mayor a menor. Es importante destacar que para el uso del método sort, se utilizan algoritmos de ordenamientos eficientes, tales como mergeSort o quickSort. Por ejemplo Firefox implementa el método haciendo uso de mergeSort:

arreglo = [3,1,4,5,2];function sort(arr, func) {
var sorted = mergeSort(arr, func);
var i;

for (i = 0; i < arr.length; i++) {
arr[i] = sorted[i];
}
return arr;
}
function mergeSort(arr, func) {
if (arr.length == 1) {
return arr;
}
var middle = Math.floor(arr.length / 2);
var left = arr.slice(0, middle);
var right = arr.slice(middle);
return merge(mergeSort(left, func),
mergeSort(right, func),
func);
}
function merge(left, right, func) {
var result = [];
var indexLeft = 0;
var indexRight = 0;

while (indexLeft < left.length && indexRight < right.length) {
if (func(left[indexLeft], right[indexRight]) < 0) {
result.push(left[indexLeft]);
indexLeft++;
} else {
result.push(right[indexRight]);
indexRight++;
}
}

return result
.concat(left.slice(indexLeft))
.concat(right.slice(indexRight));
}
sort(arreglo, (e,f) => f - e);

Usando sort:

arreglo.sort((e,f) => f - e);

Una gran y evidente ventaja, es que al usar el método sort, somos agnósticos del algoritmo de ordenamiento usado por el entorno (en este caso un navegador como Firefox, Chrome o Opera), por lo que solo nos preocupamos por el criterio de ordenamiento, el cuál debe de retornar siempre números enteros. Si queremos un orden ascendente el resultado al operar (e,f) debe dar negativo, en caso contrario el orden será descendente.

every

El método every permite lo siguiente: dado un arreglo A de tamaño n, con elementos de tipo E, operamos una operación booleana P a cada elemento de A, retornando un true si y solo si todo elemento E entrega un true como resultado al aplicar la operación P.

De forma similar al método reduce, este método entrega un único resultado. Es bastante útil si queremos verificar que todos los elementos del arreglo cumplen un determinado criterio. Un ejemplo puede ser verificar si todos los elementos de arreglo son múltiplos de 10:

arreglo = [10,2,3,4,5];function every(arr, func) {
var i;
for (i = 0; i < arr.length; i++) {
if(!func(arr[i])) {
return false;
}
}
return true;
}
multiplos10 = every(arreglo, e => e % 10 == 0);

Usando every:

multiplos10 = arreglo.every(e => e % 10 == 0);

some

El método some permite lo siguiente: dado un arreglo A de tamaño n, con elementos de tipo E, operamos una operación booleana P a cada elemento de A, retornando un true si a lo menos un elemento E entrega true como resultado al aplicar la operación P.

De similar al método every, este método entrega un resultado booleano, pero sin la necesidad de verificar todos los valores, si no que conformandose con el primer resultado positivo. Usando el mismo ejemplo del caso anterior, verificaremos si existe por lo menos un elemento que sea múltiplo de 10:

arreglo = [1,2,30,4,5];function some(arr, func) {
var i;
for (i = 0; i < arr.length; i++) {
if(func(arr[i])) {
return true;
}
}
return false;
}
multiplos10 = some(arreglo, e => e % 10 == 0);

Usando some:

multiplos10 = arreglo.some(e => e % 10 == 0);

Espero que estos ejemplos sirvan para que conozcan más acerca de el uso de ES6 y programación funcional aplicado en JavaScript. Este es el primer artículo de una serie que tengo considerada hacer explicando los múltiples beneficios que tiene el utilizar ES6 y como puede facilitarnos la vida, tanto leyendo como haciendo código.

Hasta la próxima!

Para quienes quieran ver otros artículos de la temática de Javascript con sabor a ES6:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade