Guía Completa de JavaScript: Desde los Fundamentos hasta Conceptos Avanzados

Guia completa de JavaScript

JavaScript

Es un lenguaje de programación que permite agregar interactividad a las páginas web. Se usa para crear elementos dinámicos como menús, botones, animaciones, validación de formularios, y comunicación con servidores, sin recargar la página. También se utiliza para desarrollar aplicaciones web y móviles, y con Node.js, se puede usar en el backend para crear servidores.

Las variables

Las variables son una estructura de datos que asigna un nombre representativo a un valor. Pueden contener datos de cualquier tipo. En JavaScript, puedes declarar variables usando var, let o const, y cada una tiene diferentes reglas y comportamientos en cuanto a alcance y mutabilidad.

var: Declara una variable que tiene un alcance a nivel de función o global, dependiendo de dónde se declare.
let: Declara una variable con un alcance de bloque, lo que significa que solo está disponible dentro del bloque donde se declara.
const: Declara una variable cuyo valor no puede ser reasignado después de su inicialización. También tiene un alcance de bloque.

Ejemplo de declaración de variables en JavaScript:

    var nombre = "Juan"; // Variable con var
    let edad = 30;       // Variable con let
    const ciudad = "Madrid"; // Variable con const

    console.log(nombre); // Imprime: Juan
    console.log(edad);   // Imprime: 30
    console.log(ciudad); // Imprime: Madrid

1. Variables y Tipos de Datos

JavaScript tiene siete tipos primitivos:

Números: Representan valores numéricos, como 5 o 3.14.
Cadenas: Secuencias de caracteres entre comillas dobles (” ”), simples (’ ’) o backticks (`).
Booleanos: Valores lógicos, true o false.
null: Indica la ausencia intencional de valor.
undefined: Valor asignado a variables no inicializadas o resultados de operaciones sin valor significativo.
BigInt: Permite operaciones en números grandes que superan el rango de Number.
Símbolos: Introducidos en ES6, representan valores únicos que no se repiten.

    // Declaración de variables
    let nombre = "Juan";
    const PI = 3.14;

    // Tipos de datos
    let numero = 10; // Número entero
    let decimal = 3.14; // Número decimal
    let texto = "Hola Mundo"; // Cadena de texto
    let esVerdadero = true; // Booleano
    let arreglo = [1, 2, 3, 4]; // Arreglo
    let objeto = { nombre: "Juan", edad: 30 }; // Objeto

2. Funciones

Una función puede tomar parámetros y realizar una tarea específica. En este caso, la función saludar recibe un nombre y muestra un saludo personalizado en la consola.

    // Definición de una función
    function saludar(nombre) {
        console.log(`¡Hola, ${nombre}!`); 
        // Uso de template literals para mejorar legibilidad
    }

    // Llamada a la función
    saludar("Juan"); 
    // Imprime: ¡Hola, Juan!

3. Condicionales

Los condicionales permiten tomar decisiones basadas en una condición. Aquí usamos if…else para verificar si la variable edad es mayor o igual a 18 y mostrar un mensaje adecuado.

    let edad = 18;

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

4. Bucle `for`

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

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

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

5. 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.

    // 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
    }

6. 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.

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

7. 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.

    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();

8. Objetos y Métodos de 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.

    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.

9. Métodos de Cadena de Texto

Los métodos de cadena de texto en JavaScript permiten manipular y obtener información sobre cadenas. Aquí se muestran algunos ejemplos comunes:

    let texto = "Hola Mundo";

    // Convertir a mayúsculas
    console.log(texto.toUpperCase()); 
    // Imprime: HOLA MUNDO

    // Convertir a minúsculas
    console.log(texto.toLowerCase()); 
    // Imprime: hola mundo

    // Obtener la longitud del texto
    console.log(texto.length); 
    // Imprime: 10

10. 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.

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

11. 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".

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

12. 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".

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

13. 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.

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

14. 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".

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

15. Método `push()`

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

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

16. 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].

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

17. 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].

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

18. 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].

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

19. 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.

    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

20. 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"].

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

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].

    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 `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].

    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]

