Saltar a contenido

JavaScript

JavaScript es un lenguaje de programación de alto nivel, interpretado, con tipado dinámico y multiparadigma. Originalmente desarrollado para añadir interactividad a las páginas web, hoy se utiliza tanto en el frontend como en el backend, convirtiéndose en uno de los lenguajes más populares y versátiles del mundo de la programación.

Características Principales

1. Lenguaje de Scripting

JavaScript es un lenguaje de scripting, lo que significa que el código se interpreta en tiempo de ejecución, sin necesidad de una compilación previa. Esto permite un ciclo de desarrollo rápido e iterativo.

2. Tipado Dinámico

En JavaScript, las variables no están asociadas a un tipo específico. El tipo de una variable se determina en tiempo de ejecución y puede cambiar durante el ciclo de vida del programa.

let variable = 42;        // número
variable = "Hola, mundo!"; // ahora es un string
variable = true;          // ahora es un booleano

3. Multiparadigma

JavaScript soporta múltiples paradigmas de programación, incluyendo:

  • Programación Imperativa: Basada en comandos que alteran el estado del programa.
  • Programación Funcional: Tratando a las funciones como ciudadanos de primera clase.
  • Programación Orientada a Objetos: Basada en prototipos y, más recientemente, en clases.
  • Programación Asíncrona: Utilizando callbacks, promesas y async/await.

4. Ejecución en Diferentes Entornos

JavaScript puede ser ejecutado en diversos entornos:

  • Navegadores: Entorno tradicional para JavaScript.
  • Node.js: Entorno de ejecución del lado del servidor (server-side).
  • Deno: Un runtime de JavaScript/TypeScript más reciente.
  • Aplicaciones móviles: A través de frameworks como React Native.
  • Aplicaciones de escritorio: Con Electron o similares.

Sintaxis Básica

Variables y Constantes

// Declaración de variables
var x = 10;       // Alcance de función (legado)
let y = 20;       // Alcance de bloque (ES6+)
const z = 30;     // Constante (ES6+)

Tipos de Datos

JavaScript posee los siguientes tipos de datos primitivos:

  • Number: Representa números enteros y de punto flotante.
  • String: Secuencia de caracteres.
  • Boolean: Valores lógicos (true/false).
  • Null: Representa la ausencia intencional de un valor.
  • Undefined: Representa una variable declarada pero no inicializada.
  • Symbol: Tipo de dato cuyas instancias son únicas e inmutables (ES6+).
  • BigInt: Representa enteros de precisión arbitraria (ES2020).

Y un tipo de dato complejo:

  • Object: Colección de propiedades.
// Ejemplos de tipos de datos
let numero = 42;
let texto = "JavaScript";
let booleano = true;
let nulo = null;
let indefinido = undefined;
let simbolo = Symbol("descripción");
let numeroGrande = 9007199254740991n;
let objeto = { clave: "valor" };
let array = [1, 2, 3]; // Los arrays son objetos en JavaScript

Estructuras de Control

Condicionales

// If-else
if (condicion) {
    // código si es verdadero
} else if (otraCondicion) {
    // código si la primera condición es falsa y la segunda es verdadera
} else {
    // código si ambas condiciones son falsas
}

// Operador ternario
let resultado = condicion ? valorSiVerdadero : valorSiFalso;

// Switch
switch (variable) {
    case valor1:
        // código para valor1
        break;
    case valor2:
        // código para valor2
        break;
    default:
        // código por defecto
}

Bucles

// For
for (let i = 0; i < 10; i++) {
    // código a ser repetido
}

// While
while (condicion) {
    // código a ser repetido mientras la condición sea verdadera
}

// Do-While
do {
    // código a ser ejecutado al menos una vez
} while (condicion);

// For...of (para iterar sobre los valores de objetos iterables)
for (const elemento of array) {
    // código para procesar cada elemento
}

// For...in (para iterar sobre las propiedades enumerables de un objeto)
for (const clave in objeto) {
    // código para procesar cada clave
}

Funciones

// Declaración de función
function suma(a, b) {
    return a + b;
}

// Expresión de función
const multiplicacion = function(a, b) {
    return a * b;
};

// Arrow function (ES6+)
const division = (a, b) => a / b;

