Tipado dinámico con Javascript

A menudo escuchamos que JavaScript no tiene tipado, pero no es del todo cierto.

Esta tipado dinámicamente, lo que significa que no necesitamos declarar su tipo. Pero esto solo es posible porque identifica el tipo de variable que estamos declarando y la asigna, aunque no de forma explícita.

Por ejemplo:

Por el momento escuchamos que JavaScript no está escrito, pero no está del todo claro.

const cliente = "Juliana"

No necesitamos decirle a JavaScript que cliente es una cadena de texto, ¡ya sabe que lo es!

Y entonces piensas: "¡Qué bueno es!, ahorra nuestro tiempo, ¡¿verdad?!" Sí, también lo creo. Pero es muy común encontrar errores extraños debido a este tipado dinámico, cuando no comprendemos muy bien cómo funciona.

Imagína la siguiente situación: trabajamos en un sistema de finanzas personales muy importante. En él, la persona ingresa cuánto gana y cuánto gasta, y vamos sumando y restando estos valores de su saldo.

Después de una actualización en nuestro sistema, recibimos una llamada desesperada del departamento comercial de la empresa: están apareciendo montos extraños para los clientes y las cuentas no cuadran.

En esta actualización permitimos que los números se tomen directamente de la cuenta corriente del cliente. Lo que no habíamos notado es que estos valores se mostraban como una cadena de texto y no lo estábamos manejando correctamente. Por lo tanto, un valor de $20,00 que ingresó en una cuenta con otros $20,00 hizo que esa cuenta totalizara $2020,00!

Y es precisamente para comprender cómo gestionar y prevenir este tipo de problema que se realizó este artículo.

Conociendo los tipos existentes en JavaScript

Los tipos más conocidos hoy en día en JavaScript son:

string, boolean, string, function, undefined y object.

Creo que lo primero que viene a la mente es si realmente solo existen estos tipos. ¿Dónde está el null y el array? Bueno, ¡no existen!

Tomemos algunas variables de nuestro sistema financiero para analizar un poco los tipos de variables que existen.

const cliente = ‘Joaquina’;
const premium = false;
let saldo = 20.00;
const actualizaSaldo = (saldo, nuevoValor) => {
    saldo += nuevoValor;
}
const transaccion = {
    descripcion: ‘Almuerzo de Juliano’,
    tipo: ‘credito’,
    valor: ‘20.00’,
fecha: `08/05/2019`
}
const cuentasBancarias = [ {agencia:1234, cuenta: 16452-2}, {agencia:1234, cuenta: 16458-5} ];

Para ver el tipo de estas variables, usemos el operador typeof.

typeof cliente //string
// el js reconoce string por el uso de comillas, simples o dobles, o acentos graves
typeof premium //boolean
typeof saldoConta //number
typeof atualizaSaldo //function

La variable actualizaSaldo es una función y esta viene definida por la sintaxis que, en este caso, es arrow function.

typeof transaccion //object

La variable transaccion es un objeto y está definida por las llaves { }.

En nuestro sistema también contamos con la funcionalidad de pago programado. Puedes guardar la fecha de un pago para que se descuente de tu saldo.

Debido a esta funcionalidad, también necesitamos notificar al usuario si está intentando realizar una transacción que ya se ha realizado. Para esto, tenemos esta función:

const verificaTransaccion = (transaccion, nuevaTransaccion) => {
    return transaccion === nuevaTransaccion;
}

¡Excelente! Ahora llamemos a nuestra función:

const nuevaTransaccion = {
    descripcion: ‘Almuerzo de Juliano’,
    tipo: ‘credito’,
    valor: ‘20.00’,
fecha: `08/05/2019`
}
verificaTransaccion(transaccion, nuevaTransaccion) //false

¡Acabamos de encontrar un problema en nuestro sistema! Nunca informará a nuestros usuarios que las transacciones son iguales de esta manera. Incluso si nuestros objetos tienen exactamente los mismos valores, no son iguales. ¿Qué quiere decir esto?

Un poco sobre objetos

En JavaScript, el objeto es un valor de referencia, es decir, apunta a un lugar específico en la memoria y, en las comparaciones, se utiliza esta referencia.

Con esto en mente, ahora sabemos que al hacer (transaccion === nuevaTransaccion) JavaScript verificará si estas dos referencias apuntan al mismo lugar en la memoria y no verificará los valores internos de nuestros objetos.

Entonces, tenga cuidado al comparar objetos y siempre intente comparar los valores existentes en el objeto.

typeof cuentasBancarias //object

La variable cuentasBancarias es un objeto y esto se define por... espera, ¡esta variable debería ser una matriz!