23. Método `filter()`

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

Filtrar los números impares del array numeros, resultando en la impresión del nuevo array [1, 3, 5].

    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]

Retornar solo el elemento “manzana” que existe en el array frutas

    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"]

Retornar todos los elementos del array excepto “pera”.

    // Filtrar todas las frutas excepto "pera"
    const frutasExceptoPera = frutas.filter(fruta => fruta !== "pera");
    console.log(frutasExceptoPera);
    // Resultado: ["manzana", "banana", "uva"]

24. 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.

    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

25. 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.

    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

26. 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.

    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

27. 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.

    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

28. Método `concat()`

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

    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]

29. El método `toString()`

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

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

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

30. Convertir un número a una cadena

    let numero = 123;
    let cadena = numero.toString();

    console.log(cadena);
    // Salida: "123"

31. Convertir una fecha a una cadena

    let fecha = new Date();
    let cadena = fecha.toString();

    console.log(cadena);
    // Salida: "Mon Apr 09 2024 20:21:12 GMT-0500 (Colombia Standard Time)"

32. Convertir una función a una cadena

    function saludar() {
        console.log("¡Hola!");
    }

    let cadena = saludar.toString();

    console.log(cadena);
    // Salida: "function saludar() { console.log('¡Hola!'); }"

33. Convertir un objeto a una cadena

    let objeto = {
        nombre: "Juan",
        edad: 25
    };

    let cadena = objeto.toString();
    console.log(cadena); 
    // Salida: "[object Object]"

34. Anular el método `toString()`

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

    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)"

35. 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.

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

    const valores = Object.values(persona);

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

36. 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.

    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

25. Funciones de Flecha

Las funciones flecha en JavaScript proporcionan una forma más concisa de escribir funciones. A continuación se muestra una comparación entre una función normal y una función flecha, ambas realizando la misma operación de suma de dos números a y b.

    // Función normal
    function suma(a, b) {
        return a + b;
    }

    // Función flecha
    let suma = (a, b) => a + b;

26. Template String

Los template strings en JavaScript permiten incrustar variables y expresiones dentro de una cadena de texto utilizando ${}. A continuación, se muestra un saludo personalizado con el nombre y la edad de una persona, usando las variables nombre y edad.

    let nombre = "Juan";
    let edad = 30;

    // Uso de template strings
    console.log(`Hola, mi nombre es ${nombre} y tengo ${edad} años.`);

27. Spread Operator

El uso del operador de propagación (spread operator) en JavaScript permite combinar múltiples arrays en uno solo de manera concisa. A continuación, se combinan los arrays numeros y otrosNumeros en un nuevo array todosLosNumeros, resultando en la impresión del array combinado [1, 2, 3, 4, 5, 6].

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

    // Combinar arreglos
    let todosLosNumeros = [...numeros, ...otrosNumeros];
    console.log(todosLosNumeros);
    // Imprime: [1, 2, 3, 4, 5, 6]

28. Destructuring

El uso de la destructuración (destructuring) en JavaScript permite extraer propiedades de un objeto de manera más concisa. En el siguiente ejemplo, se extraen las propiedades nombre y edad del objeto persona, lo que permite acceder a estos valores de forma directa, resultando en la impresión de “Juan 30”.

    let persona = { nombre: "Juan", edad: 30 };

    // Destructuring de objeto
    let { nombre, edad } = persona;
    console.log(nombre, edad);
    // Imprime: Juan 30

29. Parámetros de función predeterminados

El uso de parámetros de función predeterminados en JavaScript permite especificar valores predeterminados para los parámetros de una función. En el siguiente ejemplo, la función greet() tiene un parámetro name con un valor predeterminado de "Urian". Si no se proporciona ningún argumento al llamar a la función, se utilizará el valor predeterminado "Urian".

    function greet(name = "Urian") {
        return `Hola, ${name}!`;
    }

