Aprender javascript: los 5 peores errores de los desarrolladores

El curso de javascript es fácil de hacer para cualquier neófito de la programación informática. Para un aspirante a web developer, aprender JavaScript es uno de los primeros requisitos fundamentales, para poder familiarizarse con el desarrollo de aplicaciones web.

¿Qué es javascript?

Javascript es un lenguaje de programación que los desarrolladores web utilizan para crear páginas web responsive. Sirve para animar la página web y hacerla interactiva para el usuario. Es el lenguaje universal para el desarrollo web y es uno de los tres lenguajes fundamentales para convertirse en desarrollador web, junto con el lenguaje HTML y el lenguaje CSS (que puedes ver por primera vez leyendo nuestra guía de html y css)

La programación en JavaScript puede parecer simple, pero es un lenguaje lleno de trampas. El aprendizaje del lenguaje JavaScript es gradual, comenzando con la sintaxis de JavaScript, pero a menudo es fácil cometer errores sin ser consciente de ellos, o encontrarse con lo que en la jerga se denominan “bad habit”.

Es crucial convertirse en un desarrollador web eficiente para cuidar todos estos detalles, que también pueden afectar el funcionamiento del código. Para un programador novato es muy común cometer errores cuyas características, quizás, no se conocen.

Entonces, averigüemos juntos cuáles son los 5 peores errores que puede cometer un desarrollador de JavaScript.

1. Usar la keyword var: A menos que se esté trabajando en un motor JavaScript extremadamente obsoleto y que ya no es compatible, no hay excusas para usar var.
   El viejo var tenía solo dos funciones: funcional o global.

   Significa que todo lo que se defina con él, dentro de una función Javascript, es accesible para toda la función, independientemente de dónde se declare.

   El otro comportamiento interesante de var es que no generaría un error si se volviera a declarar una variable existente, lo que podría generar una lógica confusa si declara la misma variable dos veces dentro de la misma función haciendo cosas diferentes con ambos versiones. La alternativa más refinada es usar let o const , usando la última opción para valores inmutables (es decir, constantes).

   La principal ventaja de let respecto a var es que el primero tiene alcance léxico, lo que significa que solo será accesible dentro del bloque de código en el que se declara. Teniendo en cuenta que un bloque de código es cualquier cosa que escribas entre paréntesis, puedes declarar variables que viven solo dentro del cuerpo de una instrucción if o, por ejemplo, dentro del código de un ciclo for Javascript. Incluso podrías usar siempre el mismo nombre sin temor a tener problemas con valores en conflicto.

   La ventaja de usar let en lugar de var es que le da al desarrollador de JavaScript un control más granular sobre qué variables se definen en el código. Usar var no se considera un error. El código JavaScript funcionará. Siempre que no se repita nombres o se declare involuntariamente algo global y luego se haga referencia a la misma variable en otro lugar sin declararla primero. Pero, a día de hoy, con el lenguaje JavaScript constantemente actualizado, se ha convertido en una solución obsoleta y por tanto en un bad habit también para el mantenimiento del código.

2. Utilizar la Mutation con los array: la mutación es un concepto interesante en JavaScript. En general, ocurre cuando llama a una función en una variable que luego modifica la variable de alguna manera. Por ejemplo, cuando llama a la función sort en un array, la propia matriz se modifica. Sin embargo, si llama a la función map en una matriz, la matriz original permanece intacta. No cambia.

const names = ["Claudio", "Antonio",  "Piero", "Dominga"];
const copiedNames = [...names];
const sortedNames = names.sort();
console.log(names); //["James", "Jess", "Lily", "Sevi"]
console.log(copiedNames); //["Jess", "James",  "Sevi", "Lily"]
console.log(sortedNames); //["James", "Jess", "Lily", "Sevi"] 

En este ejemplo, llamar a names.sort() modificará la matriz de nombres original, lo que significa que las matrices de nombres y sortedNames tendrán el mismo output. Sin embargo, la matriz copiedNames no se cuestiona, ya que era una copia fiel de la matriz original.

Sin embargo, si llamara a la función map() en la matriz, la matriz original de nombres no se vería afectada.

Este concepto es fácilmente pasado por alto por un desarrollador de JavaScript novato.

