Certificado de JavaScript OOP Intermedio

JavaScript es un lenguaje de programación versátil que ha evolucionado significativamente desde su creación. Aunque inicialmente fue diseñado como un lenguaje de scripting para páginas web, hoy en día JavaScript se utiliza en prácticamente todos los ámbitos del desarrollo de software: frontend, backend, aplicaciones móviles, desktop e incluso en Internet de las Cosas (IoT).

Una de las características más potentes de JavaScript es su capacidad para implementar la programación orientada a objetos (OOP), aunque lo hace de una manera única y diferente a otros lenguajes como Java o C#. En este curso profundizaremos en los conceptos intermedios de OOP en JavaScript, explorando tanto su modelo basado en prototipos como las modernas clases introducidas en ES6.

Fundamentos de la OOP en JavaScript

JavaScript implementa la orientada a objetos de dos formas principales:

• A través de su sistema de prototipos (presente desde sus inicios)
• Mediante la sintaxis de clases (introducida en ES6)

Ambos enfoques coexisten en el lenguaje moderno y, de hecho, las clases en JavaScript son simplemente una abstracción sintáctica sobre el sistema de prototipos subyacente.

Prototipos: El corazón de JavaScript

El sistema de prototipos es el mecanismo fundamental de herencia en JavaScript. A diferencia de otros lenguajes que utilizan clases como "planos" para crear objetos, JavaScript utiliza objetos prototipo como plantillas para otros objetos.

Cada objeto en JavaScript tiene una propiedad interna llamada [[Prototype]] (accesible mediante __proto__ o Object.getPrototypeOf()) que apunta a su prototipo. Cuando intentamos acceder a una propiedad o método de un objeto, JavaScript primero busca en el propio objeto y, si no lo encuentra, continúa la búsqueda en su prototipo, formando lo que se conoce como cadena de prototipos.

// Creación de un objeto usando el sistema de prototipos
function Persona(nombre) {
    this.nombre = nombre;
}

Persona.prototype.saludar = function() {
    return `Hola, soy ${this.nombre}`;
};

const ana = new Persona('Ana');
console.log(ana.saludar()); // "Hola, soy Ana"

Clases en JavaScript moderno

Con la llegada de ES6, JavaScript introdujo una sintaxis de clases más familiar para desarrolladores provenientes de otros lenguajes. Sin embargo, es importante entender que estas clases son simplemente "azúcar sintáctico" sobre el sistema de prototipos.

// La misma funcionalidad usando clases
class Persona {
    constructor(nombre) {
        this.nombre = nombre;
    }
    
    saludar() {
        return `Hola, soy ${this.nombre}`;
    }
}

const ana = new Persona('Ana');
console.log(ana.saludar()); // "Hola, soy Ana"

El contexto de ejecución y 'this'

Uno de los conceptos más desafiantes en JavaScript es el comportamiento de la palabra clave this, que determina el contexto de ejecución de una función. A diferencia de otros lenguajes, el valor de this en JavaScript no depende de dónde se define una función, sino de cómo se invoca.

const usuario = {
    nombre: 'Carlos',
    mostrarNombre() {
        console.log(this.nombre);
    }
};

usuario.mostrarNombre(); // "Carlos" - 'this' se refiere al objeto usuario

const funcionSuelta = usuario.mostrarNombre;
funcionSuelta(); // undefined - 'this' ahora se refiere al objeto global (o undefined en modo estricto)

Manejo de excepciones

El manejo de errores es fundamental en cualquier aplicación robusta. JavaScript proporciona mecanismos para capturar y gestionar excepciones mediante bloques try/catch/finally, permitiendo crear código más resiliente.

function dividir(a, b) {
    if (b === 0) {
        throw new Error('No se puede dividir por cero');
    }
    return a / b;
}

try {
    const resultado = dividir(10, 0);
    console.log(resultado);
} catch (error) {
    console.error('Se produjo un error:', error.message);
} finally {
    console.log('Esta operación ha finalizado');
}

Pilares de la OOP en JavaScript

Encapsulación

La encapsulación permite ocultar los detalles internos de un objeto y exponer solo lo necesario. En JavaScript moderno, podemos implementar encapsulación mediante:

• Variables privadas con # (introducidas en ES2020)
• Closures
• Símbolos

class CuentaBancaria {
    #saldo; // Propiedad privada
    
    constructor(saldoInicial) {
        this.#saldo = saldoInicial;
    }
    
    depositar(cantidad) {
        if (cantidad > 0) {
            this.#saldo += cantidad;
            return true;
        }
        return false;
    }
    
    obtenerSaldo() {
        return this.#saldo;
    }
}

const cuenta = new CuentaBancaria(1000);
console.log(cuenta.obtenerSaldo()); // 1000
// console.log(cuenta.#saldo); // Error: propiedad privada

Herencia

La herencia permite que una clase herede propiedades y métodos de otra. En JavaScript, esto se puede implementar tanto con prototipos como con la palabra clave extends en clases modernas.

class Animal {
    constructor(nombre) {
        this.nombre = nombre;
    }
    
    hablar() {
        return `${this.nombre} hace un sonido`;
    }
}

