Promesas

Una promesa en JavaScript es un objeto que representa un valor que puede no estar disponible todavía, pero que se espera que lo esté en algún momento. Las promesas se utilizan para manejar operaciones asíncronas que toman tiempo en completarse, como hacer una solicitud HTTP o leer un archivo.

Creando una promesa

Para crear una promesa en JavaScript, utilizamos el constructor Promise. Este constructor toma una función como argumento, que a su vez toma dos argumentos: resolve y reject. resolve se utiliza para devolver el valor de la promesa una vez que se ha completado exitosamente, mientras que reject se utiliza para devolver el error en caso de que la promesa falle.

const promise = new Promise((resolve, reject) => {
  // ... do some async work
  if (success) {
    resolve(result);
  } else {
    reject(error);
  }
});

Consumiendo una promesa

Para consumir una promesa, podemos usar los métodos then y catch. then se utiliza para manejar el valor de la promesa en caso de que se resuelva correctamente, mientras que catch se utiliza para manejar el error en caso de que la promesa falle.

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

Async/Await

async/await es una forma de manejar promesas en JavaScript que se introdujo en ES2017. async se utiliza para marcar una función como asincrónica, lo que significa que devolverá una promesa en lugar de un valor directo. await se utiliza dentro de una función async para esperar a que una promesa se resuelva antes de continuar con la ejecución del código.

Buenas prácticas

Cuando se trabaja con async/await, es importante asegurarse de que se manejen correctamente los errores. Una forma de hacerlo es envolver el código await en un bloque try/catch.

