¿Cuáles son algunas de las cosas más complicadas en JavaScript que pueden hacer tropezar a alguien?

Literalmente todo el idioma.

JavaScript está tan lleno de trampas y errores que hacen tropezar a todos. He estado trabajando con JavaScript durante años y todavía me tropiezo con él.

El primer problema que tengo es el alcance. Por defecto, todas las variables son globales, si coloca una var delante de la variable, ahora es local. No importa si coloca var cuando declara por primera vez la variable en el alcance o si la usa la última vez que accede a la variable. ¿Pero adivina que? Es fácil olvidarse de las var. Lo hago todo el tiempo y, como resultado, puedo introducir algunos errores realmente extraños cuando hago eso. Errores que solo pueden aparecer una vez en una luna azul. He mejorado desde que comencé, pero sucede ocasionalmente. Todos cometemos errores.

A continuación, la palabra clave “this”. Es completamente diferente de la mayoría de los otros idiomas, donde “esto” se refiere al objeto actual. ¡No en JavaScript! Es global y apunta al último objeto que también estaba vinculado. Esta es realmente una trampa fácil de caer, como en una solicitud de Ajax. La función de enlace y las nuevas funciones de flecha gruesa generalmente resuelven este problema. No es raro ver este código:

var that = this;

Para arreglar esto.

También está la cuestión de la ejecución del bucle de eventos. Muchas personas se tropiezan con este código:

para (i = 0; i <10; i ++) {
setTimeout (function () {
alerta (i);
}, 2);
}

Que hace eso O cuando el código se ejecuta en JavaScript.

Por último, algunas características de JavaScript no son compatibles con diferentes navegadores web. Todos siguen diferentes especificaciones y ninguno de ellos es el estándar. Es bastante malo Antes de usar una característica oscura, siempre verifico ¿Puedo usar … Tablas de soporte para HTML5, CSS3, etc.

He tratado con esto muchas veces. Me enfrento a la palma más a menudo cuando trato con JavaScript porque me encuentro con errores que conozco todo el tiempo.

Después de ver a un par de personas aprender JavaScript recientemente, votaría por:

  • esto: el hecho de que la explicación de Mozilla Developer Network tenga 12 páginas realmente debería resumirlo. Pero para la mayoría de las personas que provienen de un lenguaje orientado a objetos tradicional como Java, ser capaz de cambiar dinámicamente el enlace “esto” de una función es … antinatural. Y para arrancar, te encontrarás con esto desde el principio mientras aprendes JavaScript, a menudo de forma desagradable.
  • ¿Todo en JavaScript es un objeto? – Casi todo es un objeto … pero no en el sentido de Java de todo lo que hereda de Object. Y aún puede hacer comparaciones arbitrarias y sin sentido como:

const f = función () {};
const x = 5;
console.log (f == 5);

¿Qué? Y, por supuesto, podemos hacer cosas como:

x.toFixed (2)

Lo que hace tropezar a las personas que asumen que “x” es primitivo, pero en realidad es un objeto.

  • La evolución de JavaScript asíncrono | RisingStack – Y, por supuesto, tener la mayoría de las funciones ejecutadas en algunos viajes de moda asincrónicos a mucha gente. Y para apilar aquí, hay varias interfaces diferentes para lidiar con funciones asíncronas, desde devoluciones de llamada hasta promesas de estilo Bluebird para la nueva clase ES6 Promise.

De todos modos, como la mayoría de las cosas subjetivas, su kilometraje puede variar.

Los dos grandes no entienden el alcance y se están familiarizando con el funcionamiento del prototipo.

El depurador de Chrome es una excelente manera de inspeccionar el alcance anidado y los prototipos de los objetos. establecer un punto de interrupción en algún código Javascript e inspeccionar los objetos.

Algunos bits menos complicados comprenden la elevación de variables y funciones en JavaScript

Si se escribe para navegadores, aún existen diferencias menores en las implementaciones, especialmente si se admiten navegadores antiguos. ¿Puedo usar … Las tablas de soporte para HTML5, CSS3, etc. es un gran recurso para la verificación de compatibilidad. Si solo respalda algunos años, los navegadores ahora son bastante consistentes. Tengo que admitir 3D en los navegadores de escritorio de vuelta a IE11 que admite WebGL y eso no ha sido un gran problema teniendo en cuenta la antigüedad.

Eso lleva al siguiente truco. Por lo general, utiliza una herramienta como Babel o Typecript y transpila de nuevo a su mínimo común denominador. Eso significa que ejecutaría una herramienta como gulp para autoconstruir para que pueda probar de inmediato. Suena difícil, pero es similar al mundo de Java donde configura Maven o Gradle, decide un contenedor, lo ejecuta desde su IDE, etc., etc.

Lo peor que puedes hacer es leer viejas formas de hacer las cosas. Por ejemplo, generalmente use let en lugar de var . También vale la pena aprender los nuevos métodos de matriz. Si bien jQuery fue genial en su día, creo que promueve el código de espagueti y los marcos MVC / MVVM son el camino a seguir. Es muy conveniente sucumbir al uso de un selector jQuery en un poco de código que no debería saber nada sobre la vista. Uno de los Angular, React o Vue, por ejemplo, tiene una mejor separación de las preocupaciones. Sería útil una búsqueda en Google sobre react vs vue vs angular vs angular 2 . Me estoy poniendo un poco político aquí, ya que todavía hay muchos fanáticos de jQuery por ahí.

¿El más complicado de todos? Discernir los malos consejos de los buenos 🙂

Olvidando a dónde fue una variable o colocando la incorrecta . Casi siempre uso multi-variable con mucho más si, por lo que se vuelve cada vez más divertido a medida que mi código se vuelve más complejo al verme poner accidentalmente en la variable de otra cadena. ¿El consejo de cómo solucionarlo? Mantenga sus variables en una sección separada cerca de la parte superior para que pueda reescribirlas rápidamente, personalmente también me resulta más fácil rastrearlas de esa manera.