// Función con parámetros por defecto (ES6+)
function saludo(nombre = "Visitante") {
    return `Hola, ${nombre}!`;
}

// Parámetros rest (ES6+)
function sumarTodos(...numeros) {
    return numeros.reduce((total, num) => total + num, 0);
}

Programación Orientada a Objetos

Objetos Literales

// Objeto literal
const persona = {
    nombre: "Juan",
    edad: 30,
    profesion: "Desarrollador",
    presentar() {
        return `Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`;
    }
};

// Accediendo a las propiedades
console.log(persona.nombre);        // Notación de punto
console.log(persona["profesion"]); // Notación de corchetes

Prototipos

JavaScript está basado en prototipos, donde los objetos pueden heredar propiedades y métodos de otros objetos.

// Función constructora
function Persona(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
}

// Añadiendo método al prototipo
Persona.prototype.presentar = function() {
    return `Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`;
};

// Creando instancias
const persona1 = new Persona("Maria", 25);
const persona2 = new Persona("Carlos", 35);

console.log(persona1.presentar()); // "Hola, mi nombre es Maria y tengo 25 años."

Clases (ES6+)

// Declaración de clase
class Animal {
    constructor(nombre) {
        this.nombre = nombre;
    }

    emitirSonido() {
        return "Sonido genérico de animal";
    }
}

// Herencia
class Perro extends Animal {
    constructor(nombre, raza) {
        super(nombre);
        this.raza = raza;
    }

    emitirSonido() {
        return "¡Guau guau!";
    }

    moverLaCola() {
        return `${this.nombre} está moviendo la cola`;
    }
}

const rex = new Perro("Rex", "Labrador");
console.log(rex.emitirSonido());   // "¡Guau guau!"
console.log(rex.moverLaCola());  // "Rex está moviendo la cola"

Programación Asíncrona

Callbacks

function obtenerDatos(callback) {
    setTimeout(() => {
        const datos = { id: 1, nombre: "Producto" };
        callback(null, datos);
    }, 1000);
}

obtenerDatos((error, datos) => {
    if (error) {
        console.error("Error:", error);
    } else {
        console.log("Datos:", datos);
    }
});

Promesas

function obtenerDatos() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const datos = { id: 1, nombre: "Producto" };
            // Simulando éxito
            resolve(datos);
            // Simulando error
            // reject(new Error("Falla al obtener los datos"));
        }, 1000);
    });
}

obtenerDatos()
    .then(datos => console.log("Datos:", datos))
    .catch(error => console.error("Error:", error));

Async/Await

async function obtenerYProcesarDatos() {
    try {
        const datos = await obtenerDatos();
        console.log("Datos:", datos);
        return datos;
    } catch (error) {
        console.error("Error:", error);
        throw error;
    }
}

obtenerYProcesarDatos();

Características Modernas (ES6+)

Desestructuración

// Desestructuración de objetos
const persona = { nombre: "Ana", edad: 28, profesion: "Diseñadora" };
const { nombre, edad } = persona;

// Desestructuración de arrays
const colores = ["rojo", "verde", "azul"];
const [primerColor, segundoColor] = colores;

Operador de Propagación (Spread Operator)

// Spread con arrays
const numeros1 = [1, 2, 3];
const numeros2 = [4, 5, 6];
const todosLosNumeros = [...numeros1, ...numeros2];

// Spread con objetos
const datosPersonales = { nombre: "Pedro", edad: 32 };
const datosProfesionales = { profesion: "Ingeniero", empresa: "ABC" };
const perfilCompleto = { ...datosPersonales, ...datosProfesionales };

Plantillas Literales (Template Literals)

const nombre = "Maria";
const edad = 30;
const mensaje = `Hola, mi nombre es ${nombre} y tengo ${edad} años.`;

Módulos

// Exportando (archivo: modulo.js)
export const PI = 3.14159;
export function calcularArea(radio) {
    return PI * radio * radio;
}
export default class Circulo {
    constructor(radio) {
        this.radio = radio;
    }

    area() {
        return calcularArea(this.radio);
    }
}

// Importando (archivo: app.js)
import Circulo, { PI, calcularArea } from './modulo.js';