Métodos de JavaScript y más. Parte 9 del curso de JavaScript de Principiante a Avanzado en 10 publicaciones de blog.

Esta es la parte 9 de la serie de publicaciones del blog sobre JavaScript que te llevará de principiante a avanzado. Esta vez exploraremos los siguientes temas: métodos de JavaScript, valores predeterminados de los parámetros, el objeto Date en JavaScript y la función de flecha. Al final de esta serie, conocerás todos los conceptos básicos que necesitas saber para comenzar a programar en JavaScript. Si no has leído la publicación anterior del blog sobre objetos de JavaScript, puedes hacerlo aquí. Sin más preámbulos, comencemos con el noveno tutorial.

Métodos de JavaScript y más – tabla de contenido:

1. Valores predeterminados de los parámetros
2. El objeto Date en JavaScript
3. Método Map()
4. Método Filter()
5. Función de flecha

Hasta ahora hemos visto muchos conceptos y temas en JavaScript, pero aún hay algunos comúnmente utilizados que no hemos descubierto. En este tutorial, veremos de qué se trata todo esto. El primero son los valores predeterminados de los parámetros en JavaScript.

Valores predeterminados de los parámetros

Las funciones se utilizan extremadamente comúnmente en programación, y cuando algo se usa tan a menudo, no solo hay frameworks como React que aprovechan las funciones de JavaScript, sino que incluso se han desarrollado más optimizaciones para obtener aún más de las funciones de JavaScript. Una de las principales características que tenemos en las funciones se llama valores predeterminados de los parámetros. Los parámetros predeterminados nos permiten escribir códigos más seguros que pueden hacer suposiciones seguras sobre la entrada del usuario. Esto también beneficia al usuario al proporcionarles una configuración predeterminada que puede facilitar la elección entre sus opciones. Veamos algunos ejemplos de esto.

// supongamos que estás desarrollando un sitio web para una cafetería
// y la mayoría de las personas quieren pedir un americano de tamaño mediano
// sabiendo esto, quieres facilitar a las personas
// pedir su café con menos complicaciones
function orderCoffee(typeOfCoffee="americano", sizeOfCoffee="medium", numberOfCoffee=1){
    return (numberOfCoffee + " " + sizeOfCoffee + " tamaño " + typeOfCoffee + " se está preparando. ");
}
console.log("Pedido predeterminado:");
console.log(orderCoffee());
// de esta manera, cuando un cliente promedio pide en línea, 
// será mucho más fácil para ellos pedir su café diario
// tanto que podrán pedirlo con un solo botón
// alternativamente, las personas también pueden personalizar su café
// cambiando las entradas
console.log("Pedido personalizado:");
console.log(orderCoffee("latte", "large", 2));
console.log("Otro pedido personalizado:");
console.log(orderCoffee("macchiato", "small", 1));
// también es posible cambiar solo parte de las entradas
// y aprovechar los parámetros predeterminados 
// para el resto de los campos de entrada
console.log("Pedido parcialmente personalizado:");
console.log(orderCoffee("iced coffee"));

Ejecutar el código anterior nos da la siguiente salida:

El objeto Date en JavaScript

El objeto Date en JavaScript se utiliza bastante comúnmente, especialmente en el desarrollo web. Podemos usar el objeto Date para realizar funciones sensibles al tiempo, como cambiar la configuración de visualización a modo oscuro, modo claro o cualquier otro modo que el usuario pueda preferir. También podemos usar la información de la fecha según sea necesario dentro del proyecto en el que estamos trabajando. Aquí hay algunos ejemplos del objeto Date en acción:

// el primer paso es crear una instancia del objeto de fecha
// podemos hacer esto escribiendo lo siguiente y 
// asignándolo a una variable o constante de nuestra elección
let today = new Date();
console.log("Estamos en el año: " + today.getFullYear());
console.log("También podemos obtener el mes en número:");
console.log(today.getMonth());
console.log("También podemos obtener la hora del día así:");
console.log(today.getHours());
console.log("También podemos obtener los minutos exactos junto con los segundos");
console.log(today.getMinutes());
console.log(today.getSeconds());
// una vez que tenemos estos números, podemos usarlos como queramos
// si queremos, podemos mostrarlos o tomar decisiones basadas en ellos.
// si queremos mostrar el mes con un nombre 
// en lugar de un número, también podemos lograrlo
// con lo siguiente
const months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
console.log("Estamos en el mes de " + months[today.getMonth()]);
// lo que acabamos de hacer fue crear un arreglo para almacenar los nombres de los meses
// y luego elegir el mes correcto usando un valor de índice
// si quisiéramos activar el modo oscuro después de las 8 p.m.,
// podríamos hacerlo con el siguiente código
// una de las primeras cosas que debemos recordar es que
// las horas se dan en formato de 24 horas
// eso significa que las 8 p.m. significará 20 como horas
// también podemos usar una forma abreviada 
// y combinar la creación del nuevo objeto de fecha
// con el método get hours
let timeOfDay = new Date().getHours();
if (timeOfDay >= 20) {
    console.log("Activando el modo oscuro...");
} else {
    console.log("No activar el modo oscuro");
}
// dado que la hora actual es después de las 8 p.m.,
// en este caso esperamos activar el modo oscuro.
// que también es el resultado que obtenemos como podemos ver en
// la salida de la consola.

