Lista de Métodos Más Usados en JavaScript: Mejora Tu Programación

Guia completa de JavaScript

Los métodos en JavaScript

  JavaScript

Los métodos en JavaScript son funciones integradas que nos permiten realizar acciones específicas en distintos tipos de datos, como cadenas, arrays, objetos, etc. Son fundamentales para manipular y transformar información de manera eficiente. Entender y dominar los métodos más comunes es clave para trabajar de manera productiva en JavaScript, ya que simplifican tareas complejas y optimizan el desarrollo.

¿Qué es un método en JavaScript?

En el mundo de la programación, un método es una función que pertenece a una clase específica. Cuando se trata de JavaScript, un método es una función puesta en un objeto o una serie de instrucciones para completar una tarea única.

Introducción a Bucles y Estructuras de Control

1. Método length

El método length en JavaScript devuelve la cantidad de elementos de un array o la longitud de una cadena de texto. Es útil para saber cuántos elementos tiene un array o cuántos caracteres hay en una cadena.

javascript
const numeros = [1, 2, 3, 4];
const palabra = "Hola";

console.log(numeros.length); 
// 4 (hay 4 elementos en el array)
console.log(palabra.length); 
// 4 (la palabra "Hola" tiene 4 letras)

2. Bucle for

El bucle for permite iterar sobre un array. Aquí recorremos el array letras e imprimimos cada elemento.

javascript
const letras = ['a', 'b', 'c', 'd'];

for (let i = 0; i < letras.length; i++) {
  console.log(letras[i]); 
  // Imprime cada letra del array
}

3. Bucle for...in

El bucle for...in permite iterar sobre las propiedades enumerables de un objeto. En cada iteración, accede a una propiedad del objeto y muestra su nombre y valor correspondiente en la consola.

javascript
// Definición de un objeto
const objeto = { a: 1, b: 2, c: 3 };

// Iteración sobre las propiedades del objeto
for (let propiedad in objeto) {
  console.log(propiedad + ': ' + objeto[propiedad]); 
  // Imprime el nombre y valor de cada propiedad
}

4. Bucle while

Usando el bucle while para imprimir los números del 0 al 4 en la consola. El bucle se ejecuta mientras el contador sea menor que 5, incrementando el contador en cada iteración.

javascript
let contador = 0;
while (contador < 5) {
  console.log(contador);
  contador++;
}

Manipulación de Arrays

5. Métodos forEach()

Cómo usar el método forEach() en un array en JavaScript para recorrer cada elemento del array y realizar una acción específica, en este caso, imprimir cada fruta en la consola.

javascript
let frutas = ["manzana", "banana", "pera"];

// Recorrer cada elemento del array e imprimirlo
frutas.forEach(function(fruta) {
  console.log(fruta);
});

// Añadir un elemento al arreglo
frutas.push("naranja");

// Eliminar el último elemento del arreglo
frutas.pop();

6. Método map()

El método map() en JavaScript se utiliza para aplicar una función a cada elemento del array numeros. Se duplica cada número del array original, resultando en la impresión del nuevo array [2, 4, 6].

javascript
let numeros = [1, 2, 3];
// Aplicar una función a cada elemento del arreglo
let duplicados = numeros.map(numero => numero * 2);
console.log(duplicados);
// Imprime: [2, 4, 6]

7. Método filter()

El método filter() en JavaScript se utiliza para filtrar los elementos de un array según una condición.

  1. Filtrar los números impares del array numeros, resultando en la impresión del nuevo array [1, 3, 5].
javascript
let numeros = [1, 2, 3, 4, 5];
// Filtrar elementos de un arreglo
let impares = numeros.filter(numero => numero % 2 !== 0);
console.log(impares);
// Imprime: [1, 3, 5]
  1. Retornar solo el elemento “manzana” que existe en el array frutas
javascript
const frutas = ["manzana", "banana", "pera", "uva"];
// Filtrar las ocurrencias de "manzana" en el array de frutas
const manzanas = frutas.filter(fruta => fruta === "manzana");
console.log(manzanas);
// Resultado: ["manzana"]
  1. Retornar todos los elementos del array excepto “pera”.
javascript
// Filtrar todas las frutas excepto "pera"
const frutasExceptoPera = frutas.filter(fruta => fruta !== "pera");
console.log(frutasExceptoPera);
// Resultado: ["manzana", "banana", "uva"]

8. Método reduce()