30. Operador Ternario

El operador ternario en JavaScript se utiliza para asignar un valor a una variable basado en una condición. La sintaxis general es condición ? valorSiVerdadero : valorSiFalso. En el siguiente ejemplo, se asigna el valor "Caro" a la variable mensaje si precio es mayor que 50; de lo contrario, se asigna "Barato". En este caso, dado que el precio es 100, el mensaje impreso es "Caro".

    let precio = 100;
    let mensaje = precio > 50 ? "Caro" : "Barato";

    console.log(mensaje); 
    // Imprime: Caro

31. Asignación de Destructuración

Cómo realizar la asignación de destructuración en JavaScript para extraer propiedades específicas de un objeto. La destructuración permite extraer y asignar valores de un objeto a variables con nombres coincidentes. En el siguiente ejemplo, se extraen las propiedades nombre, edad, y ciudad del objeto persona, permitiendo acceder a estos valores de manera directa.

    // Objeto con información de una persona
    const persona = {
        nombre: 'Juan',
        edad: 30,
        ciudad: 'Madrid'
    };

    // Asignación de destructuración para extraer propiedades del objeto
    const { nombre, edad, ciudad } = persona;

    // Mostrar los valores extraídos
    console.log(nombre); // Imprime: Juan
    console.log(edad); // Imprime: 30
    console.log(ciudad); // Imprime: Madrid

32. Operador de Propagación para la Clonación de Objetos

Cómo clonar un objeto en JavaScript utilizando el operador de propagación (...). Al usar este operador, se crea una copia del objeto personaOriginal llamada personaClon, permitiendo tener dos objetos independientes con las mismas propiedades y valores. Esto es útil para evitar mutaciones no deseadas en el objeto original.

    // Objeto original
    const personaOriginal = {
        nombre: 'Juan',
        edad: 30,
        ciudad: 'Madrid'
    };

    // Clonar el objeto utilizando el operador de propagación
    const personaClon = { ...personaOriginal };

    // Modificar una propiedad del objeto clonado
    personaClon.edad = 35;

    // Mostrar los objetos originales y clonados
    console.log('Objeto original:', personaOriginal);
    console.log('Objeto clonado:', personaClon);

33. Operador de Encadenamiento Opcional (?)

El uso del operador de encadenamiento opcional (?.) en JavaScript permite acceder a una propiedad anidada de un objeto de forma segura. Al intentar acceder a una propiedad, como codigoPostal dentro del objeto direccion del objeto usuario, el operador ?. asegura que si direccion no está definido, es null, o es undefined, la expresión devolverá undefined en lugar de lanzar un error.

    // Objeto que puede contener propiedades anidadas
    const usuario = {
        nombre: 'Juan',
        direccion: {
            ciudad: 'Madrid',
            codigoPostal: 28001
        }
    };

    // Acceder a una propiedad anidada de forma segura utilizando el operador de encadenamiento opcional
    const codigoPostal = usuario.direccion?.codigoPostal;

    // Mostrar el código postal si está presente, de lo contrario, mostrar un mensaje predeterminado
    console.log('Código Postal:', codigoPostal ?? 'No disponible');

34. Eliminar Elementos Repetidos de un Array Utilizando `new Set`

El constructor Set en JavaScript se utiliza para crear una colección de valores únicos. Se puede usar Set para eliminar elementos duplicados de un array. Al convertir el array a un Set, los elementos duplicados se eliminan automáticamente. Luego, se puede convertir el Set de nuevo en un array utilizando el operador de propagación (...).

    // Array con registros repetidos
    const registros = [1, 2, 3, 1, 2, 4, 5, 3];

    // Eliminar registros repetidos utilizando Set
    const registrosUnicos = [...new Set(registros)];

    // Mostrar los registros únicos
    console.log(registrosUnicos); 
    // Imprime: [1, 2, 3, 4, 5]