Por cierto, aquí es donde comienza a ponerse un poco extraño. Las matrices son del tipo objeto para JavaScript, lo que significa que no podemos saber si una variable es una matriz o no solo con typeof. Para saber si una variable es una matriz, debemos hacer lo siguiente:

Array.isArray(cuentasBancarias) //true
Array.isArray(transaccion) //false

¡Ahora si! Pero debemos recordar que, al ser del tipo objeto, una matriz también es un valor de referencia y una matriz nunca será igual a otra (a menos que apunten al mismo lugar). Entonces, al igual que en el objeto, siempre es bueno comparar los valores de la matriz y no la matriz misma.

Resultados numéricos inesperados

Ahora intentemos resolver nuestro problema inicial y ajustemos nuestra función atualizaSaldo() para que solo nos devuelva el valor si es un número, usando el operador typeof:

const actualizaSaldo = (saldo, nuevoValor) => {
    const nuevoSaldo = saldo + nuevoValor;
    if(typeof nuevoSaldo == number) {
    saldo = nuevoSaldo;
} else {
    return ‘No fue posible calcular el resultado.’;
}
}

¡Listo! Con estos cambios, estamos garantizando que nuestra aplicación no presente errores inesperados, ¿verdad? Intentemos:

Traduzco el siguiente contenido al idioma español:

actualizaSaldo (20.00, 20) //20
actualizaSaldo ('veinte', 20) //NaN

En el segundo ejemplo, dame el valor NaN, que significa "Not a Number" o "No es un Número". Pero si no es un número, ¿no debería haber devuelto el texto que se solicitó?

En este caso no, porque el tipo de NaN también es number, por más confuso que parezca. Esto se debe a que es el resultado de una operación numérica y, en matemáticas, podemos asociarlo con ∄ (no existe).

Y aún tenemos otra complicación con este valor:

NaN == NaN //false

Un NaN nunca será igual a otro, ya que puede ser cualquier cosa que no sea un número. Si necesitamos saber si este valor es NaN, podemos usar la siguiente función:

const resultado = actualizaSaldo('veinte', 20);
isNaN(resultado) //true

Usando el booleano false a tu favor

Sabemos que undefined es un valor indefinido y tiene su propio tipo. ¿Pero y null? Intentemos:

typeof null //object

¿Es del tipo objeto?, otro tipo al que debemos prestar atención a la hora de usarlo. También es importante saber qué valores son considerados falsos por JavaScript y usar esto a nuestro favor. Los valores considerados falsos son: 0, '', undefined, NaN y null. Esto quiere decir que, si en nuestra regla de negocio consideramos el 0 y la cadena vacía como valores falsos, podemos hacerlo de la siguiente forma:

const actualizaSaldo= (saldo, nuevoValor) => {
    const nuevoSaldo = saldo + nuevoValor;
    f(nuevoSaldo) {
    saldo = nuevoSaldo;
} else {
    return 'No fue posible calcular el resultado.';
}
}

Listo, de esta forma nos aseguramos que el saldo solo se actualice si el valor realmente es un número. Como el if es una operación condicional, siempre convertirá las expresiones a valores booleanos, es decir, comprobará si la variable nuevoSaldo representa un valor verdadero o falso.

Entendiendo la coerción automática de tipos

Esto solo sucede porque también tenemos coerción automática de datos en JavaScript. ¿Qué significa esto? Que siempre que realicemos operaciones con valores de diferente tipo, convertirá uno de los dos para poder realizar la operación. Por ejemplo:

1 + '1' //11
1 - '1' //0
1 == '1' //true

Consejos finales para evitar estos problemas

El primer consejo (probablemente el más mencionado) es siempre que posible usar === en lugar de ==. Esto es importante porque === devuelve true solo si el valor y el tipo son iguales, anulando la coerción automática de JavaScript.

1 == '1' //true
1 === '1' //false

También es mejor convertir siempre los valores antes de realizar operaciones para evitar valores no deseados.

Por ejemplo, siempre recibimos el valor de cursos completados como cadena, pero necesitamos calcular esos valores como números. Podemos hacer:

El siguiente contenido es una función en JavaScript que actualiza el saldo de una cuenta con un nuevo valor:

const actualizaSaldo= (saldo, nuevoValor) => {
    const nuevoSaldo = saldo + Number(nuevoValor);
    if (nuevoSaldo) {
        saldo = nuevoSaldo;
    } else {
        return 'No fue posible calcular el resultado.';
    }
}

La siguiente sugerencia es que, ante cualquier duda, consulte la precedencia de los operadores (el orden en que se procesan) en este enlace.

Y por último, recuerda siempre no confiar en el typeof de objetos, no usar typeof para matrices y usar sus valores para comparaciones, no su referencia.

Artículo escrito por Juliana Negreiros.

Traducido para Alura Latam por Marianna Costa.