El método reduce() en JavaScript se utiliza para reducir un array a un único valor. En este caso, se suman todos los números del array numeros utilizando la función de reducción, comenzando con un valor inicial de 0, resultando en la impresión del valor total de 15.

javascript
let numeros = [1, 2, 3, 4, 5];
// Reducir el arreglo a un único valor
let suma = numeros.reduce((total, numero) => total + numero, 0);
console.log(suma);
// Imprime: 15

9. Método some()

El método some() se utiliza en JavaScript para verificar si al menos un elemento de un array cumple con cierta condición especificada en una función de retorno. Itera sobre cada elemento del array y devuelve true si al menos un elemento cumple con la condición, y false si ningún elemento la cumple. Este método es útil cuando se desea verificar si al menos un elemento de un array satisface ciertos criterios sin necesidad de iterar manualmente.

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

// Verificar si al menos un número es mayor que 3
const resultado = numeros.some(numero => numero > 3);

console.log(resultado);
// Resultado: true, ya que 4 y 5 son mayores que 3

10. Método every()

El método every() se utiliza en JavaScript para verificar si todos los elementos de un array cumplen con cierta condición especificada en una función de retorno. Itera sobre cada elemento del array y devuelve true si todos los elementos cumplen con la condición, o false en caso contrario. Este método es útil cuando se desea verificar si todos los elementos de un array satisfacen ciertos criterios.

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

// Verificar si todos los números son mayores que 0
const todosMayoresQueCero = numeros.every(numero => numero > 0);

console.log(todosMayoresQueCero); 
// Resultado: true, ya que todos los números son mayores que 0

11. Método find()

El método find() se utiliza en JavaScript para encontrar el primer elemento en un array que cumple con cierta condición especificada en una función de retorno. Itera sobre cada elemento del array y devuelve el primer elemento que cumple con la condición, o undefined si ningún elemento la cumple. Este método es útil cuando se desea encontrar un elemento específico en un array basado en ciertos criterios.

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

// Encontrar el primer número mayor que 3
const encontrado = numeros.find(numero => numero > 3);

console.log(encontrado); 
// Resultado: 4, ya que es el primer número mayor que 3

12. Método findIndex()

El método findIndex() en JavaScript se usa para encontrar el índice del primer elemento en un array que cumple con una condición específica. El método devuelve -1 si no se encuentra ningún elemento que cumpla con la condición.

javascript
const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Encontrar el índice del primer número par
const indice = numeros.findIndex(numero => numero % 2 === 0);

console.log(indice);
// Salida: 1

// Otro ejemplo del Método findIndex()
const indice2 = numeros.findIndex(numero => numero > 5);

console.log(indice2);
// Salida: 5

13. Método indexOf()

Cómo utilizar el método indexOf() en JavaScript para encontrar la posición de una palabra específica dentro de una cadena de texto. En este caso, se busca la palabra "perro" dentro de la frase "El perro come comida", y se imprime la posición de la palabra encontrada.

javascript
let frase = "El perro come comida";
// Encontrar la posición de una palabra en la frase
console.log(frase.indexOf("perro")); 
// Imprime: 3

14. Método slice()

El método slice() en JavaScript permite extraer una parte específica de una cadena de texto. Se especifica el índice inicial (0) y el índice final (10) de la porción que se desea extraer de la cadena "JavaScript es divertido", lo que resulta en la impresión de "JavaScript".

javascript
let frase = "JavaScript es divertido";
// Extraer una parte de la cadena
console.log(frase.slice(0, 10));
// Imprime: JavaScript

15. Método concat()

El método concat() se utiliza para concatenar dos o más arrays en uno nuevo.

javascript
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

// Concatenar los tres arrays en uno nuevo
const newArray = array1.concat(array2, array3);

console.log(newArray);
// Resultado: [1, 2, 3, 4, 5, 6, 7, 8, 9]

16. El método push()

El método push() agrega uno o más elementos al final de un array y devuelve la nueva longitud del array. Modifica el array original.

javascript
// Declarar un array de frutas
let frutas = ["uva", "manzana", "banana", "naranja"];

// Agregar un elemento al final del array
frutas.push("sandía");

console.log("Fruta agregada al final del array:", frutas); 
// Resultado: ["uva", "manzana", "banana", "naranja", "sandía"]

17. Método pop()