async function myFunction() {
  try {
    const result = await someAsyncFunction();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

Además, es importante tener en cuenta que el uso excesivo de async/await puede afectar el rendimiento del código. Por lo tanto, se recomienda utilizarlo solo cuando sea necesario.

Malas prácticas

Una mala práctica común cuando se trabaja con async/await es no manejar correctamente los errores. Si no se envuelve el código await en un bloque try/catch, los errores pueden propagarse y causar problemas en otras partes del código.

Otra mala práctica es utilizar async/await en funciones que no necesitan ser asincrónicas. Esto puede afectar negativamente el rendimiento y la legibilidad del código.

Conclusión

En resumen, las promesas son una forma de manejar operaciones asíncronas en JavaScript, mientras que async/await es una forma más fácil de manejar el flujo de trabajo al trabajar con promesas. Es importante seguir buenas prácticas, como manejar correctamente los errores y utilizar async/await solo cuando sea necesario, para asegurarse de que el código sea legible y eficiente.

Si quieres profundizar más sobre el tema, te recomiendo siempre revisar la documentación oficial, seguirme en redes sociales o suscribirte a la newsletter del blog para seguir aprendiendo. Enjoy the journey!

Fuentes

• MDN Web Docs - Promise

• MDN Web Docs - async function

• JavaScript.info - Async/await

¿Qué es la pila de ejecución?

La pila de ejecución en JavaScript es una pila LIFO (Last In, First Out) que se utiliza para almacenar y controlar el contexto de ejecución de una función. Cuando se llama a una función, su contexto de ejecución se añade a la pila de ejecución. A medida que se ejecuta el código, se van añadiendo elementos a la pila y eliminando elementos de la parte superior de la misma.

Ejemplo de pila de ejecución

Para entender mejor cómo funciona la pila de ejecución, veamos un ejemplo. Supongamos que tenemos el siguiente código:

function a() {
  console.log('Función A');
  b();
}

function b() {
  console.log('Función B');
  c();
}

function c() {
  console.log('Función C');
}

a();

Cuando se llama a la función a(), su contexto de ejecución se añade a la pila de ejecución. Dentro de a(), se llama a la función b(), por lo que su contexto de ejecución se añade a la pila de ejecución sobre el de a(). Dentro de b(), se llama a la función c(), por lo que su contexto de ejecución se añade a la pila de ejecución sobre el de b().

En este punto, la pila de ejecución se vería así:

c()
b()
a()

Una vez que la función c() termina de ejecutarse, su contexto de ejecución se elimina de la pila. Luego, la función b() termina de ejecutarse y su contexto de ejecución se elimina de la pila. Por último, la función a() termina de ejecutarse y su contexto de ejecución se elimina de la pila. En este punto, la pila de ejecución estaría vacía.

function a() {
  console.log('Función A');
  b();
  console.log('B sale de la pila, termina ejecución');
}

function b() {
  console.log('Función B');
  c();
  console.log('C sale de la pila, termina ejecución');
}

function c() {
  console.log('Función C');
}

// Función A
// Función B
// Función C
// C sale de la pila
// B sale de la pila

¿Qué es el bucle de eventos?

El bucle de eventos es un mecanismo que se utiliza en JavaScript para manejar la asincronía. En lugar de esperar a que una tarea asíncrona se complete antes de continuar con otra tarea, el bucle de eventos permite que el código siga ejecutándose mientras espera que la tarea asíncrona se complete.

Cuando se ejecuta una tarea asíncrona, como una petición de red o una animación, el código se coloca en una cola de eventos en lugar de en la pila de ejecución. El bucle de eventos se encarga de tomar los elementos de la cola de eventos y ejecutarlos en la pila de ejecución.

Ejemplo de bucle de eventos

Para entender mejor cómo funciona el bucle de eventos, veamos otro ejemplo. Supongamos que tenemos el siguiente código:

console.log('Inicio');

setTimeout(function() {
  console.log('Temporizador');
}, 0);

console.log('Fin');

Cuando se ejecuta este código, primero se imprime 'Inicio' en la consola. A continuación, se llama a la función setTimeout() con un tiempo de espera de 0 milisegundos. A pesar de que el tiempo de espera es 0, la función setTimeout() se ejecutará de forma asíncrona y no se añadirá a la pila de ejecución hasta que todas las otras tareas se completen.

A continuación, se imprime 'Fin' en la consola. Finalmente, cuando todas las tareas se han completado, la función setTimeout() se añade a la cola de eventos y, posteriormente, a la pila de ejecución. En este punto, se imprimirá 'Temporizador' en la consola.

Ejemplos adicionales

Para entender mejor cómo se utilizan la pila de ejecución y el bucle de eventos en situaciones reales, aquí hay algunos ejemplos adicionales:

Ejemplo 1: Botón de carga

Supongamos que tenemos un botón de carga en una página web que, cuando se hace clic, carga una imagen desde un servidor remoto y la muestra en la página. El código para este botón podría verse así:

button.addEventListener('click', function() {
  img.src = '<https://example.com/image.jpg>';
});

Cuando se hace clic en el botón, se añade un evento a la cola de eventos. Este evento se ejecutará después de que todas las otras tareas se completen. Cuando se ejecuta el evento, se carga la imagen desde el servidor y se muestra en la página.

Ejemplo 2: Animación

Supongamos que tenemos una animación que hace que un elemento de la página se desplace de izquierda a derecha. El código para esta animación podría verse así:

function animate() {
  element.style.left = '0';

  setTimeout(function() {
    element.style.left = '100%';
    animate();
  }, 1000);
}

animate();

En este ejemplo, la función animate() se llama a sí misma de forma recursiva utilizando setTimeout(). Cada vez que se llama a la función, se actualiza la posición del elemento y se establece un temporizador para llamar a la función de nuevo después de un segundo. Este patrón de recursión asíncrona es común en las animaciones en JavaScript.

Conclusión

En resumen, la pila de ejecución y el bucle de eventos son dos componentes clave del motor de JavaScript. La pila de ejecución se utiliza para controlar el flujo de ejecución del código, mientras que el bucle de eventos se utiliza para manejar la asincronía. Entender cómo funcionan estos dos componentes es esencial para escribir código eficiente en JavaScript.

Espero que esta introducción a la pila de ejecución y el bucle de eventos te haya resultado útil. Si quieres aprender más sobre JavaScript, te recomiendo que consultes las siguientes fuentes:

• MDN Web Docs

• W3Schools

• JavaScript.info

If

La estructura if es una de las más básicas y comunes en JavaScript. Nos permite ejecutar un bloque de código si se cumple una condición determinada. Por ejemplo:

const age = 18;

if (age >= 18) {
  console.log("Eres mayor de edad");
}

// "Eres mayor de edad"

Evaluamos si la variable age es mayor o igual que 18. Si se cumple esta condición, se ejecutará el bloque de código dentro de las llaves {}. Si este código es de una sola línea, podemos omitir las llaves, con salto de línea o separado por espacio. Por ejemplo:

const age = 18;

// con salto de línea
if (age >= 18)
    console.log("Eres mayor de edad");
// "Eres mayor de edad"

// en la misma línea
if (age >= 18) console.log("Eres mayor de edad");
// "Eres mayor de edad"

If-else

La estructura if-else nos permite ejecutar un bloque de código si se cumple una condición, y otro bloque de código si no se cumple. Por ejemplo:

const age = 16;

if (age >= 18) {
  console.log("Eres mayor de edad");
} else {
  console.log("Eres menor de edad");
}

// "Eres menor de edad"

Si la variable age es mayor o igual que 18, se ejecutará el primer bloque de código. Si no se cumple esta condición, se ejecutará el bloque de código dentro del else.

If-else-if

La estructura if-else-if nos permite agregar varias condiciones a nuestra evaluación. Por ejemplo:

const day = 3;

if (day === 1) {
  console.log("Es lunes");
} else if (day === 2) {
  console.log("Es martes");
} else if (day === 3) {
  console.log("Es miércoles");
} else {
  console.log("Es otro día");
}

// "Es miércoles"

Evaluamos el valor de la variable day. Si es igual a 1, se ejecutará el primer bloque de código. Si es igual a 2, se ejecutará el segundo bloque de código. Si es igual a 3, se ejecutará el tercer bloque de código. Si no se cumple ninguna de estas condiciones, se ejecutará el bloque de código dentro del else.

Switch

La estructura switch nos permite ejecutar diferentes bloques de código dependiendo del valor de una variable. Es similar a la estructura if-else-if, pero puede ser más fácil de leer y escribir en algunos casos. Por ejemplo:

const day = 3;

switch (day) {
  case 1:
    console.log("Es lunes");
    break;
  case 2:
    console.log("Es martes");
    break;
  case 3:
    console.log("Es miércoles");
    break;
  default:
    console.log("Es otro día");
}

// "Es miércoles"

Evaluamos el valor de la variable day. Si es igual a 1, se ejecutará el primer bloque de código. Si es igual a 2, se ejecutará el segundo bloque de código. Si es igual a 3, se ejecutará el tercer bloque de código. Si no se cumple ninguna de estas condiciones, se ejecutará el bloque de código dentro del default.

Elvis/Ternario

La estructura elvis o ternario es una forma abreviada de escribir una evaluación if-else. Es útil cuando queremos asignar un valor a una variable dependiendo de una condición determinada. Por ejemplo:

const age = 18;

const message = age >= 18 ? "Eres mayor de edad" : "Eres menor de edad";

console.log(message);

// "Eres mayor de edad"

Evaluamos si la variable age es mayor o igual que 18. Si se cumple esta condición, la variable message será igual a "Eres mayor de edad". Si no se cumple esta condición, la variable message será igual a "Eres menor de edad". Luego, estamos imprimiendo el valor de la variable message en la consola.

Conclusión

En JavaScript, las estructuras de control nos permiten tomar decisiones y ejecutar diferentes bloques de código en función de ciertas condiciones. En este artículo, hemos explorado estas estructuras y cómo utilizarlas para escribir código eficiente y claro.

Si quieres profundizar más sobre el tema, te recomiendo siempre revisar la documentación oficial, seguirme en redes sociales o suscribirte a la newsletter del blog para seguir aprendiendo. Enjoy the journey!

Fuentes

• Documentación oficial de JavaScript: https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores

• Ejemplos prácticos de estructuras de control en JavaScript: https://www.w3schools.com/js/js_if_else.asp

Los métodos de arreglos son funciones predefinidas que se utilizan para manipular y transformar los arreglos. Estos métodos son el pilar fundamental para trabajar de manera libre y eficiente con JavaScript.

forEach()

El método forEach() es una forma sencilla de recorrer todos los elementos de un arreglo y realizar una acción en cada uno de ellos. Este método ejecuta una función para cada elemento del arreglo.

La función proporcionada como argumento a forEach() recibe tres argumentos:

1. El valor del elemento actual

2. El índice del elemento actual

3. El arreglo que se está recorriendo

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// Output:
// "a"
// "b"
// "c"

map()

El método map() es una forma eficiente de transformar los elementos de un arreglo en otros elementos. Este método crea un nuevo arreglo con los resultados de la llamada a una función para cada elemento del arreglo.

La función proporcionada como argumento a map() recibe tres argumentos:

1. El valor del elemento actual

2. El índice del elemento actual

3. El arreglo que se está recorriendo

const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);

console.log(map1);

// Output: [2, 8, 18, 32]

filter()

El método filter() es una forma útil de filtrar los elementos de un arreglo y obtener solo aquellos que cumplen ciertas condiciones. Este método crea un nuevo arreglo con todos los elementos que cumplan la condición implementada en la función proporcionada.

La función proporcionada como argumento a filter() recibe tres argumentos:

1. El valor del elemento actual

2. El índice del elemento actual

3. El arreglo que se está recorriendo

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);