35. Eliminar Elementos Repetidos de un Array Usando `filter` y `indexOf`

Utilizando el método filter en combinación con indexOf, se pueden eliminar los elementos duplicados de un array. La función de filter conserva solo aquellos elementos cuyo índice en el array coincide con la primera aparición del elemento. Esto garantiza que solo se mantengan los elementos únicos en el array resultante.

    // Array con registros repetidos
    const registros = [1, 2, 3, 1, 2, 4, 5, 3];

    // Filtrar los registros únicos
    const registrosUnicos = registros.filter((valor, indice, arreglo) => arreglo.indexOf(valor) === indice);

    // Mostrar los registros únicos
    console.log(registrosUnicos); 
    // Imprime: [1, 2, 3, 4, 5]

36. Eliminar Elementos Repetidos de un Array Usando `filter` y `includes`

Utilizando el método filter en combinación con includes, se pueden eliminar los elementos duplicados de un array. La función de filter conserva solo aquellos elementos que no están repetidos en el array a partir del índice actual. Esto asegura que el array resultante contenga solo elementos únicos.

    // Array con registros repetidos
    const registros = [1, 2, 3, 1, 2, 4, 5, 3];

    // Filtrar los registros únicos
    const registrosUnicos = registros.filter((valor, indice, arreglo) => !arreglo.includes(valor, indice + 1));

    // Mostrar los registros únicos
    console.log(registrosUnicos); 
    // Imprime: [1, 2, 3, 4, 5]

37. Eliminar Elementos Repetidos de un Array Usando `reduce`

Utilizando el método reduce, puedes eliminar elementos repetidos de un array. El método recorre el array y para cada valor, verifica si ya está presente en el array de valores únicos (unicos). Si el valor no está presente, se añade al array de valores únicos; de lo contrario, se conserva el array actual. Esto da como resultado un array con registros únicos.

    // Array con registros repetidos
    const registros = [1, 2, 3, 1, 2, 4, 5, 3];

    // Eliminar registros repetidos utilizando reduce
    const registrosUnicos = registros.reduce((unicos, valor) => 
    unicos.includes(valor) ? unicos : [...unicos, valor], []);

    // Mostrar los registros únicos
    console.log(registrosUnicos); 
    // Imprime: [1, 2, 3, 4, 5]

38. Asignación de Valores Predeterminados

Cómo asignar valores predeterminados a los parámetros de una función en JavaScript utilizando el operador de fusión nula (??). Si el argumento pasado a la función es null o undefined, se asigna el valor predeterminado 'Invitado'. Esto permite que la función se comporte correctamente incluso si no se proporcionan argumentos al llamarla.

    // Función que toma un nombre como argumento y lo imprime
    function saludar(nombre) {
        // Asignación de valor predeterminado usando el operador de fusión nula (??)
        nombre = nombre ?? 'Invitado';
        console.log(`Hola, ${nombre}!`);
    }

    // Llamada a la función sin argumento
    saludar(); 
    // Imprime: Hola, Invitado!

    // Llamada a la función con un argumento
    saludar('Juan'); 
    // Imprime: Hola, Juan!

39. Verificar si un Elemento Existe en un Array Utilizando el Método `includes()`

El método includes() en JavaScript se utiliza para verificar si un elemento específico está presente en un array. En el siguiente ejemplo, se verifica si el elemento 3 está presente en el array array, y se imprime un mensaje apropiado en la consola dependiendo del resultado. Si el elemento está presente, se imprime ‘El elemento 3 está presente en el array’; de lo contrario, se imprime ‘El elemento 3 no está presente en el array’.

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

    // Verificar si el elemento 3 existe en el array
    if (array.includes(3)) {
        console.log('El elemento 3 está presente en el array');
    } else {
        console.log('El elemento 3 no está presente en el array');
    }

40. Verificar si un Elemento Existe en un Array Utilizando el Método `indexOf()`

