Aprenda estos conceptos básicos de JavaScript en solo unos minutos

A veces, solo desea aprender algo rápidamente. Y leer artículos completos que describen conceptos específicos de JavaScript puede causar una sobrecarga cognitiva. El propósito de este artículo es describir algunos conceptos comunes de la manera más simple posible con:

  • Una breve descripción
  • Por que es relevante
  • Un ejemplo de código práctico (ES5 / ES6 con funciones de flecha).

Siempre es una buena idea tener conocimientos generales cuando se trabaja con el ecosistema JS. Sabrá cómo funcionan e interactúan las cosas, y aprenderá y mejorará fácilmente las cosas más rápido.

Estos conceptos de JS se seleccionan en función de la popularidad y la relevancia que he visto entre la comunidad. Si quieres aprender un concepto que no forma parte de este artículo, deja un comentario y lo añadiré en un futuro próximo.

Si desea convertirse en un mejor desarrollador web, iniciar su propio negocio, enseñar a otros o simplemente mejorar sus habilidades de desarrollo, publicaré consejos y trucos semanales sobre los últimos lenguajes de desarrollo web.

Mejore sus habilidades de JavaScript con estos útiles métodos JS .

Los conceptos de JS que veremos:

  1. Alcance
  2. IIFE
  3. MVC
  4. Async / await
  5. Cierre
  6. Llamar de vuelta

1 Alcance

El alcance es simplemente una caja con límites. Hay dos tipos de límites en JS: locales y globales, también conocidos como internos y externos.

Local significa que tiene acceso a todo lo que está dentro de los límites (dentro del cuadro), mientras que global es todo lo que está fuera de los límites (fuera del cuadro).

Estos términos se usan mucho cuando hablamos de clases, funciones y métodos. Proporciona la capacidad de determinar qué es accesible (visible) para el contexto actual.

¿Por qué es esto relevante?

  • Separa la lógica
  • Reduce el enfoque
  • Mejora la legibilidad

Ejemplo

Supongamos que crea una función y desea acceder a una variable definida en el alcance global.

ES5

ES6

Como se muestra en el ejemplo anterior, la función showName()tiene acceso a todo lo que está definido dentro de sus límites (localmente) y también fuera (globalmente). Recuerde, el ámbito global no puede acceder a las variables definidas en el ámbito local porque está encerrado en el mundo exterior, excepto si lo devuelve.

2. IIFE

IIFE (Expresión de función inmediatamente invocada), como su nombre indica, significa que la función se "Invoca inmediatamente" cuando se crea. Antes de que ES6 ++ presentara clases / métodos para admitir el paradigma de programación orientada a objetos (OOP), la forma común era imitar IIFE como un nombre de clase e invocar funciones como métodos envueltos en un returntipo.

¿Por qué es esto relevante?

  • Ejecuta el código inmediatamente
  • Evita que el alcance global se contamine
  • Soporta estructura asincrónica
  • Mejora la legibilidad (algunos pueden argumentar lo contrario)

Ejemplo

La tecnología ha cambiado mucho en los últimos años. Ahora, por ejemplo, tiene la capacidad de cambiar el color de casi cualquier cosa, como su automóvil. Veamos un ejemplo de código.

ES5

ES6

En el ejemplo anterior, hemos envuelto dos funciones dentro del returntipo ( changeColorToRed()& changeColorToBlack()). Esto nos permite acceder a múltiples funciones e invocar el método que queramos.

En resumen, primero invocamos la car(expresión de función) para acceder a lo que hay dentro. Entonces podemos usar la .notación para invocar la función que está definida dentro del returntipo. Este enfoque es similar a la estructura de tener clases / métodos donde primero llamamos al nombre de la clase antes de poder llamar al nombre del método. De esta manera puede escribir código limpio, mantenible y reutilizable.

3. MVC

Model-view-controller es un marco de diseño (* no un lenguaje de programación) que nos permite separar el comportamiento en una estructura práctica del mundo real. Casi el 85% de las aplicaciones basadas en la web en la actualidad tienen este patrón subyacente de una forma u otra. Existen otros tipos de marcos de diseño, pero este es, con mucho, el patrón más fundamental y fácil de entender.

¿Por qué es esto relevante?

  • Escalabilidad y mantenibilidad a largo plazo
  • Fácil de mejorar, actualizar y depurar (según la experiencia personal)
  • Fácil de configurar
  • Proporciona estructura y descripción general