// Output: ["exuberant", "destruction", "present"]

reduce()

El método reduce() es una forma poderosa de reducir un arreglo a un solo valor. Este método aplica una función acumuladora que procesa cada elemento de un arreglo y devuelve un único valor.

La función proporcionada como argumento a reduce() recibe cuatro argumentos:

1. El acumulador

2. El valor del elemento actual

3. El índice del elemento actual

4. El arreglo que se está recorriendo

const array1 = [1, 2, 3, 4];

const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));

// Output: 10

find()

El método find() es una forma sencilla de encontrar el primer elemento que cumple cierta condición. Este método devuelve el valor del primer elemento del arreglo que cumple con la función de prueba proporcionada.

La función proporcionada como argumento a find() recibe tres argumentos:

1. El valor del elemento actual

2. El índice del elemento actual

3. El arreglo que se está recorriendo

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);

// Output: 12

findIndex()

El método findIndex() es una forma sencilla de encontrar el índice del primer elemento que cumple cierta condición. Este método devuelve el índice del primer elemento del arreglo que cumple con la función de prueba proporcionada.

La función proporcionada como argumento a findIndex() recibe tres argumentos:

1. El valor del elemento actual

2. El índice del elemento actual

3. El arreglo que se está recorriendo

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = element => element > 13;