El método indexOf() en JavaScript se utiliza para verificar si un elemento específico está presente en un array. En el siguiente ejemplo, se verifica si el elemento 3 está presente en el array array, y se imprime un mensaje apropiado en la consola dependiendo del resultado. Si el elemento está presente, se imprime ‘El elemento 3 está presente en el array’; de lo contrario, se imprime ‘El elemento 3 no está presente en el array’.

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

    // Verificar si el elemento 3 existe en el array
    if (array.indexOf(3) !== -1) {
        console.log('El elemento 3 está presente en el array');
    } else {
        console.log('El elemento 3 no está presente en el array');
    }

41. Prevención de la Modificación de Objetos

Cómo prevenir la modificación de un objeto en JavaScript utilizando el método Object.freeze(). Al llamar a este método con el objeto persona como argumento, se congela el objeto, lo que significa que no se pueden agregar, eliminar o modificar propiedades existentes en el objeto. Esto ayuda a proteger el objeto persona de modificaciones no deseadas.

    // Objeto que queremos proteger de modificaciones
    const persona = {
        nombre: 'Juan',
        edad: 30
    };

    // Prevenir la modificación del objeto
    Object.freeze(persona);

    // Intentar modificar una propiedad del objeto
    persona.nombre = 'Pedro'; 
    // No se producirá ningún cambio

    // Intentar añadir una nueva propiedad al objeto
    persona.ciudad = 'Madrid'; 
    // No se añadirá la propiedad

    // Mostrar el objeto
    console.log(persona); 
    // Imprimirá el objeto original sin cambios

42. Callback

En JavaScript, un callback es una función que se pasa como argumento a otra función y que se ejecuta después de que alguna operación asincrónica o de larga duración haya finalizado.

La función hacerAlgoAsincrono() simula una operación asincrónica utilizando setTimeout(). Después de una demora de 2 segundos, ejecuta la función de callback manejarResultado() pasada como argumento. Esta función de callback maneja el resultado de la operación asincrónica, en este caso, simplemente imprime el mensaje “Resultado: Datos cargados” en la consola.

    // Función que simula una operación asincrónica
    function hacerAlgoAsincrono(callback) {
        // Simular una demora de 2 segundos (por ejemplo, cargar datos del servidor)
        setTimeout(function() {
            // Después de la demora, ejecutar la función de callback
            callback('Datos cargados');
        }, 2000);
    }

    // Función de callback que maneja el resultado
    function manejarResultado(resultado) {
        console.log('Resultado:', resultado);
    }

    // Llamar a la función asincrónica con el callback
    hacerAlgoAsincrono(manejarResultado);

43. Método `fetch`

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.

    // 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);
        });

44. 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.

    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();

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

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.

    // 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();

46. Diferencia entre los operadores de igualdad `==` y `===`

En JavaScript, los operadores == (igualdad) y === (estricta) se utilizan para comparar valores, pero se comportan de manera diferente en cuanto a la comparación de tipos:

El operador == compara los valores después de convertirlos a un tipo común (coerción de tipo), lo que puede llevar a resultados inesperados.
El operador === compara tanto el valor como el tipo de los operandos sin realizar coerción de tipo, por lo que es más estricto.

Aquí se muestran algunos ejemplos para ilustrar la diferencia:

    console.log(0 == false);          // true, porque 0 y false se convierten al mismo tipo
    console.log(0 === false);         // false, porque 0 es un número y false es un booleano
    console.log(1 == "1");            // true, porque "1" se convierte a número
    console.log(1 === "1");           // false, porque 1 es un número y "1" es una cadena
    console.log(null == undefined);   // true, son considerados iguales en coerción de tipo
    console.log(null === undefined);  // false, porque son de tipos diferentes
    console.log('0' == false);        // true, porque '0' se convierte a número y luego a false
    console.log('0' === false);       // false, porque '0' es una cadena y false es un booleano
    console.log([] == []);            // false, porque son dos objetos diferentes en memoria
    console.log([] === []);           // false, por la misma razón que arriba
    console.log({} == {});            // false, porque son dos objetos diferentes en memoria
    console.log({} === {});           // false, por la misma razón que arriba