El método pop() en JavaScript se utiliza para eliminar el último elemento de un array. En este caso, se elimina el número 3 del array numeros, resultando en la impresión del nuevo array [1, 2].

javascript
let numeros = [1, 2, 3];
// Eliminar el último elemento del arreglo
numeros.pop();
console.log(numeros);
// Imprime: [1, 2]

18. Método shift()

El método shift() en JavaScript se utiliza para eliminar el primer elemento de un array. En este caso, se elimina el número 1 del array numeros, resultando en la impresión del nuevo array [2, 3].

javascript
let numeros = [1, 2, 3];
// Eliminar el primer elemento del arreglo
numeros.shift();
console.log(numeros);
// Imprime: [2, 3]

19. Método unshift()

El método unshift() en JavaScript se utiliza para añadir un elemento al inicio de un array. En este caso, se agrega el número 1 al array numeros, resultando en la impresión del nuevo array [1, 2, 3].

javascript
let numeros = [2, 3];
// Añadir un elemento al inicio del arreglo
numeros.unshift(1);
console.log(numeros);
// Imprime: [1, 2, 3]

20. Método splice()

El método splice() modifica el contenido de un array eliminando o reemplazando elementos existentes y/o agregando nuevos elementos en su lugar. En este caso, se utiliza splice() para eliminar un elemento específico del array.

javascript
let array = [1, 2, 3, 4, 5];
const indiceAEliminar = 2; 
// Índice del elemento a eliminar

// Eliminar el elemento en el índice especificado
array.splice(indiceAEliminar, 1);

console.log(array); 
// Resultado: [1, 2, 4, 5]

21. Método reverse()

El método reverse() en JavaScript se utiliza para invertir el orden de los elementos en un array. Los números en el array numeros se invierten, resultando en la impresión del nuevo array [3, 2, 1].

javascript
let numeros = [1, 2, 3];
// Invertir el orden de los elementos en el arreglo
numeros.reverse();
console.log(numeros);
// Imprime: [3, 2, 1]

22. Método sort()

El método sort() en JavaScript se utiliza para ordenar los elementos de un array alfabéticamente. En este caso, se ordenan las frutas en el array frutas, resultando en la impresión del nuevo array ["manzana", "naranja", "uva"].

javascript
let frutas = ["naranja", "manzana", "uva"];
// Ordenar elementos de un arreglo
frutas.sort();
console.log(frutas);
// Imprime: ["manzana", "naranja", "uva"]

23. Método includes()

El método includes() en JavaScript se utiliza para verificar si un elemento está presente en un array. En este caso, se verifica si el número 2 está presente en el array numeros, lo que imprime true, y se verifica si el número 4 está presente, lo que imprime false.

javascript
let numeros = [1, 2, 3];
// Verificar si un elemento está en el arreglo
console.log(numeros.includes(2)); // Imprime: true
console.log(numeros.includes(4)); // Imprime: false

24. Método join()

El método join() en JavaScript permite combinar los elementos de un array en una cadena de texto. Los elementos del array frutas se unen utilizando ", " como separador, lo que resulta en la impresión de la cadena "manzana, naranja, uva".

javascript
let frutas = ["manzana", "naranja", "uva"];
// Unir elementos de un arreglo en una cadena
let lista = frutas.join(", ");
console.log(lista);
// Imprime: manzana, naranja, uva

Manipulación de Cadenas (Strings)

25. Método replace()

El método replace() en JavaScript permite reemplazar una parte específica de una cadena de texto. Se busca la palabra "divertido" en la frase "Aprender es divertido" y se reemplaza por "genial", lo que resulta en la impresión de "Aprender es genial".

javascript
let frase = "Aprender es divertido";
// Reemplazar parte de la cadena
console.log(frase.replace("divertido", "genial"));
// Imprime: Aprender es genial

26. Método split()

El método split() en JavaScript permite dividir una cadena de texto en un array. La cadena original "manzana,naranja,uva" se divide en tres elementos del array ["manzana", "naranja", "uva"] utilizando la coma como separador.

javascript
let lista = "manzana,naranja,uva";
// Dividir una cadena en un arreglo
let frutas = lista.split(",");
console.log(frutas);
// Imprime: ["manzana", "naranja", "uva"]

Objetos y Métodos de Objetos

27. El método toString()

El método toString() devuelve una cadena de caracteres representando el array especificado y sus elementos.

javascript
const array1 = [1, 2, 'a', 'HTML'];