console.log(array1.findIndex(isLargeNumber));

// Output: 3

every()

El método every() es una forma sencilla de comprobar si todos los elementos de un arreglo cumplen cierta condición. Este método comprueba si todos los elementos del arreglo pasan la prueba implementada por la función proporcionada.

La función proporcionada como argumento a every() recibe tres argumentos:

1. El valor del elemento actual

2. El índice del elemento actual

3. El arreglo que se está recorriendo

const array1 = [1, 30, 39, 29, 10, 13];

const isBelowThreshold = currentValue => currentValue < 40;

console.log(array1.every(isBelowThreshold));

// Output: true

some()

El método some() es una forma sencilla de comprobar si al menos un elemento de un arreglo cumple cierta condición. Este método comprueba si al menos un elemento del arreglo cumple con la prueba implementada por la función proporcionada.

La función proporcionada como argumento a some() recibe tres argumentos:

1. El valor del elemento actual

2. El índice del elemento actual

3. El arreglo que se está recorriendo

const array1 = [1, 2, 3, 4, 5];

const even = element => element % 2 === 0;

console.log(array1.some(even));

// Output: true

concat()

El método concat() se utiliza para fusionar dos o más arreglos en un solo arreglo. Este método no modifica los arreglos originales, sino que devuelve un nuevo arreglo que contiene los elementos de los arreglos originales.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = ['g', 'h', 'i'];

