JS

Javascript es un lenguaje de programación que permite a los desarrolladores crear y manipular objetos en el navegador. Es una forma de programar interactivamente y dinámicamente el sitio web, permitiendo crear animaciones, validación de formularios, comunicación con servidores, etc.

Variables en JavaScript
Funciones en JavaScript
Clases en JavaScript
Ejercicios Prácticos

2. Variables en JavaScript

Las variables son espacios de memoria donde puedes almacenar datos. Puedes cambiar su valor durante la ejecución del programa.

Las variables son contenedores para almacenar datos. En JavaScript, puedes declarar variables usando var, let o const.

var: Declaración de variable o de función.
let: Declaración de bloque, ideal para variables que cambian.
const: Declaración de bloque para valores constantes.


// Ejemplo de variables
let nombre = "Juan";
const PI = 3.1416;
nombre = "María";
console.log(nombre); // Output: María

Tipos de datos en JavaScript

Los tipos de datos más comunes son:

string: Cadena de texto.
number: Número.
boolean: Verdadero o falso.
null: Nulo, vacío.
undefined: Variable sin valor asignado.
array: Colección de elementos.
object: Colección de propiedades y métodos.

1. Introducción a los Arrays

Definición y características de los arrays
Creación de arrays: literales y constructor
Acceso a elementos por índice
Propiedad length
Arrays son objetos especiales

2. Métodos Básicos de Arrays

push() y pop()

array.push(elemento1, ..., elementoN) - Añade uno o más elementos al final del array.

array.pop() - Elimina y devuelve el último elemento del array.

shift() y unshift()

array.shift() - Elimina y devuelve el primer elemento del array.

array.unshift(elemento1, ..., elementoN) - Añade uno o más elementos al inicio del array.

concat()

array.concat(valor1, valor2, ..., valorN) - Combina dos o más arrays y devuelve un nuevo array.

slice()

array.slice(inicio, fin) - Devuelve una copia superficial de una porción del array.

splice()

array.splice(inicio, cantidad, elemento1, ..., elementoN) - Cambia el contenido de un array eliminando, reemplazando o añadiendo elementos.

3. Métodos de Búsqueda

indexOf() y lastIndexOf()

array.indexOf(elemento, desdeIndice) - Devuelve el primer índice donde se encuentra un elemento.

array.lastIndexOf(elemento, desdeIndice) - Devuelve el último índice donde se encuentra un elemento.

includes()

array.includes(elemento, desdeIndice) - Determina si un array incluye un determinado elemento.

find() y findIndex()

array.find(funcion(elemento, indice, array)) - Devuelve el primer elemento que cumple con la condición.

array.findIndex(funcion(elemento, indice, array)) - Devuelve el índice del primer elemento que cumple con la condición.

4. Métodos de Iteración

forEach()

array.forEach(funcion(elemento, indice, array)) - Ejecuta una función por cada elemento del array.

map()

array.map(funcion(elemento, indice, array)) - Crea un nuevo array con los resultados de la función aplicada a cada elemento.

filter()

array.filter(funcion(elemento, indice, array)) - Crea un nuevo array con todos los elementos que pasan la prueba.

reduce() y reduceRight()

array.reduce(funcion(acumulador, elemento, indice, array), valorInicial) - Aplica una función a un acumulador y cada elemento para reducirlo a un único valor.

array.reduceRight() - Igual que reduce pero procesa el array de derecha a izquierda.

every() y some()

array.every(funcion(elemento, indice, array)) - Comprueba si todos los elementos cumplen una condición.

array.some(funcion(elemento, indice, array)) - Comprueba si al menos un elemento cumple una condición.

5. Métodos de Transformación

join()

array.join(separador) - Une todos los elementos de un array en una cadena.

reverse()

array.reverse() - Invierte el orden de los elementos de un array.

sort()

array.sort(funcionComparacion) - Ordena los elementos de un array.

flat() y flatMap()

array.flat(nivelProfundidad) - Crea un nuevo array con todos los elementos de sub-array concatenados.

array.flatMap(funcion(elemento, indice, array)) - Mapea cada elemento y luego aplana el resultado.

6. Arrays y el Operador Spread

Uso del operador spread (...) con arrays
Copiar arrays
Concatenar arrays
Pasar elementos como argumentos de función

7. Arrays Multidimensionales

Definición y creación
Acceso a elementos
Iteración sobre arrays multidimensionales

8. Métodos Estáticos de Array

Array.isArray()

Array.isArray(valor) - Determina si el valor pasado es un array.

Array.from()

Array.from(objetoIterable, funcionMapeo, thisArg) - Crea una nueva instancia de Array a partir de un objeto iterable.

Array.of()

Array.of(elemento0, elemento1, ..., elementoN) - Crea un nuevo array con un número variable de elementos.

9. Buenas Prácticas y Consideraciones

Mutabilidad vs Inmutabilidad
Rendimiento de diferentes métodos
Uso adecuado de métodos según el caso
Compatibilidad con versiones anteriores de JavaScript

Funciones

Bloques de código reutilizables que realizan una tarea específica. En JavaScript, existen tres tipos principales de funciones: declarativas, expresivas y funciones flecha.

Funciones Declarativas

Las funciones declarativas se definen utilizando la palabra clave function. Estas funciones tienen un nombre y pueden ser llamadas en cualquier parte del código, incluso antes de su declaración (hoisting).

        
        // Ejemplo de función declarativa
        function saludar(nombre) {
            return `Hola, ${nombre}!`;
        }
        
        console.log(saludar("Juan")); // Output: Hola, Juan!

Funciones Expresivas

Las funciones expresivas (también conocidas como funciones anónimas) se asignan a una variable. No pueden ser llamadas antes de su declaración, ya que no son elevadas (hoisted).

        
        // Ejemplo de función expresiva
        const sumar = function(a, b) {
            return a + b;
        };
        
        console.log(sumar(5, 3)); // Output: 8

Funciones Flecha

Las funciones flecha (arrow functions) son una sintaxis más corta introducida en ES6. No tienen su propio contexto de this, lo que las hace ideales para funciones de callback.

        
        // Ejemplo de función flecha
        const multiplicar = (a, b) => a * b;
        
        console.log(multiplicar(4, 2)); // Output: 8
        
        // Función flecha con un solo parámetro
        const cuadrado = x => x * x;
        
        console.log(cuadrado(5)); // Output: 25

Comparación entre Tipos de Funciones

Tipo	Hoisting	Sintaxis	Contexto `this`
Declarativa	Elevada (puede ser llamada antes de su declaración)	`function nombre() { ... }`	Propio
Expresiva	No elevada	`const nombre = function() { ... }`	Propio
Flecha	No elevada	`const nombre = () => { ... }`	Hereda del contexto padre

4. Clases en JavaScript

Las clases son plantillas para crear objetos. Introducidas en ES6, facilitan la programación orientada a objetos (OOP).

Constructor: Método especial para inicializar propiedades.
Métodos: Funciones dentro de la clase.


// Ejemplo de clases
class Persona {
    constructor(nombre, edad) {
        this.nombre = nombre;
        this.edad = edad;
    }

    saludar() {
        return `Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`;
    }
}

const persona1 = new Persona("Juan", 25);
console.log(persona1.saludar()); // Output: Hola, mi nombre es Juan y tengo 25 años.