console.log(array1.toString());
// Resultado: "1,2,a,HTML"

28. Anular el método toString()

Es posible anular el método toString() en un objeto para proporcionar una representación de cadena personalizada.

javascript
let persona = {
  nombre: "Juan",
  edad: 25,
  toString: function() {
      return this.nombre + " (" + this.edad + " años)";
  }
};

let cadena = persona.toString();

console.log(cadena);
// Salida: "Juan (25 años)"

29. Método values()

El método values() en JavaScript se usa para obtener un array con los valores de las propiedades enumerables de un objeto. El orden de los valores en el array es el mismo que el orden de las propiedades en el objeto.

javascript
const persona = {
  nombre: "Juan",
  edad: 25,
  ciudad: "Bogotá"
};

const valores = Object.values(persona);

console.log(valores);
// Salida: ["Juan", 25, "Bogotá"]

30. Método Array.isArray()

El método Array.isArray() verifica si un valor es un array y devuelve true si lo es, o false si no lo es. Sirve para saber si una variable contiene una lista (array) o no.

javascript
const persona = { nombre: "Juan", edad: 30, ciudad: "Bogotá" };
const llaves = Object.keys(persona);
console.log(llaves); 
// Salida: ['nombre', 'edad', 'ciudad']

Aquí, frutas es un array, pero numero no, por eso devuelve true y false, respectivamente.

31. Método Array.of()

El método Array.of() crea un nuevo array con un número variable de elementos, pasados como argumentos. A diferencia del constructor de arrays, Array.of() no crea un array con un solo elemento de un tamaño específico, sino que crea un array con los elementos que le proporcionas.

Ejemplo con arrays

javascript
const numeros = Array.of(1, 2, 3, 4, 5);
console.log(numeros); 
// Salida: [1, 2, 3, 4, 5]

Ejemplo con diferentes tipos de elementos

javascript
const mezcla = Array.of("Hola", 42, true, null);
console.log(mezcla);
// Salida: ['Hola', 42, true, null]

Ejemplo con un solo número

javascript
const unElemento = Array.of(5);
console.log(unElemento); // [5]

En este caso, Array.of(5) crea un array con el número 5 como único elemento, mientras que el constructor Array(5) crearía un array vacío con una longitud de 5.

32. Método Array.from()

El método Array.from() crea un nuevo array a partir de un objeto iterable o similar a un array. Puedes usarlo para convertir strings, arrays similares, o incluso aplicar una función de transformación a los elementos.

javascript
const cadena = "Hola";
const arrayDesdeCadena = Array.from(cadena);

console.log(arrayDesdeCadena); 
// Salida: ['H', 'o', 'l', 'a']

En este caso, Array.from() convierte la cadena “Hola” en un array de caracteres.

Ejemplo con una función de transformación

javascript
const numeros = [1, 2, 3, 4];
const cuadrados = Array.from(numeros, x => x ** 2);

console.log(cuadrados); 
// Salida: [1, 4, 9, 16]

Aquí, se crea un nuevo array con los cuadrados de los números en el array original.

33. Método Object.keys() o Array.keys()

El método Object.keys() te permite obtener las propiedades de un objeto como un array de strings. Piensa en un objeto como una lista de datos donde cada dato tiene un nombre (la “llave”) y un valor. Object.keys() solo te da los nombres de esas propiedades, no los valores.

javascript
const persona = { nombre: "Juan", edad: 30, ciudad: "Bogotá" };
const llaves = Object.keys(persona);
console.log(llaves); 
// Salida: ['nombre', 'edad', 'ciudad']

34. Método Object.entries() o Array.entries()

El método Object.entries() devuelve un array de arrays, donde cada sub-array contiene un par [llave, valor] de un objeto. Es útil para obtener tanto las llaves como los valores de un objeto y trabajar con ellos en conjunto.

javascript
const persona = { nombre: "Any", edad: 25, ciudad: "Medellín" };
console.log(Object.entries(persona));
// Salida: [['nombre', 'Any'], ['edad', 25], ['ciudad', 'Medellín']]

35. Método includes() o Array.includes()

El método includes() verifica si un array o una cadena de texto contiene un elemento específico y devuelve true si lo encuentra, o false si no. Es útil para buscar valores dentro de arrays o strings.

Ejemplo con arrays:

javascript
const frutas = ["manzana", "pera", "naranja"];
console.log(frutas.includes("pera")); // true
console.log(frutas.includes("mango")); // false

