René Pacios

/* Overflow My Brain & More */

Afinaciones de rendimiento en JavaScript y buenas prácticas Parte 2 de *

El de hoy es un pequeño tip, ahora que estamos retomando el blog, lo haré poco a poco, así que prometo no extenderme mucho, o por lo menos, lo intentaré.

En este post continuaré con la serie de afinaciones de rendimiento y buenas prácticas en lado cliente con JavaScript aunque puede ser aplicable a otros lenguajes similares. Metámonos en harina.

Una de las características de JavaScript es que se trata de un lenguaje no tipado o débilmente tipado, estos  nos aporta una gran flexibilidad a la hora de definir una variable, los parámetros de una función, etc.. Veamos un poco de código, que siempre es mejor que mis parrafadas.

//variable definida sin ningún tipo
var mivariable;
mivariable = 4; //asignación numérica
mivariable = 'Hola mundo!!'; //sin necesidad de 

//en las funciones tampoco se tipan los parámetros function foo(a1, b1) { }

foo(1, '3'); //llamada a la función pasando un numero y una cadena foo('cadena', null); //podemos enviar un nulo foo(); //o incluso llamara a la función si pasar ningun parámetro

Como podéis ver en el fragmento de código anterior, el lenguaje nos aporta gran flexibilidad en este caso, incluso podríamos enviar como parámetro un objeto, un array, o incluso una función. Bueno, si has llegado hasta aquí, entonces el tema te interesa, y seguramente te estarás preguntando ¿que pasa cuando no indicamos un valor para alguno de los parámetros? ¿como preparar mi función para estos casos? Bien, cuando una función no recibe alguno de los valores para un par��metro, este puede validarse porque posee el valor especial undefined, de modo que podríamos validar si el parámetro contiene el valor undefined y en caso afirmativo actuar en defecto. Por ejemplo veamos un ejemplo en el que vamos a definir una función en la que si no enviamos ningún parámetros se asignará un valor por defecto.

function foo(a1, b1) {

    a1 = a1 || 'valor por defecto para a1';
    b1 = b1 || 'valor por defecto para b1'; 

    //....
    console.log(a1, b1);

}

Este tipo de “semi-patrones” es muy común, gracias al operador | | (OR) que actúa en cortocircuito, evalúa el valor de a1 si este es diferente de nulo o posee algún valor (diferente de undefined) se asignará el valor que contiene el que se ha pasado como argumento a la función, es decir se ejecuta la siguiente sentencia a1=a1. En caso contrario, a1==undefined, con lo cual el resultado de evaluar undefined es falso, por lo tanto se evalúa la 2 condición, es decir se ejecuta a1=’valor por defecto para a1’.

Sin embargo este “semi-patron” presenta un problema, más que un problema una mala mejorable práctica, que seguramente ya te habrá llamado la atención. El problema es que siempre se realiza una asignación sobre las variables, siempre  se va a asignar un valor a a1, es decir, tanto si se le pasa un valor como argumento a la función, como si esta se envía vacío, se asignará un valor a a1, y esto evidentemente es una mal practica, recordemos que JavaScript ha ganado mucha importancia en dispositivos móviles tabletas que no poseen la potencia de un PC y debemos optimizar nuestro código al máximo.

Como podemos solucionar este problemilla de una forma sencilla, bueno una solución, pasaría por realizar sólo la asignación cuando el parámetro no estuviese definido, algo como esto:

function foo(a1, b1) {

   if (a1===undefined) a1='valor por defecto para a1';
   if (b1=== undefined) b1 = 'valor por defecto para b1';

    //....
    console.log(a1, b1);

}

Como veis el cambio es sencillo, si preferimos utilizar el operador OR en cortocircuito, podemos utilizarlo de la siguiente forma:

function foo(a1, b1) {

   a1 || (a1='valor por defecto para a1');
   b1 || (b1 = 'valor por defecto para b1');

    //....
    console.log(a1, b1);

}

Como podéis ver, incluyendo la 2º condición entre paréntesis, podemos crear una expresión equivalente al código anterior. El operador OR actúa en cortocircuito, de modo que sólo evalúa la 2ª condicion, si la primera es falsa, de modo que cuando por ejemplo a1 se evalúe a falso, evalua la siguiente expresión, y esta al ser evaluada realiza la asignación de la cadena a la variable a1.

Escribiendo este post, me ha venido a la cabeza otra buena práctica que nos va a evitar más de un rompedero de cabeza, pero esta la dejaremos para otro post.

Nos leemos.

Acerca de René

René Pacios es un apasionado de la tecnología, autodidacta, emprendedor, le encanta el desarrollo web, para moviles, aplicaciones, todo aquello que automatice tareas y haga que las máquinas trabajen para él. Es un gran fan de las tecnologías Microsoft, y le encanta estar a la última siempre que el tiempo se lo permite. Siempre quiso ser cantante, pero creo que en esta vida se va a quedar sólo en canta-mañanas

               

Agregar comentario

Loading