47. Funciones constructoras

Las funciones constructoras son funciones en JavaScript utilizadas para crear objetos. Permiten crear múltiples instancias de objetos con la misma estructura y comportamiento.

Aquí se muestra cómo utilizar funciones constructoras para crear objetos:

    // Definir una función constructora para crear objetos de tipo Persona
    function Persona(nombre, edad) {
        this.nombre = nombre;
        this.edad = edad;
    }

    // Crear objetos utilizando la función constructora
    const persona1 = new Persona('Juan', 30);
    const persona2 = new Persona('María', 25);

    // Acceder a las propiedades de los objetos creados
    console.log(persona1.nombre); 
    // Imprime: Juan
    console.log(persona1.edad);   
    // Imprime: 30

    console.log(persona2.nombre); 
    // Imprime: María
    console.log(persona2.edad);  
    // Imprime: 25

48. Generar una matriz (Array) de números con números desde el 0 hasta el 50

Cómo generar una matriz (array) de números del 0 al 50 en JavaScript utilizando un bucle for. Se inicializa un array vacío numbersArray y se define una variable max con el valor 50. Luego, se utiliza un bucle for para iterar desde 0 hasta max, y en cada iteración se agrega el valor actual de i al array numbersArray utilizando el método push(). Finalmente, se imprime el array resultante en la consola.

    const numbersArray = [];
    const max = 50;

    for (let i = 0; i <= max; i++) {
        numbersArray.push(i);
    }

    console.log(numbersArray); 
    // Imprime: [0, 1, 2, ..., 50]

49. Generar un conjunto aleatorio de personajes alfanuméricos

Se define una cadena caracteres que contiene todos los caracteres alfabéticos en mayúsculas y minúsculas, así como los dígitos del 0 al 9. Luego, se especifica la longitud del conjunto deseado en la variable longitudConjunto. Se inicializa una cadena vacía conjuntoAleatorio que se utilizará para almacenar el conjunto aleatorio generado.

A continuación, se utiliza un bucle for para iterar longitudConjunto veces. En cada iteración, se genera un índice aleatorio entre 0 y la longitud de la cadena de caracteres utilizando Math.random(). Luego, se utiliza charAt(indice) para obtener el carácter correspondiente al índice generado y se concatena a la cadena conjuntoAleatorio.

    const caracteres = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const longitudConjunto = 10; // Longitud del conjunto deseado
    let conjuntoAleatorio = '';

    for (let i = 0; i < longitudConjunto; i++) {
        const indice = Math.floor(Math.random() * caracteres.length);
        conjuntoAleatorio += caracteres.charAt(indice);
    }

    console.log(conjuntoAleatorio); 
    // Imprime el conjunto aleatorio generado

50. Verifique si el valor de una variable es un número

Se define una variable argumento que contiene el valor que se desea verificar. Luego, se utiliza un condicional if para comprobar si el tipo de datos de argumento es igual a 'number' utilizando el operador typeof. Si el resultado de esta comprobación es verdadero, se imprime en la consola el mensaje 'El argumento es un número.', de lo contrario se imprime 'El argumento NO es un número.'

    const argumento = 5; 
    // Cambia esto por el argumento que desees verificar

    if (typeof argumento === 'number') {
        console.log('El argumento es un número.');
    } else {
        console.log('El argumento NO es un número.');
    }

51. Verifique que un argumento dado en una función es un array

Se define una función llamada verificarArray que toma un argumento argumento. Dentro de la función, se utiliza el método estático Array.isArray() para comprobar si argumento es un array. Si Array.isArray(argumento) devuelve true, se imprime en la consola el mensaje 'El argumento es un array.', de lo contrario se imprime 'El argumento NO es un array.'.