Ejemplo con strings:

javascript
const saludo = "Hola mundo";
console.log(saludo.includes("Hola")); // true
console.log(saludo.includes("Adiós")); // false

36. Método lastIndexOf()

El método lastIndexOf() busca un elemento dentro de un array o una cadena y devuelve la última posición en la que aparece. Si no lo encuentra, devuelve -1. Es útil cuando un elemento puede aparecer varias veces y necesitas su última posición.

Ejemplo con arrays:

javascript
const numeros = [1, 2, 3, 2, 4];
console.log(numeros.lastIndexOf(2)); 
// 3 (última aparición del 2)

Ejemplo con strings:

javascript
const texto = "abracadabra";
console.log(texto.lastIndexOf("a"));
// 10 (última posición de 'a')

37. Método copyWithin()

El método copyWithin() copia una sección de un array dentro del mismo array, sin cambiar su longitud. Funciona indicando la posición de destino y los índices de la porción que quieres copiar.

javascript
const numeros = [1, 2, 3, 4, 5];
numeros.copyWithin(0, 3);
// Copia desde el índice 3 al índice 0
console.log(numeros); 
// Salida: [4, 5, 3, 4, 5]

En este caso, copia los elementos desde el índice 3 en adelante (4 y 5) al inicio del array (índice 0).

Otro ejemplo

javascript
const frutas = ["manzana", "banana", "cereza", "durazno", "kiwi"];
frutas.copyWithin(1, 3); // Copia desde el índice 3 al índice 1

console.log(frutas); 
// Salida: ["manzana", "durazno", "kiwi", "durazno", "kiwi"]

En este caso, los elementos desde el índice 3 (“durazno” y “kiwi”) se copian a partir del índice 1, sobrescribiendo “banana” y manteniendo “manzana” al principio.

38. Método fill()

El método fill() se utiliza para llenar todos los elementos de un array con un valor estático, desde un índice inicial hasta un índice final (no inclusivo). Si no se especifican índices, llenará todo el array. Este método modifica el array original.

javascript
const numeros = [1, 2, 3, 4, 5];
numeros.fill(0); // Rellena todo el array con 0

console.log(numeros); 
// Salida: [0, 0, 0, 0, 0]

Ejemplo con índices

javascript
const frutas = ["manzana", "banana", "cereza", "durazno"];
frutas.fill("naranja", 1, 3); // Rellena desde el índice 1 hasta el 3 (no inclusivo)

console.log(frutas); 
// Salida: ["manzana", "naranja", "naranja", "durazno"]

En este caso, fill() reemplaza “banana” y “cereza” con “naranja”, pero deja “manzana” y “durazno” sin cambios.

39. Método flat

El método flat() se utiliza para aplanar un array anidado, es decir, convierte un array de arrays en un solo array de un nivel específico. Puedes especificar el nivel de profundidad que deseas aplanar; si no se proporciona, el valor predeterminado es 1.

javascript
const numerosAnidados = [1, [2, 3], [4, [5, 6]]];
const aplanado = numerosAnidados.flat();

console.log(aplanado); 
// Salida: [1, 2, 3, 4, [5, 6]]

Ejemplo con más niveles de profundidad

Si tienes un array anidado con varios niveles, puedes aplanarlo más profundamente:

javascript
const masAnidado = [1, [2, [3, [4]]]];
const aplanadoCompleto = masAnidado.flat(2); // Aplana 2 niveles

console.log(aplanadoCompleto); 
// Salida: [1, 2, 3, 4]

Ejemplo con un array de strings:

javascript
const palabrasAnidadas = [["Hola", "mundo"], ["JavaScript", "es"], ["genial"]];
const palabrasAplanadas = palabrasAnidadas.flat();

console.log(palabrasAplanadas); 
// Salida: ['Hola', 'mundo', 'JavaScript', 'es', 'genial']

El método flat() es útil para simplificar estructuras de datos anidadas y obtener un array más manejable.

40. Método flatMap

El método flatMap() combina los efectos de map() y flat(). Primero, aplica una función a cada elemento de un array y luego aplana el resultado en un solo nivel. Es útil para transformar datos y eliminar niveles de anidación en un array.

javascript
const numeros = [1, 2, 3, 4];
const resultado = numeros.flatMap(x => [x, x * 2]);

console.log(resultado); 
// Salida: [1, 2, 2, 4, 3, 6, 4, 8]