class Perro extends Animal {
    constructor(nombre, raza) {
        super(nombre);
        this.raza = raza;
    }
    
    hablar() {
        return `${this.nombre} ladra`;
    }
}

const firulais = new Perro('Firulais', 'Labrador');
console.log(firulais.hablar()); // "Firulais ladra"

Polimorfismo

El polimorfismo permite que objetos de diferentes clases respondan al mismo método de manera diferente. En JavaScript, esto se logra naturalmente debido a su tipado dinámico.

class Forma {
    calcularArea() {
        return 0;
    }
}

class Circulo extends Forma {
    constructor(radio) {
        super();
        this.radio = radio;
    }
    
    calcularArea() {
        return Math.PI * this.radio * this.radio;
    }
}

class Rectangulo extends Forma {
    constructor(ancho, alto) {
        super();
        this.ancho = ancho;
        this.alto = alto;
    }
    
    calcularArea() {
        return this.ancho * this.alto;
    }
}

function mostrarArea(forma) {
    console.log(`El área es: ${forma.calcularArea()}`);
}

mostrarArea(new Circulo(5)); // "El área es: 78.53981633974483"
mostrarArea(new Rectangulo(4, 6)); // "El área es: 24"

Patrones de diseño en JavaScript

Patrón Módulo

El patrón módulo permite organizar el código en unidades independientes, evitando la contaminación del espacio global de nombres. Antes de ES6, se implementaba principalmente mediante IIFE (Immediately Invoked Function Expressions):

const Contador = (function() {
    let _contador = 0; // Variable privada
    
    return {
        incrementar: function() {
            return ++_contador;
        },
        obtenerValor: function() {
            return _contador;
        }
    };
})();

console.log(Contador.obtenerValor()); // 0
Contador.incrementar();
console.log(Contador.obtenerValor()); // 1

Con ES6, podemos usar módulos nativos:

// contador.js
let _contador = 0;

export function incrementar() {
    return ++_contador;
}

export function obtenerValor() {
    return _contador;
}

// main.js
import { incrementar, obtenerValor } from './contador.js';

console.log(obtenerValor()); // 0
incrementar();
console.log(obtenerValor()); // 1

Namespaces

Los namespaces (espacios de nombres) son otra técnica para organizar el código y evitar colisiones de nombres. En JavaScript, se pueden implementar mediante objetos:

const MiAplicacion = {
    Utilidades: {
        formatearFecha(fecha) {
            return fecha.toLocaleDateString();
        },
        generarId() {
            return Math.random().toString(36).substr(2, 9);
        }
    },
    Modelos: {
        Usuario: class {
            constructor(nombre) {
                this.nombre = nombre;
                this.id = MiAplicacion.Utilidades.generarId();
            }
        }
    }
};

const usuario = new MiAplicacion.Modelos.Usuario('Laura');
console.log(usuario.id); // "f7g3h9k2m"

Destructuring: Una característica moderna esencial

El destructuring (desestructuración) es una característica poderosa de JavaScript moderno que permite extraer valores de objetos y arrays de manera concisa.

Destructuring de objetos

const persona = {
    nombre: 'Elena',
    edad: 28,
    profesion: 'Desarrolladora',
    direccion: {
        ciudad: 'Madrid',
        codigoPostal: '28001'
    }
};

// Extracción básica
const { nombre, edad } = persona;
console.log(nombre, edad); // "Elena" 28

// Asignación a variables con nombres diferentes
const { nombre: nombreCompleto, profesion: trabajo } = persona;
console.log(nombreCompleto, trabajo); // "Elena" "Desarrolladora"

// Destructuring anidado
const { direccion: { ciudad } } = persona;
console.log(ciudad); // "Madrid"

// Valores por defecto
const { hobbies = [] } = persona;
console.log(hobbies); // []

Destructuring de arrays

const colores = ['rojo', 'verde', 'azul', 'amarillo'];

// Extracción básica
const [primero, segundo] = colores;
console.log(primero, segundo); // "rojo" "verde"

// Omitir elementos
const [, , tercero] = colores;
console.log(tercero); // "azul"

// Rest operator
const [principal, ...resto] = colores;
console.log(principal, resto); // "rojo" ["verde", "azul", "amarillo"]

// Valores por defecto
const [a, b, c, d, e = 'negro'] = colores;
console.log(e); // "negro"

// Intercambio de variables
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1

Aplicaciones prácticas

La programación orientada a objetos en JavaScript tiene numerosas aplicaciones en el desarrollo web moderno:

• Frameworks frontend como React, Vue o Angular utilizan conceptos de OOP para estructurar componentes y gestionar el estado.
• Desarrollo backend con Node.js aprovecha la OOP para crear APIs RESTful y servicios web.
• Aplicaciones de una sola página (SPA) utilizan patrones de diseño orientados a objetos para gestionar la complejidad.
• Bibliotecas de UI como Material-UI o Bootstrap-Vue implementan componentes reutilizables mediante clases y herencia.

A lo largo de este curso, exploraremos estos conceptos en profundidad, con ejemplos prácticos y ejercicios que te permitirán dominar la programación orientada a objetos en JavaScript a un nivel intermedio, preparándote para desarrollar aplicaciones más robustas, mantenibles y escalables.