Ejemplo

Veamos un breve ejemplo del marco de diseño MVC.

ES5

ES6

Como se muestra en el ejemplo anterior, lo que normalmente dividir el view, modely controlleren las carpetas / archivos independientes en términos de mejores prácticas, pero sólo para ilustrar el concepto, hemos puesto todo en un solo archivo. Los objetivos del marco de diseño son simplificar el proceso de desarrollo y apoyar un entorno colaborativo sostenible.

4. Asíncrono / espera

Deténgase y espere hasta que se resuelva algo. Proporciona una forma de mantener el procesamiento asincrónico de una manera más sincrónica. Por ejemplo, debe verificar si la contraseña de un usuario es correcta (compararla con la que existe en el servidor) antes de permitir que el usuario ingrese al sistema. O tal vez ha realizado una solicitud de API REST y desea que los datos se carguen por completo antes de enviarlos a la vista.

¿Por qué es esto relevante?

  • Capacidades sincrónicas
  • Controla el comportamiento
  • Reduce el "infierno de devolución de llamada"

Ejemplo

Supongamos que desea obtener todos los usuarios de una API de descanso y mostrar los resultados en formato JSON.

ES5

ES6

Para usarlo await, debemos envolverlo dentro de una asyncfunción para notificar a JS que estamos trabajando con promesas. Como se muestra en el ejemplo, (a) esperamos dos cosas: responsey users. Antes de que podamos convertir el responseformato a JSON, debemos asegurarnos de que tenemos el responseobtenido; de lo contrario, podemos terminar convirtiendo un archivo responseque aún no está allí, lo que probablemente generará un error.

5. Cierre

Un cierre es simplemente una función dentro de otra función. Se utiliza cuando desea extender el comportamiento, como pasar variables, métodos o matrices de una función externa a una función interna. También podemos acceder al contexto definido en la función externa desde la función interna, pero no al revés (recuerde los principios de alcance de los que hablamos anteriormente).

¿Por qué es esto relevante?

  • Extiende el comportamiento
  • Útil cuando se trabaja con eventos

Ejemplo

Supongamos que trabaja como ingeniero de desarrollo para Volvo y ellos necesitan una función que simplemente imprima el nombre del automóvil.

ES5

ES6

La función showName()es un cierre, porque extiende el comportamiento de la función showInfo()y también tiene acceso a la variable carType.

6. Devolución de llamada

Una devolución de llamada es una función que se ejecuta después de que se ha ejecutado otra función. También se conoce como llamada posterior. En el mundo de JavaScript, una función que espera a que otra función se ejecute o devuelva un valor (matriz u objeto) se conoce como devolución de llamada. Una devolución de llamada es una forma de hacer que las operaciones asincrónicas sean más síncronas (orden secuencial).

¿Por qué es esto relevante?

  • Espera a que se ejecute un evento
  • Proporciona capacidades sincrónicas
  • Forma práctica de encadenar funcionalidades (si se completa A, ejecute B, y así sucesivamente)
  • Proporciona estructura y control de código
  • Tenga en cuenta que es posible que haya oído hablar del infierno de devolución de llamada. Básicamente significa que tiene una estructura recursiva de devoluciones de llamada (devoluciones de llamada dentro de devoluciones de llamada dentro de devoluciones de llamada y así sucesivamente). Esto no es práctico.

Ejemplo

Digamos que Elon Musk en SpaceX necesita una funcionalidad que encienda los 27 motores Merlin de Falcon Heavy (el cohete más poderoso del mundo por un factor de dos) cuando se presiona un botón.

ES5

ES6

Observe que espera a que ocurra un evento (clic en un botón) antes de realizar una acción (encender los motores). En resumen, pasamos la fireUpEngines()función como un argumento (devolución de llamada) a la pressButton()función. Cuando el usuario presiona el botón, enciende los motores.

¡Ahí lo tienes! Algunos de los conceptos JS más populares se explican simplemente con ejemplos. Espero que estos conceptos te hayan ayudado a comprender un poco más JS y cómo funciona.

Puedes encontrarme en Medium, donde publico semanalmente. O puede seguirme en Twitter, donde publico trucos y consejos de desarrollo web relevantes junto con historias personales.

PD Si te gustó este artículo y quieres más como estos, aplaude ❤ y compártelo con tus amigos, es buen karma