En este caso, flatMap() duplica cada número y lo coloca en un nuevo array, eliminando la anidación de arrays.

Ejemplo con un array anidado

javascript
const arraysAnidados = [[1, 2], [3, 4], [5]];
const resultadoAplanado = arraysAnidados.flatMap(x => x);

console.log(resultadoAplanado); 
// Salida: [1, 2, 3, 4, 5]

Aquí, se aplana un array de arrays en un solo nivel.

Ejemplo con strings

Supongamos que tienes un array de frases y quieres crear un array con todas las palabras en esas frases.

javascript
const frases = ["Hola mundo", "JavaScript es genial", "FlatMap es útil"];
const palabras = frases.flatMap(frase => frase.split(" "));

console.log(palabras);
// Salida: ['Hola', 'mundo', 'JavaScript', 'es', 'genial', 'FlatMap', 'es', 'útil']
  Explicación

Función map(): Para cada frase, se utiliza split(” ”) para dividirla en palabras, lo que devuelve un array de palabras. Función flat(): Luego, flatMap() aplana todos esos arrays de palabras en un único array.

De esta forma, obtienes un array que contiene todas las palabras de las frases originales, sin ninguna anidación.

41. Método reduceRight()

El método reduceRight() funciona igual que reduce(), pero recorre el array de derecha a izquierda (del último al primer elemento). Acumula los valores según una función que defines y devuelve un único valor al final.

javascript
const numeros = [1, 2, 3, 4];
const resultado = numeros.reduceRight((acumulador, actual) => acumulador - actual);
console.log(resultado); // -2 (4 - 3 - 2 - 1)

Aquí, reduceRight() empieza desde el último número (4) y va restando hacia el primero.

Otro ejemplo

javascript
const palabras = ["mundo", " ", "Hola"];
const resultado = palabras.reduceRight((acumulador, actual) => acumulador + actual);
console.log(resultado); // "Hola mundo"

En este caso, reduceRight() empieza desde el último elemento (“Hola”) y concatena hacia el primero, formando la frase “Hola mundo”.

42. Método at()

El método at() permite acceder a un elemento de un array o una cadena utilizando un índice. Acepta índices negativos, lo que significa que puedes acceder a elementos desde el final del array o cadena. Es útil para obtener elementos sin preocuparte por la longitud total.

Ejemplo con arrays

javascript
const numeros = [10, 20, 30, 40, 50];

console.log(numeros.at(0));  // 10 (primer elemento)
console.log(numeros.at(-1)); // 50 (último elemento)

Ejemplo con strings:

javascript
const texto = "Hola mundo";

console.log(texto.at(1));  // 'o' (segundo carácter)
console.log(texto.at(-2)); // 'd' (penúltimo carácter)

En estos ejemplos, at() facilita el acceso a los elementos y caracteres tanto desde el inicio como desde el final.

43. Objetos

La creación de un objeto persona en JavaScript con propiedades como nombre y edad, así como un método saludar() que imprime un saludo personalizado utilizando las propiedades del objeto.

javascript
let persona = {
  nombre: "Juan",
  edad: 30,
  saludar: function() {
      console.log("Hola, soy " + this.nombre + " y tengo " + this.edad + " años.");
  }
};

// Acceder a las propiedades y métodos del objeto
console.log(persona.nombre); // Imprime: Juan
persona.saludar(); 
// Imprime: Hola, soy Juan y tengo 30 años.

Temporizadores y Métodos de Tiempo

44. setTimeout()

Se utiliza para ejecutar una función después de que haya transcurrido un tiempo específico (en milisegundos).

Se define una función llamada saludar() que simplemente imprime en la consola el mensaje ‘¡Hola después de 2 segundos!’. Luego, se llama a la función setTimeout() con dos argumentos: la función saludar que se ejecutará después de que haya transcurrido el tiempo especificado, y el tiempo en milisegundos (en este caso, 2000 milisegundos, es decir, 2 segundos).

javascript
// Función que se ejecutará después de 2 segundos
function saludar() {
  console.log('¡Hola después de 2 segundos!');
}

// Llamar a la función después de 2 segundos
setTimeout(saludar, 2000);

45. setInterval()

se utiliza para ejecutar una función repetidamente, cada cierto intervalo de tiempo especificado (en milisegundos)