const newArray = array1.concat(array2, array3);

console.log(newArray);

// Output: ["a", "b", "c", "d", "e", "f", "g", "h", "i"]

slice()

El método slice() se utiliza para extraer una sección de un arreglo y devolver un nuevo arreglo con los elementos seleccionados. Este método no modifica el arreglo original.

El método slice() toma dos argumentos opcionales:

1. El índice de inicio (incluido)

2. El índice de fin (excluido)

const array1 = ['a', 'b', 'c', 'd', 'e'];

const newArray = array1.slice(1, 4);

console.log(newArray);

// Output: ["b", "c", "d"]

Espero que esta guía te haya resultado útil y que lograste comprender los métodos de arreglos en JavaScript. Si tienes alguna pregunta o comentario, ¡no dudes en escribirme!

Si quieres profundizar en iteradores clave, te recomiendo el artículo

Fuentes

• MDN Web Docs

• W3Schools

• JavaScript.info

forEach()

El método forEach() itera sobre los elementos de un arreglo y llama a una función para cada elemento y, a diferencia de los que veremos más adelante, no devuelve un nuevo arreglo. La sintaxis es la siguiente:

array.forEach((currentValue, index, arr) => {
  // código a ejecutar
});

donde:

• currentValue: El valor actual del elemento.

• index: El índice actual del elemento.

• arr: El arreglo que se está iterando.

Aquí hay un ejemplo de cómo usar forEach() para imprimir cada elemento de un arreglo:

const frutas = ["Manzana", "Banana", "Naranja"];

frutas.forEach((fruta) => {
  console.log(fruta);
});
// Manzana
// Banana
// Naranja

map()

El método map() itera sobre los elementos de un arreglo y devuelve un nuevo arreglo con los resultados de la función de retorno de llamada. La sintaxis es la siguiente:

const new_array = arr.map((currentValue, index, arr) => {
  // código a ejecutar
});

donde:

• currentValue: El valor actual del elemento.

• index: El índice actual del elemento.

• arr: El arreglo original.

Aquí hay un ejemplo de cómo usar map() para duplicar los valores de un arreglo:

const numeros = [1, 2, 3];

const doblados = numeros.map((numero) => {
  return numero * 2;
});

console.log(doblados);
// [2, 4, 6]

filter()

El método filter() itera sobre los elementos de un arreglo y devuelve un nuevo arreglo que contiene sólo los elementos que pasan una función de prueba. La sintaxis es la siguiente:

const new_array = arr.filter((currentValue, index, arr) => {
  // código a ejecutar
});

donde:

• currentValue: El valor actual del elemento.

• index: El índice actual del elemento.

• arr: El arreglo original.

Aquí hay un ejemplo de cómo usar filter() para obtener sólo los números pares de un arreglo:

const numeros = [1, 2, 3, 4, 5, 6];

const numerosPares = numeros.filter((numero) => {
  return numero % 2 === 0;
});

console.log(numerosPares);
// [2, 4, 6];

reduce()

El método reduce() itera sobre los elementos de un arreglo y devuelve un único valor que resulta de la función de retorno de llamada. La sintaxis es la siguiente:

const result =
  arr.reduce((accumulator, currentValue, index, arr) => {
    // código a ejecutar
  }, initialValue);

donde:

• accumulator: El valor acumulado.

• currentValue: El valor actual del elemento.

• index: El índice actual del elemento.

• arr: El arreglo original.

• initialValue (opcional): El valor inicial del acumulador.

Aquí hay un ejemplo de cómo usar reduce() para sumar los valores de un arreglo:

const numeros = [1, 2, 3, 4, 5];

const suma = numeros.reduce((acumulador, numero) => {
  return acumulador + numero;
}, 0);

console.log(suma);
// 15

Estos métodos son herramientas poderosas para iterar y operar con eficacia en arreglos. Recuerda que, a partir de ES6, se recomienda usar const en lugar de var para declarar variables que no cambiarán su valor. ¡Feliz programación!

Fuentes:

• w3schools.com

• MDN Web Docs