¡Codifique de forma inteligente! Sea un desarrollador de JavaScript más rápido, productivo y feliz dominando estas funciones más importantes y recurrentes del lenguaje.
Ya sea en backend o frontend (o incluso en naves espaciales), JavaScript está en todas partes. Además, es un lenguaje bastante flexible (lo que significa que cuenta con patrones de programación funcionales duros, así como con las buenas y viejas clases), y su similitud con otros lenguajes «tipo C» facilita la transición a los desarrolladores procedentes de otros lenguajes.
Si quiere subir de nivel en su juego de JS, le sugiero que aprenda, practique y finalmente domine las siguientes funciones básicas disponibles en el lenguaje. No todas ellas son estrictamente «necesarias» para resolver problemas, pero pueden hacer mucho trabajo pesado por usted en algunos casos, mientras que en otros, éstas pueden reducir la cantidad de código que tiene que escribir.
map()
Sería una herejía escribir un artículo sobre funciones JavaScript importantes y no mencionar map( )
! 😆😆 Junto con filter()
y reduce()
, map()
forma una especie de santísima trinidad. Son funciones que utilizará una y otra vez en su carrera, por lo que merece la pena echarles un vistazo. Abordémoslas una a una, empezando por map( )
.
map(
) se encuentra entre las funciones que más problemas dan a la gente que está aprendiendo JavaScript. ¿Por qué? No porque haya algo inherentemente complejo en ella, sino porque la forma en que trabaja esta función es una idea tomada de lo que se denomina Programación Funcional. Y puesto que no estamos expuestos a la Programación Funcional — nuestras escuelas y la industria están llenas de lenguajes orientados a objetos — su funcionamiento parece extraño o incluso erróneo a nuestros sesgados cerebros.
JavaScript es mucho más funcional que orientado a objetos, aunque sus versiones modernas hacen todo lo posible por ocultar este hecho. Pero eso es toda una lata de gusanos que quizá pueda abrir otro día. 🤣 De acuerdo, entonces, map()
. . .
map()
es una función muy sencilla; se une a un array y nos ayuda a convertir cada elemento en otra cosa, dando como resultado un nuevo array. Cómo convertir exactamente un elemento se proporciona como otra función, que por convención, es anónima.
Eso es todo Puede que cueste un poco acostumbrarse a la sintaxis, pero esencialmente eso es lo que estamos haciendo en una función map ()
. ¿Por qué podríamos querer utilizar map( )
? Depende de lo que intentemos conseguir. Por ejemplo, supongamos que hemos registrado la temperatura de cada día de la última semana y la hemos almacenado como una simple matriz. Sin embargo, ahora nos dicen que los instrumentos no fueron muy precisos y han informado de 1,5 grados menos de temperatura de lo que deberían.
Podemos hacer esta corrección utilizando la función map()
de la siguiente manera
const lecturassemanales = [20, 22, 20,5, 19, 21, 21,5, 23];
const LecturasSemanales corregidas = LecturasSemanales.map(lectura => lectura 1,5);
console.log(lecturasSemanalescorregidas); // da [ 21.5, 23.5, 22, 20.5, 22.5, 23, 24.5 ]
Otro ejemplo, muy práctico, procede del mundo de React, donde crear listas de elementos DOM a partir de matrices es un patrón habitual; así, algo como esto es común:
export default ({ products }) => {
return productos.map(producto => {
return (
<div className="producto" key={producto.id}>
<div className="p-nombre">{producto.nombre}</div>
<div className="p-desc">{producto.descripción}</div>
</div>
);
});
};
Aquí tenemos un componente React funcional que recibe una lista de productos como props. A partir de esta lista (array), construye entonces una lista de «divs» HTML, convirtiendo esencialmente cada objeto producto en HTML. El objeto productos
original permanece intacto.
Puede argumentar que map()
no es más que un bucle for
glorificado y tendría toda la razón. Pero fíjese en que en cuanto hace ese argumento, es su mente entrenada en la Orientación a Objetos la que está hablando, mientras que estas funciones y sus fundamentos provienen de la Programación Funcional, donde la uniformidad, la compacidad y la elegancia son muy veneradas 🙂
filtrar()
filter
() es una función muy útil que se encontrará aplicando una y otra vez en muchas situaciones. Como su nombre indica, esta función filtra una matriz basándose en las reglas/lógica que usted le proporcione y devuelve una nueva matriz que contiene los elementos que satisfacen esas reglas.
Volvamos a utilizar nuestro ejemplo del tiempo. Supongamos que tenemos una matriz que contiene las temperaturas máximas de cada día de la semana pasada; ahora, queremos averiguar cuántos de esos días fueron más fríos. Sí, «más frío» es un término subjetivo, así que digamos que buscamos los días en los que la temperatura fue inferior a 20. Podemos hacerlo utilizando la función filter(
) de la siguiente manera
const lecturassemanales = [20, 22, 20,5, 19, 21, 21,5, 23];
const colderDays = weeklyReadings.filter(dayTemperature => {
return temperaturaDía < 20;
});
console.log("El total de días más fríos de la semana fue: " colderDays.length); // 1
Tenga en cuenta que la función anónima que pasamos a filter (
) debe devolver un valor booleano: verdadero
o falso
. Así es como filter( )
sabrá si debe o no incluir ese elemento en la matriz filtrada. Usted es libre de escribir cualquier cantidad de lógica compleja dentro de esta función anónima; puede hacer llamadas a la API y leer entradas del usuario, y así sucesivamente, siempre y cuando se asegure de que al final, está devolviendo un valor booleano.
Atención: Esta es una nota al margen que me siento obligado a proporcionar basándome en mi experiencia como desarrollador de JavaScript. Ya sea por dejadez o por fundamentos erróneos, muchos programadores crean errores sutiles en sus programas cuando utilizan filter()
. Reescribamos el código anterior para que contenga el error:
const lecturassemanales = [20, 22, 20,5, 19, 21, 21,5, 23];
const colderDays = weeklyReadings.filter(dayTemperature => {
return temperaturaDía < 20;
});
if(colderDays) {
console.log("Sí, hubo días más fríos la semana pasada");
} else {
console.log("No, no hubo días más fríos");
}
¿Ha notado algo? ¡Buen trabajo si lo hizo! La condición if
hacia el final comprueba colderDays
, ¡que en realidad es un array! Se sorprenderá de la cantidad de veces que la gente comete este error mientras corre para cumplir los plazos o codifica con poco ánimo (por la razón que sea). El problema con esta condición es que JavaScript es un lenguaje extraño e inconsistente en muchos aspectos, y la «veracidad» de las cosas es uno de ellos. Mientras que [] == true
devuelve false, haciéndole pensar que el código anterior no está roto, la realidad es que dentro de una condición if
, ¡ []
evalúa a true! En otras palabras, el código que escribimos nunca dirá que no hubo días más fríos la semana pasada.
La solución es muy sencilla, como se indica en el código anterior al anterior. Comprobamos colderDays.
length, que está garantizado que nos dará un número entero (cero o superior) y, por tanto, funcionará de forma coherente en las comparaciones lógicas. Tenga en cuenta que filter(
) siempre, siempre, siempre devolverá un array, vacío o no vacío, por lo que podemos confiar en ello y escribir nuestras comparaciones lógicas con confianza.
Ha sido un rodeo más largo de lo que planeaba, pero fallos como éste merecen ser destacados en diez mil palabras, todo mayúsculas si es necesario. Espero que no se vea afectado por esto y se ahorre cientos de horas de esfuerzo de depuración 🙂
reducir()
De todas las funciones de este artículo, así como de la biblioteca estándar de JavaScript, reduce
() se encuentra entre las candidatas a las coronas de «confusa y rara». Aunque esta función es muy importante y da lugar a un código elegante en muchas situaciones, la mayoría de los desarrolladores de JavaScript la evitan y prefieren escribir en su lugar un código más ampuloso.
La razón es que — ¡y voy a ser sincero aquí! — reduce(
) es difícil de entender, tanto en el sentido del concepto como en el de la ejecución. Cuando lee su descripción, la relee varias veces y aún así, duda de si la leyó mal; y cuando la ve en acción e intenta visualizar cómo funciona, ¡su cerebro se retuerce en mil nudos! 🤭
No se asuste. La función reduce(
) no se acerca en complejidad e intimidación a, digamos, los árboles B y sus algoritmos. Es sólo que este tipo de lógica rara vez se encuentra durante el trabajo diario del programador medio.
Así que, después de haberle dado un susto de muerte e inmediatamente después decirle que no se preocupe, me gustaría mostrarle por fin qué es esta función y por qué exactamente podríamos necesitarla.
Como su nombre indica, reduce()
se utiliza para, bueno, reducir algo. Lo que reduce es un array y a lo que reduce el array dado es a un único valor (número, cadena, función, objeto, lo que sea). He aquí una forma más sencilla de decirlo — reduce
() transforma una matriz en un único valor. Tenga en cuenta que el valor devuelto por reduce( )
no es una matriz, como ocurre con map()
y filter()
. Haber entendido esto ya es la mitad de la batalla 🙂
Ahora, es un poco obvio que si vamos a transformar (reducir) una matriz, tenemos que proporcionar la lógica necesaria; y basado en su experiencia como un JS dev, lo más probable es que ya haya adivinado que lo hacemos utilizando una función. Esta función es lo que llamamos la función reductora, que constituye el primer argumento de reduce()
. El segundo argumento es un valor inicial, como un número, una cadena, etc. (dentro de un rato explicaré qué demonios es este «valor inicial»).
Basándonos en lo que hemos entendido hasta ahora, podemos decir que una llamada a reduce
() tiene este aspecto: array.reduce(reducerFunction, startingValue)
. Ahora abordemos el meollo de todo el asunto: la función reductora. Como ya se ha establecido, la función reductora es la que indica a reduce()
cómo convertir la matriz en un único valor. Toma dos argumentos: una variable para actuar como acumulador (no se preocupe, también explicaré esta parte), y una variable para almacenar el valor actual.
Lo sé, lo sé . . . eso fue un montón de terminología para una sola función que ni siquiera es obligatoria en JavaScript. 😝😝 Y esta es la razón por la que la gente huye de reduce()
. Pero si la aprende paso a paso, no sólo la entenderá sino que la apreciará a medida que se convierta en un mejor desarrollador.
Bien, volvamos al tema que nos ocupa. El «valor inicial» que se pasa a reduce()
es. . . bueno, el valor inicial para el cálculo que desea utilizar. Por ejemplo, si va a hacer la multiplicación en la función reducer, un valor inicial de 1
tiene sentido; para la suma, podría empezar con 0
, y así sucesivamente.
Ahora echemos un vistazo a la firma de la función reductora. Una función reductora que se pasa a reduce()
tiene la siguiente forma: reducerFunction(accumulator, currentValue)
. «Acumulador» es sólo un nombre elegante para la variable que recoge y mantiene el resultado del cálculo; es exactamente como utilizar una variable llamada total
para sumar todos los elementos de una matriz utilizando algo como total = arr<x>[i]</x>
. Así es exactamente como se aplica la función reducer en reduce()
: el acumulador se establece inicialmente en el valor inicial que usted proporciona, y luego se visitan uno a uno los elementos de la matriz, se realiza el cálculo y el resultado se almacena en el acumulador, y así sucesivamente….
Entonces, ¿qué es este «valor actual» en una función reductora? Es la misma idea que se imaginaría mentalmente si le pidiera que recorriera un array: tomaría una variable para empezar en el índice cero y avanzaría paso a paso. Mientras hace esto, si le pido que se detenga de repente, se encontraría en uno de los elementos de la matriz, ¿verdad? Esto es lo que entendemos por valor actual: es el valor de la variable utilizada para representar el elemento del array que se está considerando en ese momento (piense en hacer un bucle sobre un array, si le sirve de ayuda).
Dicho todo esto, es hora de ver un ejemplo sencillo y ver cómo se conjuga toda esta jerga en una llamada real a reduce()
. Supongamos que tenemos una matriz que contiene los n
primeros números naturales(1, 2, 3 . . . n
) y estamos interesados en hallar el factorial de n
. Sabemos que para hallar n¡
simplemente necesitamos multiplicarlo todo, lo que nos lleva a esta implementación:
const números = [1, 2, 3, 4, 5];
const factorial = numbers.reduce((acc, item) => acc * item, 1);
console.log(factorial); // 120
En estas meras tres líneas de código ocurren muchas cosas, así que vamos a desgranarlas una a una en el contexto de la (larguísima) discusión que hemos mantenido hasta ahora. Como es obvio, números
es la matriz que contiene todos los números que queremos multiplicar. A continuación, eche un vistazo a la llamada numbers.reduce()
, que dice que el valor inicial de acc
debe ser 1
(porque no influye ni destruye ninguna multiplicación). A continuación, compruebe el cuerpo de la función reducer, `(acc, item) => acc * item
, que simplemente dice que el valor de retorno de cada iteración sobre la matriz debe ser ese item multiplicado por lo que ya haya en el acumulador. La iteración y el almacenamiento real de la multiplicación explícitamente en el acumulador es lo que está sucediendo entre bastidores, y es una de las mayores razones por las que reduce()
es un escollo para los desarrolladores de JavaScript.
¿Por qué utilizar reduce( )
?
Es una gran pregunta y, para ser sincero, no tengo una respuesta segura. Todo lo que hace reduce( )
puede hacerse mediante bucles, forEach()
, etc. Sin embargo, esas técnicas dan lugar a mucho más código, lo que lo hace difícil de leer, especialmente si tiene prisa. Luego está la preocupación por la inmutabilidad: con reduce( )
y funciones similares, puede estar seguro de que sus datos originales no han mutado; esto en sí mismo elimina clases enteras de errores, especialmente en aplicaciones distribuidas.
Por último, reduce( )
es mucho más flexible, en el sentido de que el acumulador puede ser un objeto, una matriz o incluso una función si es necesario; lo mismo ocurre con el valor inicial y otras partes de la llamada a la función: casi cualquier cosa puede entrar y casi cualquier cosa puede salir, por lo que existe una flexibilidad extrema a la hora de diseñar código reutilizable.
Si todavía no está convencido, tampoco pasa nada; la propia comunidad de JavaScript está muy dividida sobre la «compacidad», «elegancia» y «potencia» de reduce( )
, así que no pasa nada si no la utiliza 🙂 Pero asegúrese de ver algunos ejemplos claros antes de decidirse a utilizar reduce()
.
algunos()
Supongamos que tiene una matriz de objetos, en la que cada objeto representa a una persona. Quiere saber si en la matriz hay personas mayores de 35 años. Tenga en cuenta que no es necesario contar cuántas personas de este tipo hay, y mucho menos recuperar una lista de ellas. Lo que decimos aquí es el equivalente a «uno o más» o «al menos uno».
¿Cómo se hace esto?
Sí, podría crear una variable bandera y hacer un bucle sobre la matriz para resolver este problema de la siguiente manera
const personas = [
{
nombre: 'Persona 1
edad: 32
},
{
nombre: 'Persona 2',
edad: 40
},
];
let foundOver35 = false
for (let i = 0; i < personas.longitud; i ) {
if(personas<x>[i]</x>.edad > 35) {
foundOver35 = true
break;
}
}
if(foundOver35) {
console.log("¡Sí, hay unas cuantas personas aquí!")
}
¿El problema? El código es demasiado parecido a C o Java, en mi opinión. «Verborreico» es otra palabra que me viene a la mente. JS experimentado podría estar pensando en «feo», «horrible», etc. 😝 Y con razón, diría yo. Una forma de mejorar este trozo de código es hacer uso de algo como map()
, pero incluso así la solución es un poco tosca.
Resulta que tenemos una función bastante ordenada llamada some
() ya disponible en el núcleo del lenguaje. Esta función trabaja con matrices y acepta una función de «filtrado» personalizada, devolviendo un valor booleano de verdadero
o falso
. Esencialmente, hace lo que hemos estado intentando hacer durante los últimos minutos, sólo que de forma muy sucinta y elegante. He aquí cómo podemos utilizarla:
const personas = [
{
nombre: 'Persona 1',
edad: 32
},
{
nombre: 'Persona 2',
edad: 40
},
];
if(personas.some(persona => {
return persona.edad > 35
})) {
console.log("¡He encontrado algunas personas!")
}
La misma entrada, el mismo resultado que antes; ¡pero fíjese en la enorme reducción de código! Observe también cómo se reduce drásticamente la carga cognitiva, ¡porque ya no necesitamos analizar el código línea por línea como si fuéramos nosotros mismos el intérprete! El código ahora casi se lee como lenguaje natural.
cada()
Al igual que some()
, tenemos otra función útil llamada every()
. Como ya habrá adivinado, ésta también devuelve un valor booleano en función de si todos los elementos de la matriz superan la prueba dada. Por supuesto, la prueba a pasar se suministra como una función anónima la mayoría de las veces. Le ahorraré el dolor de lo que una versión ingenua del código podría parecer, así que aquí está cómo se utiliza every()
:
const entradas = [
{
id: 1
},
{
id: 2
},
{
id: 3
},
];
if(entradas.cada(entrada => {
return Number.isInteger(entrada.id) && entrada.id > 0;
})) {
console.log("Todas las entradas tienen un id válido")
}
Como es obvio, el código comprueba si todos los objetos de la matriz tienen una propiedad id
válida. La definición de «válido» depende del contexto del problema, pero como puede ver, para este código he considerado enteros no negativos. Una vez más, vemos lo sencillo y elegante que resulta leer el código, que es el único objetivo de esta función (y de otras similares).
incluye()
¿Cómo se comprueba la existencia de subcadenas y elementos de matrices? Bueno, si es como yo, rápidamente echa mano de indexOf()
y luego busca en la documentación para conocer sus posibles valores de retorno. Es un inconveniente considerable, y los valores de retorno son difíciles de recordar (rápido — ¿qué significa que un proceso devuelva 2
al sistema operativo?)
Pero existe una buena alternativa de la que podemos hacer uso: includes()
. El uso es tan sencillo como el nombre, y el código resultante es extremadamente enternecedor. Tenga en cuenta que la coincidencia que realiza includes
() distingue entre mayúsculas y minúsculas, pero supongo que eso es lo que todos intuimos de todos modos. Y ahora, ¡hora de algo de código!
const números = [1, 2, 3, 4, 5];
console.log(numbers.includes(4));
const nombre = "Ankush";
console.log(nombre.incluye('ank')); // falso, porque la primera letra está en versalitas
console.log(nombre.incluye('Ank')); // verdadero, como se esperaba
Sin embargo, no espere demasiado de este humilde método:
const usuario = {a: 10, b: 20};
console.log(user.includes('a')); // explota, ya que los objetos no tienen un método "includes
No puede buscar dentro de los objetos, ya que simplemente no está definido para objetos. Pero bueno, sabemos que funciona en matrices, así que quizás podamos hacer algún truco aquí . . . 🤔.
const personas = [{nombre: 'Phil'}, {nombre: 'Jane'}];
persons.includes({nombre: 'Phil'});
¿Qué ocurre cuando ejecuta este código? No explota, pero la salida también es decepcionante: false
. 😫😫 En realidad, esto tiene que ver con los objetos, los punteros y la forma en que JavaScript ve y gestiona la memoria, que es un mundo en sí mismo. Si desea profundizar más, siéntase libre de dar el paso (tal vez empezar aquí), pero me detendré aquí.
Podemos hacer que el código anterior se comporte si lo reescribimos como sigue, pero en este punto, se convierte más o menos en una broma, en mi opinión:
const phil = {nombre: 'Phil'};
const personas = [phil, {nombre: 'Jane'}];
persons.includes(phil); // true
Aun así, demuestra que podemos hacer que includes(
) funcione con objetos, así que supongo que no es un desastre total. 😄
slice()
Supongamos que tenemos una cadena, y le pido que me devuelva una parte de ella que empiece por «r» y termine por «z» (los caracteres reales no son importantes). ¿Cómo lo abordaría? Quizá crearía una nueva cadena y la utilizaría para almacenar todos los caracteres necesarios y devolverlos. O, si es como la mayoría de los programadores, me daría a cambio dos índices de matriz: uno indicaría el inicio de la subcadena y el otro marcaría el final.
Estos dos enfoques están bien, pero existe un concepto llamado troceado que ofrece una solución limpia en estas situaciones. Afortunadamente, no hay que seguir ninguna teoría abstrusa; trocear significa exactamente lo que parece: crear una cadena/matriz más pequeña a partir de la dada, de forma parecida a como creamos rodajas de fruta. Veamos a qué me refiero, con la ayuda de un sencillo ejemplo:
const titular = "Y en el especial de esta noche, ¡el invitado que todos estábamos esperando!";
const startIndex = headline.indexOf('invitado');
const endIndex = headline.indexOf('esperando');
const nuevoTitular = headline.slice(startIndex, endIndex);
console.log(nuevoTitular); // invitado hemos sido todos
Cuando hacemos slice
(), proporcionamos dos índices a JavaScript: aquél en el que queremos que comience el troceado y aquél en el que queremos que se detenga. La pega de slice( )
es que el índice final no se incluye en el resultado final, por eso vemos que falta la palabra «esperando» en el nuevo titular del código anterior.
Conceptos como el rebanado son más prominentes en otros lenguajes, especialmente en Python. Si pregunta a esos desarrolladores, le dirán que no pueden imaginarse la vida sin esta funcionalidad, y con razón cuando el lenguaje proporciona una sintaxis muy ordenada para el troceado.
El rebanado es ordenado y extremadamente conveniente, y no hay razón para no usarlo. Tampoco es azúcar sintáctico plagado de una penalización de rendimiento, ya que crea copias poco profundas de la matriz/cadena original. Para los desarrolladores de JavaScript, ¡recomiendo encarecidamente familiarizarse con slice()
y añadirla a su arsenal!
empalme()
El método splice (
) suena como un primo de slice()
, y en cierto modo, podemos argumentar que lo es. Ambos crean nuevas matrices/cadenas a partir de las originales, con una pequeña pero importante diferencia: splice
() elimina, cambia o añade elementos, pero modifica la matriz original. Esta «destrucción» del array original puede crear enormes problemas si no se tiene cuidado o no se entienden las copias profundas y las referencias. Me pregunto qué impedía a los desarrolladores utilizar el mismo enfoque que para slice()
y dejar la matriz original intacta, pero supongo que podemos ser más indulgentes con un lenguaje creado en apenas diez días.
A pesar de mis quejas, veamos cómo funciona splice( )
. Mostraré un ejemplo en el que eliminamos unos cuantos elementos de un array, ya que es el uso más común que encontrará para este método. También me abstendré de proporcionar ejemplos de adición e inserción porque éstos se pueden buscar fácilmente y también son sencillos.
const items = ['huevos', 'leche', 'queso', 'pan', 'mantequilla'];
items.splice(2, 1);
console.log(items); // [ 'huevos', 'leche', 'pan', 'mantequilla' ]
La llamada a splice()
anterior dice: comience en el índice 2
(el tercer lugar, es decir) de la matriz, y elimine un elemento. En la matriz dada, ‘queso’ es el tercer elemento, por lo que se elimina de la matriz y la matriz de elementos se acorta, como era de esperar. Por cierto, los elementos eliminados son devueltos por splice(
) en forma de matriz, por lo que, si hubiéramos querido, podríamos haber capturado ‘queso’ en una variable.
En mi experiencia, indexOf()
y splice
() tienen una gran sinergia: encontramos el índice de un elemento y luego lo eliminamos de la matriz dada. Sin embargo, tenga en cuenta que no siempre es el método más eficiente, y a menudo utilizar un objeto (el equivalente a un mapa hash) de claves es mucho más rápido.
desplazar()
shift
() es una especie de método de conveniencia y se utiliza para eliminar el primer elemento de una matriz. Tenga en cuenta que se puede hacer lo mismo con splice()
, pero shift( )
es un poco más fácil de recordar e intuitivo cuando lo único que necesita es cortar el primer elemento.
const items = ['huevos', 'leche', 'queso', 'pan', 'mantequilla'];
items.shift()
console.log(items); // [ 'leche', 'queso', 'pan', 'mantequilla' ]
unshift()
Al igual que shift
() elimina el primer elemento de una matriz, unshift
() añade un nuevo elemento al principio de la matriz. Su uso es igual de sencillo y compacto:
const items = ['huevos', 'leche'];
items.unshift('pan')
console.log(items); // [ 'pan', 'huevos', 'leche' ]
Dicho esto, no puedo evitar advertir a los nuevos en el juego: a diferencia de los populares métodos push()
y pop(
), shift()
y unshift (
) son extremadamente ineficientes (debido a la forma en que funcionan los algoritmos subyacentes). Así que, si está operando con matrices grandes (digamos, 2000 elementos), demasiadas de estas llamadas a funciones pueden paralizar su aplicación.
llenar()
A veces necesita cambiar varios elementos por un único valor o incluso «reiniciar» toda la matriz, por así decirlo. En esas situaciones, fill( )
le ahorra bucles y errores de paso. Puede utilizarse para sustituir parte o la totalidad de la matriz por el valor dado. Veamos un par de ejemplos:
const alturas = [1, 2, 4, 5, 6, 7, 1, 1];
alturas.rellenar(0);
console.log(alturas); // [0, 0, 0, 0, 0, 0, 0, 0]
const alturas2 = [1, 2, 4, 5, 6, 7, 1, 1];
alturas2.fill(0, 4);
console.log(alturas2); // [1, 2, 4, 5, 0, 0, 0, 0]
Otras funciones dignas de mención
Aunque la lista anterior es la que la mayoría de los desarrolladores de JavaScript acaban encontrando y utilizando en sus carreras, no es en absoluto completa. Hay tantas otras funciones (métodos) menores pero útiles en JavaScript que no será posible abarcarlas todas en un solo artículo. Dicho esto, algunas que me vienen a la mente son las siguientes:
reverse()
ordenar()
entradas()
rellenar()
encontrar()
plano()
Le animo a que al menos las busque para que tenga alguna idea de que existen comodidades como éstas.
Conclusión
JavaScript es un lenguaje grande, a pesar del reducido número de conceptos básicos que hay que aprender. Las numerosas funciones (métodos) de que disponemos constituyen la mayor parte de este gran tamaño. Sin embargo, dado que JavaScript es un lenguaje secundario para la mayoría de los desarrolladores, no profundizamos lo suficiente, perdiéndonos muchas de las bellas y útiles funciones que ofrece. En realidad, lo mismo ocurre con los conceptos de programación funcional, ¡pero ese es un tema para otro día! 😅
Siempre que pueda, dedique algún tiempo a explorar el núcleo del lenguaje (y si es posible, las famosas bibliotecas de utilidades como Lodash). Incluso unos pocos minutos dedicados a hacer este esfuerzo resultarán en enormes ganancias de productividad y un código mucho más limpio y compacto.