Se define una función llamada mostrarMensaje() que imprime en la consola el mensaje ‘Mensaje repetido cada segundo’. Luego, se llama a la función setInterval() con dos argumentos: la función mostrarMensaje que se ejecutará repetidamente, y el intervalo de tiempo en milisegundos (en este caso, 1000 milisegundos, es decir, 1 segundo).

javascript
// Función que se ejecutará cada segundo
function mostrarMensaje() {
  console.log('Mensaje repetido cada segundo');
}

// Llamar a la función cada segundo
setInterval(mostrarMensaje, 1000);

Solicitudes HTTP y Promesas

46. Método fetch()

El método fetch() es una función de JavaScript para realizar peticiones HTTP asíncronas. Permite obtener recursos (como datos JSON) de servidores y es una alternativa moderna a XMLHttpRequest. Utiliza promesas, lo que facilita el manejo de respuestas y errores.

Cómo realizar una solicitud HTTP utilizando el método fetch() en JavaScript

Se realiza una solicitud a la URL especificada y se encadenan promesas para manejar la respuesta. En el primer then(), se verifica si la respuesta es exitosa y se parsea la respuesta como JSON. En el segundo then(), se manipulan los datos obtenidos. En el catch(), se manejan los errores que puedan ocurrir durante la solicitud.

javascript
// URL a la que haremos la solicitud
const url = 'https://jsonplaceholder.typicode.com/posts/1';

// Realizar la solicitud utilizando fetch
fetch(url)
  .then(response => {
      // Verificar si la respuesta es exitosa
      if (!response.ok) {
          throw new Error('No se pudo obtener la respuesta');
      }
      // Parsear la respuesta como JSON
      return response.json();
  })
  .then(data => {
      // Manipular los datos obtenidos
      console.log(data);
  })
  .catch(error => {
      // Manejar errores
      console.error('Error:', error);
  });

Método fetch() usando async/await y try/catch

Se utiliza async/await y try/catch para realizar una solicitud HTTP utilizando el método fetch() en JavaScript. La función obtenerDatos() se declara como asíncrona (async), lo que permite utilizar await dentro de ella. Dentro del bloque try, se realiza la solicitud a la API y se manejan los errores utilizando throw y catch. Si la solicitud es exitosa, se convierte la respuesta a formato JSON y se imprimen los datos obtenidos. Si hay algún error durante la ejecución, se captura en el bloque catch y se imprime el mensaje de error correspondiente. Esto proporciona una forma más concisa y legible de trabajar con solicitudes HTTP asincrónicas en JavaScript.

javascript
async function obtenerDatos() {
  try {
      // Hacer la solicitud a la API usando fetch
      const respuesta = await fetch('https://jsonplaceholder.typicode.com/posts/1');

      // Verificar si la respuesta es exitosa
      if (!respuesta.ok) {
          throw new Error('No se pudo obtener la respuesta');
      }

      // Convertir la respuesta a formato JSON
      const datos = await respuesta.json();

      // Imprimir los datos obtenidos
      console.log('Datos:', datos);
  } catch (error) {
      // Manejar errores
      console.error('Error:', error.message);
  }
}

// Llamar a la función para obtener los datos
obtenerDatos();

Usando Axios para hacer una solicitud HTTP de tipo (GET)

  Explicación

Se utiliza la biblioteca Axios para realizar una solicitud HTTP de tipo GET en JavaScript. Se declara una función asincrónica obtenerDatos() que utiliza async/await y try/catch para manejar la solicitud y cualquier error que pueda ocurrir. Dentro del bloque try, se utiliza axios.get() para hacer la solicitud a la URL especificada. Si la solicitud es exitosa, se imprime la respuesta en la consola. Si hay algún error durante la ejecución, se captura en el bloque catch y se imprime el mensaje de error correspondiente.

Axios es una biblioteca popular para realizar solicitudes HTTP en JavaScript debido a su facilidad de uso y soporte para promesas y async/await.

javascript
// Asegúrate de haber importado Axios antes de usarlo
// import axios from 'axios';

async function obtenerDatos() {
  try {
      // Hacer la solicitud a la API usando Axios
      const respuesta = await axios.get('https://jsonplaceholder.typicode.com/posts/1');

      // Imprimir los datos obtenidos
      console.log('Datos:', respuesta.data);
  } catch (error) {
      // Manejar errores
      console.error('Error:', error.message);
  }
}

// Llamar a la función para obtener los datos
obtenerDatos();