Ejecutar el código anterior nos dará los siguientes registros en la consola:

Método Map()

El método map es un método altamente útil que puede ahorrarte muchas líneas de código, y dependiendo de cómo lo uses, puede hacer que tu código sea mucho más limpio. Esencialmente reemplaza el uso de un bucle for cuando lo usas para recorrer un arreglo. Aquí hay algunos ejemplos del método map().

// vamos a crear un arreglo que usaremos para mapear
let someNumbers = [1, 2, 3, 4, 5];
// también vamos a crear las funciones que 
// proporcionaremos al método map
function doubleNums(num1){
    return num1 * 2;
}
function squareNums(num1){
    return num1 * num1;
}
function add100(num1){
    return num1 + 100;
}
console.log("Arreglo de números duplicados:");
console.log(someNumbers.map(doubleNums));
console.log("Arreglo de números al cuadrado:");
console.log(someNumbers.map(squareNums));
console.log("100 añadido a cada uno de los elementos en el arreglo de números:");
console.log(someNumbers.map(add100));
// el método map() recorrerá cada uno de los
// elementos en un arreglo dado y aplicará la 
// función proporcionada
// nota que no incluimos paréntesis
// después de los nombres de las funciones, esto llamaría a la función
// en su lugar, pasamos el nombre de la función, 
// y el método map() las llama cuando las necesita

Ejecutar el código anterior nos dará los siguientes registros en la consola:

Método Filter()

El método filter(), junto con el método map() son ambos métodos de JavaScript bastante comunes. Son muy similares al método map() que acabamos de ver. Con el método map() podemos pasar cualquier función, y esa función se aplica a cada uno de los elementos en un arreglo. Con el método filter(), pasaremos un criterio de filtrado y el método filter recorrerá todos los elementos en un arreglo y devolverá un nuevo arreglo con solo los elementos que pasen el criterio. Veamos algunos ejemplos de eso:

// primero vamos a crear un arreglo 
// para aplicar el método filter()
let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
function checkEven(num1){
    if (num1 % 2 == 0){
        return num1;
    }
}
function checkOdd(num1){
    if (num1 % 2 == 1){
        return num1;
    }
}
function over13(num1){
    if (num1 > 13){
        return num1;
    }
}
function divisibleByFive(num){
    if (num % 5 == 0){
        return num;
    }
}
console.log("Números pares de la lista:");
console.log(someNumbers.filter(checkEven));
console.log("Números impares de la lista:");
console.log(someNumbers.filter(checkOdd));
console.log("Números mayores de 13 del arreglo:");
console.log(someNumbers.filter(over13));
console.log("Números divisibles por 5 del arreglo:");
console.log(someNumbers.filter(divisibleByFive));

Ejecutar el código anterior nos dará los siguientes registros en la consola:

Función de flecha

¿Recuerdas cuando dijimos que las funciones son extremadamente comunes en JavaScript y que se realizan muchas optimizaciones para que sean aún más eficientes o limpias? Bueno, las funciones de flecha son una de ellas. A veces, las funciones de flecha también se denominan la flecha gorda. Esencialmente, proporcionan una forma mucho más corta de escribir tus funciones. También se utilizan muy comúnmente con los métodos de JavaScript que acabamos de ver. Veamos algunos ejemplos:

// JavaScript proporciona múltiples niveles de // acortamiento de código con funciones de flecha dependiendo de tu código exacto // Esencialmente, la forma más larga en que podemos escribir una función es // la forma en que siempre las escribimos sin usar las funciones de flecha // comencemos con un arreglo para aplicar las funciones de flecha let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]; console.log("Arreglo Original:"); console.log(someNumbers); // en los ejemplos anteriores hemos aplicado muchas funciones // después de crearlas como funciones nombradas regulares // En este ejemplo aplicaremos las transformaciones exactas // para que puedas ver los dos extremos en la longitud del código // duplicar cada número en el arreglo: console.log("Duplicar cada número en el arreglo:") console.log(someNumbers.map(num => num * 2)); // elevar al cuadrado cada número en el arreglo: console.log("Elevar al cuadrado cada número en el arreglo:") console.log(someNumbers.map(num => num * num)); // añadir 100 a cada número en el arreglo: console.log("Añadir 100 a cada número en el arreglo:") console.log(someNumbers.map(num => num + 100)); // Solo mantener los números pares en el arreglo: console.log("Solo mantener los números pares en el arreglo:") console.log(someNumbers.filter(num => num % 2 == 0)); // Solo mantener los números impares en el arreglo: console.log("Solo mantener los números impares en el arreglo:") console.log(someNumbers.filter(num => num % 2 == 1)); // Solo mantener los números que son divisibles por 5: console.log("Solo mantener los números que son divisibles por 5:") console.log(someNumbers.filter(num => num % 5 == 0)); // Solo mantener los números que son mayores de 13: console.log("Solo mantener los números que son mayores de 13:") console.log(someNumbers.filter(num => num > 13)); [/code>

Ejecutar el código anterior nos dará los siguientes registros en la consola:

En el próximo tutorial, haremos un resumen de lo que hemos visto y veremos qué sigue.