Finalmente, se llama a la función verificarArray con un ejemplo de array miArray como argumento.

    function verificarArray(argumento) {
        if (Array.isArray(argumento)) {
            console.log('El argumento es un array.');
        } else {
            console.log('El argumento NO es un array.');
        }
    }

    const miArray = [1, 2, 3]; 
    // Cambia esto por el argumento que desees verificar
    verificarArray(miArray);

52. Obtener el Valor Máximo y Mínimo de un Array de Números Usando Math.max(), Math.min(), y el Operador de Propagación (…)

Cómo extraer el máximo y el mínimo de una serie de números almacenados en un array utilizando los métodos Math.max() y Math.min() junto con el operador de propagación (...).

    const numeros = [5, 2, 8, 10, 3];

    const maximo = Math.max(...numeros);
    const minimo = Math.min(...numeros);

    console.log('Máximo:', maximo); 
    // Imprime: Máximo: 10
    console.log('Mínimo:', minimo); 
    // Imprime: Mínimo: 2

53. Validar si un Array está vacío

Se define un array llamado miArray, y luego se utiliza una estructura condicional if para verificar si la propiedad length del array es igual a cero. Si miArray.length es igual a cero, significa que el array está vacío y se imprime en la consola el mensaje ‘El array está vacío.’. De lo contrario, si miArray.length no es igual a cero, significa que el array no está vacío y se imprime en la consola el mensaje ‘El array NO está vacío.’.

    const miArray = []; // Cambia esto por tu array

    if (miArray.length === 0) {
        console.log('El array está vacío.');
    } else {
        console.log('El array NO está vacío.');
    }

54. 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).

    // 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);

55. 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).

    // 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);

56. Eliminar elemento de un Array con el 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.

    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]

57. Eliminar elemento de un Array con el Método `pop()`

El método pop() elimina el último elemento de un array y lo devuelve. Este método modifica el array original y reduce su longitud en uno.

    let array = [1, 2, 3, 4, 5];

    // Eliminar el último elemento del array
    const elementoEliminado = array.pop();

    console.log(array); // Resultado: [1, 2, 3, 4]
    console.log('Elemento eliminado:', elementoEliminado);
    // Resultado: Elemento eliminado: 5

58. Eliminar elemento de un Array con el Método `shift()`

El método shift() elimina el primer elemento de un array y lo devuelve. Este método modifica el array original y reduce su longitud en uno.

    let array = [1, 2, 3, 4, 5];

    // Eliminar el primer elemento del array
    const elementoEliminado = array.shift();

    console.log(array); 
    // Resultado: [2, 3, 4, 5]
    console.log('Elemento eliminado:', elementoEliminado);
    // Resultado: Elemento eliminado: 1

59. Agregar un elemento al inicio del Array

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

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

    // Agregar un elemento al inicio del array
    frutas.unshift("uva");

    console.log(frutas); 
    // Resultado: ["uva", "manzana", "banana", "naranja"]

60. Agregar un elemento al final del Array

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.

    // 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"]

Expresiones

Una expresión es una unidad de código que da como resultado un valor.

    2 + 2
    //Salidad 4

Distinción entre mayúsculas y minúsculas

JavaScript distingue por completo entre mayúsculas y minúsculas. Esto significa que las variables, funciones y otros identificadores en JavaScript son sensibles al caso. Por ejemplo, variable, Variable y VARIABLE se consideran tres identificadores distintos.

Espacio en blanco

En JavaScript, los espacios en blanco, como los espacios, las tabulaciones y las líneas nuevas, se denominan “espacios en blanco”. Estos caracteres en blanco no tienen ningún efecto en el comportamiento del código JavaScript en sí mismo, pero son importantes para la legibilidad del código y para separar tokens (como palabras clave, operadores y variables) para que el intérprete de JavaScript pueda entender el código correctamente.

    console.log(       "Hola Mundo"  );