3. No comprender la funcionalidad real de la keyword this: La palabra clave this se refiere al contexto de ejecución actual de la función desde la que estás llamando. Las reglas por las cuales es un "good habit" usar esto son:
   1. Si lo estás usando dentro de una función normal, será el contexto de ejecución de esa función. Ahora que la herencia de prototipos ya no es la mejor manera de manejar objetos, este no es un caso de uso muy común.
   2. Si lo estás utilizando dentro de una función arrow, hará referencia al contexto de ejecución de la función principal. Es decir, si está llamando a esta función arrow dentro de una función normal, esta última actuará como una función principal. Si está utilizando la función arrow de nivel superior, estás accediendo al alcance global a través de este archivo.
   3. Si lo estás usando dentro de un método, estás haciendo referencia al contexto de ejecución de ese método, que incluye también todas las propiedades definidas como parte de la clase de ese objeto.  

De las reglas es posible entender que el valor de this en el lenguaje JavaScript puede ser anulado.

 class Person { 
 constructor(first_name, last_name) {
 this.f_name = first_name;
 this.l_name = last_name; }
 }

 function greetPerson() {
 console.log("Hello there ", this.f_name, this.l_name);
 }
  
let oPerson1 = new Person("Fernando", "Doglio");
let oPerson2 = new Person("John", "Doe");
greetPerson.call(oPerson1);
greetPerson.call(oPerson2);

La función no toma argumentos, pero hace referencia directamente a 2 propiedades dentro de su contexto de ejecución. Pero las propiedades nunca se han definido en el contexto particular de la función. Son parte de la clase.

Entonces, usando el método call que tiene cada función, puedes llamarla anulando su contexto. Permitiendo así que esta función externa actúe como un método de la clase Person.

Con este método de context override, puedes crear código que funcione con objetos desde el exterior, sin tener que cambiar su implementación. Esta técnica se acerca mucho a la metaprogramación y es una de las mejores prácticas que se puede hacer; por lo tanto, es una diferencia considerable para enmarcar.

4. Reasignar la variable const en el código: Este es un error muy común que ocurre al programar en JavaScript. A partir de ES6 (versión de JavaScript lanzada en 2015), hay dos formas principales de declarar variables: const y let. Estos dos, en su mayor parte, han reemplazado el uso de var en JavaScript moderno, como ya dijimos anteriormente. La diferencia entre estos dos es que no puedes reasignar variables const mientras que puedes hacerlo con let. Aquí un ejemplo:

 const count = 0;
 for (let i = 0; i < 10; i++) {
  count = count + i;
 }
 console.log(count);

En este caso se imprimirá un error: Asignación a variable constante. Si necesitas reasignar una variable, asegúrate de usar let, no const.

5. Mantenimiento largo de script HTML dentro de JavaScript. Veamos un ejemplo:

  var widgetStructure = ‘<div id=’ + widgetID + ‘>’ +
  ‘<h2 id=”’ + widgetTitleID + ‘“>’ + widgetTitle + ‘</h2>’ +
  ‘<div id=”’ + widgetContentID + ‘“ style=”’ + widgetContentStyles + ‘“>’ +
  (function() {
  var paras = ‘’;
  for (var i = 0; i < paraItems.length; ++i) {
  paras += ‘<p>’ + paraItems[i] + ‘</p>’;
  }
  return paras;
  })() +
  ‘</div>’ +
  ‘</div>’;

El ejemplo es feo, difícil de entender y además poco acostumbrado a un mantenimiento prolongado del código. Es conveniente usar DOM o insertar el HTML en otro lugar, por ejemplo en un archivo de plantilla o en un nodo de comentario, o mejor aún, en un elemento oculto. Usar mucho código HTML en JS puede ser contraproducente y hacer que el código sea confuso incluso para la persona que lo escribe.

Es probable que un desarrollador novato caiga en este error varias veces, por falta de experiencia.

Muchos de estos errores, no es correcto definirlos como tales, pero son precauciones que ayudan a entender la programación JavaScript de una manera más amplia. Cometer errores cuando estás al comienzo de tu camino es normal. Por eso es importante tomar conciencia de lo que estás escribiendo y de la calidad del código que estás generando.

¡Para aprender el lenguaje JavaScript confía en nuestro curso! ¿Quieres convertirte en desarrollador web? ¡Todo lo que tienes que hacer es inscribirte en nuestra Hackademy!