¿Qué es JavaScript?

JavaScript es un lenguaje de programación de alto nivel, interpretado y de tipo dinámico. Originalmente

se creó para hacer que las páginas web fueran interactivas y dinámicas, pero hoy en día se usa en
muchos entornos, tanto del lado del cliente (navegador) como del servidor (Node.js). JavaScript sigue el
paradigma de programación imperativa y orientada a objetos, lo que permite trabajar con estructuras de
datos y funciones de forma sencilla.

Características principales de JavaScript:

Lenguaje interpretado: No necesita ser compilado, el navegador interpreta el código en tiempo real.

Tipado dinámico: Los tipos de datos se asignan automáticamente.

Multi-paradigma: Soporta programación orientada a objetos, funcional e imperativa.

Estructuras de Datos Básicas

2.1 Tipos Primitivos

Números: Representa valores numéricos, ya sean enteros o decimales

let edad = 25;

Cadenas de texto (string): Se usa para representar texto

let nombre = "Ana";

Booleanos (boolean): Representan valores de verdad (true o false)

let esMayorDeEdad = true;

Variables: var, let y const

var: Declaración de variables de forma global o de función.

Es flexible, pero propensa a errores debido a su alcance global.

var nombre = "Luis";

let: Permite declarar variables con alcance de bloque.

Ideal para cuando se necesita cambiar el valor de una variable en un ámbito específico.

let edad = 30;

const: Declara constantes con alcance de bloque.

Su valor no puede cambiar después de ser asignado.

const PI = 3.14;

Diferencias entre var, let y const

var tiene un alcance de función mientras que let y const tienen un alcance de bloque.

const se usa para valores constantes que no cambiarán, mientras que let permite reasignación.

Contextos de Ejecución y Ámbito

Contexto de ejecución global: Todo el código que se ejecuta fuera de funciones.

Contexto de ejecución de función: Cada vez que se ejecuta una función, se crea un nuevo contexto de
ejecución.

Ámbito léxico: Es el contexto donde se declara una variable, lo que determina dónde es accesible.

let mensaje = "Hola"; // contexto global

function saludar() {

let saludo = "Hola, ¿cómo estás?"; // contexto de función

console.log(saludo);

saludar();

Arrays

Un array es una estructura de datos que almacena varios elementos en una sola variable. Se puede
acceder a cada elemento por su índice.

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

Objetos

Un objeto es una colección de datos y funcionalidades representados como pares clave-valor.

let persona = {
 nombre: "Juan",

edad: 30,

saludar: function() {

console.log("Hola, soy " + this.nombre);

};

persona.saludar();

Clases en JavaScript

Las clases en JavaScript son estructuras que permiten crear objetos con propiedades y métodos
predefinidos. Facilitan el uso de la programación orientada a objetos, ya que permiten encapsular datos
y funcionalidades dentro de una estructura. Las clases son "plantillas" para crear objetos con
características similares.

Declaración de una Clase

Podemos definir una clase usando la palabra clave class. Dentro de una clase, el constructor es un
método especial que se ejecuta al crear una instancia de la clase, y se utiliza para inicializar las
propiedades del objeto.

class Persona {

// Constructor

constructor(nombre, edad) {

this.nombre = nombre; // propiedad 'nombre'

this.edad = edad; // propiedad 'edad'

// Método

saludar() {

console.log(`Hola, soy ${this.nombre} y tengo ${this.edad} años.`);

}
}

// Crear una instancia de la clase

const persona1 = new Persona("Ana", 25);

persona1.saludar(); // Output: Hola, soy Ana y tengo 25 años.

Herencia de Clases

La herencia permite crear una nueva clase basada en otra existente, lo que es útil para reutilizar código y
definir jerarquías de clases. En JavaScript, la herencia se logra con la palabra clave extends.

class Estudiante extends Persona {

constructor(nombre, edad, grado) {

super(nombre, edad); // Llama al constructor de la clase padre

this.grado = grado; // Propiedad adicional de Estudiante

// Método adicional

estudiar() {

console.log(`${this.nombre} está estudiando en el grado ${this.grado}.`);

const estudiante1 = new Estudiante("Carlos", 20, "tercero");

estudiante1.saludar(); // Output: Hola, soy Carlos y tengo 20 años.

estudiante1.estudiar(); // Output: Carlos está estudiando en el grado tercero.

Encapsulación y Métodos Privados

JavaScript permite la encapsulación usando métodos y propiedades privadas, accesibles solo dentro de
la clase. Los nombres de las propiedades privadas comienzan con #.

class CuentaBancaria {

#saldo; // Propiedad privada

constructor(saldoInicial) {

this.#saldo = saldoInicial;

// Método para obtener el saldo

obtenerSaldo() {

return this.#saldo;

// Método para depositar

depositar(monto) {

if (monto > 0) {

this.#saldo += monto;

const cuenta = new CuentaBancaria(1000);

cuenta.depositar(500);

console.log(cuenta.obtenerSaldo()); // Output: 1500

Las clases en JavaScript te permiten organizar el código de manera estructurada y reutilizable, lo que
facilita el manejo de proyectos complejos. Este enfoque es clave para cualquier desarrollo avanzado en
JavaScript.

¿Qué es this en JavaScript?

this es una palabra clave especial en JavaScript que hace referencia al contexto actual de ejecución. Su
valor depende de cómo y dónde se llama. Es comúnmente usado dentro de clases y funciones para
acceder a las propiedades y métodos del objeto actual.

¿Cómo funciona this?

El valor de this depende del contexto en el que se utiliza:

En el contexto global (fuera de funciones y clases): this hace referencia al objeto global (window en
navegadores o global en Node.js).

console.log(this); // En el navegador, muestra el objeto `window`

Dentro de una función regular: this también hace referencia al objeto global en modo no estricto. Sin
embargo, en modo estricto ('use strict'), this será undefined.

function mostrarThis() {

console.log(this);

mostrarThis(); // En el navegador, muestra `window` sin modo estricto

Dentro de un método de un objeto: this se refiere al objeto que contiene el método.

const persona = {

nombre: "Ana",

saludar() {

console.log(`Hola, soy ${this.nombre}`);

};

persona.saludar(); // Output: Hola, soy Ana

Dentro de una clase: this hace referencia a la instancia del objeto creado a partir de la clase.

class Persona {

constructor(nombre) {

this.nombre = nombre; // `this` se refiere a la instancia

const persona1 = new Persona("Juan");

console.log(persona1.nombre); // Output: Juan

El constructor en JavaScript

En una clase, el constructor es un método especial que se ejecuta automáticamente cuando se crea una
nueva instancia de la clase. Su propósito principal es inicializar las propiedades del objeto y establecer su
estado inicial.

Sintaxis y Uso del constructor

El constructor se define dentro de la clase usando la palabra clave constructor.

Si una clase no tiene definido un constructor, JavaScript le asigna uno por defecto.

Puedes usar el constructor para asignar valores a las propiedades del objeto a través de this.

class Persona {

constructor(nombre, edad) {

this.nombre = nombre; // Inicializa `nombre`

this.edad = edad; // Inicializa `edad`

saludar() {

console.log(`Hola, soy ${this.nombre} y tengo ${this.edad} años.`);

 }

const persona1 = new Persona("Ana", 25);

persona1.saludar(); // Output: Hola, soy Ana y tengo 25 años.

Características del constructor

Puede recibir parámetros: Al igual que una función normal, puedes pasarle argumentos para
personalizar cada instancia.

Es único en cada clase: Una clase solo puede tener un constructor. Si intentas definir más de uno,
obtendrás un error.

No necesita ser llamado explícitamente: Cuando se usa new para crear una instancia, el constructor se
ejecuta automáticamente.

El Operador new

El operador new se usa en JavaScript para crear una nueva instancia de un objeto a partir de una clase o
función constructora. Al utilizar new, suceden varias cosas de forma automática:

Se crea un nuevo objeto vacío.

Se asigna this al nuevo objeto, vinculando el this dentro del constructor al objeto recién creado.

El constructor es llamado con los argumentos proporcionados.

Devuelve el nuevo objeto si no se devuelve otro objeto explícitamente.

Ejemplo de new con una Clase

class Animal {

constructor(tipo) {

this.tipo = tipo;

}
const perro = new Animal("perro");

console.log(perro.tipo); // Output: perro

Ejemplo de new con una Función Constructora

Antes de que se introdujeran las clases en ES6, JavaScript usaba funciones constructoras para crear
objetos.

function Vehiculo(marca) {

this.marca = marca;

const coche = new Vehiculo("Toyota");

console.log(coche.marca); // Output: To

Resumen de new

Asigna this al nuevo objeto.

Llama al constructor de la clase o función constructora.

Devuelve el nuevo objeto.

Evolución de JavaScript y el Surgimiento de las Clases en ES6

JavaScript fue creado originalmente como un lenguaje de programación de scripts en los navegadores,
enfocado en realizar tareas pequeñas y añadir interactividad básica a las páginas web. Su diseño inicial
era sencillo y no estaba pensado para desarrollar aplicaciones complejas, pero con el tiempo, las
demandas crecieron, y JavaScript comenzó a necesitar funciones más avanzadas.

Antes de ES6: Funciones Constructoras y Prototipos

Antes de la introducción de las clases en ECMAScript 2015 (ES6), JavaScript manejaba los objetos y la
programación orientada a objetos (POO) de una manera única comparada con otros lenguajes. En lugar
de clases, usaba:
Funciones Constructoras: Eran funciones especiales que servían como "plantillas" para crear objetos.
Estas funciones constructoras permitían definir ciertas propiedades y métodos que luego podían ser
usados por los objetos creados con new.

function Persona(nombre, edad) {

this.nombre = nombre;

this.edad = edad;

Persona.prototype.saludar = function() {

console.log(`Hola, soy ${this.nombre} y tengo ${this.edad} años.`);

};

const persona1 = new Persona("Ana", 25);

persona1.saludar(); // Output: Hola, soy Ana y tengo 25 años.

Prototipos: JavaScript está basado en prototipos, un mecanismo que permite que los objetos compartan
propiedades y métodos a través de una "cadena de prototipos". Cada función en JavaScript tiene una
propiedad prototype, que es un objeto donde se pueden definir propiedades y métodos para que los
compartan todas las instancias creadas por esa función.

Sin embargo, este sistema de prototipos y funciones constructoras no era tan intuitivo ni sencillo de usar
como las clases en otros lenguajes. Este enfoque hacía que la programación orientada a objetos en
JavaScript fuera menos accesible para desarrolladores que venían de lenguajes como Java o Python, que
tienen una estructura de clases más clara y definida.

Llegada de ES6 y las Clases

Con la llegada de ES6, JavaScript recibió un conjunto de nuevas características que lo hicieron más
potente y accesible para construir aplicaciones complejas. Una de las principales mejoras fue la
introducción de clases, que proporcionaron una forma más clara y estructurada de trabajar con la
programación orientada a objetos en JavaScript.

Las clases en ES6 son, en realidad, una sintaxis simplificada sobre el sistema de prototipos existente en
JavaScript. Aunque no cambian la base prototípica del lenguaje, permiten que los desarrolladores
definan objetos y sus comportamientos de una forma más intuitiva.

Beneficios de las Clases en ES6:

Legibilidad: Las clases hacen que el código sea más legible y más fácil de entender, especialmente para
los programadores que vienen de otros lenguajes orientados a objetos.

Sintaxis Familiar: Al ofrecer una sintaxis similar a la de otros lenguajes como Java y Python, facilita la
transición de programadores hacia JavaScript.

Manejo más claro de la Herencia: Con extends y super, las clases permiten que los desarrolladores
hereden propiedades y métodos de forma más limpia y organizada, sin tener que manipular el prototipo
manualmente.

Encapsulación Mejorada: Con la introducción de propiedades privadas en versiones más recientes, las
clases permiten un mejor control sobre qué propiedades o métodos son accesibles fuera del objeto.

Ejemplo Comparativo

Imaginemos una clase Animal en ambos enfoques, el enfoque de funciones constructoras y el enfoque
moderno de ES6.

Antes de ES6 (Funciones Constructoras y Prototipos):

function Animal(tipo) {

this.tipo = tipo;

}
Animal.prototype.hacerSonido = function() {

console.log(`${this.tipo} hace un sonido.`);

};

const perro = new Animal("Perro");

perro.hacerSonido(); // Output: Perro hace un sonido.

Con ES6 (Clases):

class Animal {

constructor(tipo) {

this.tipo = tipo;

hacerSonido() {

console.log(`${this.tipo} hace un sonido.`);

const perro = new Animal("Perro");

perro.hacerSonido(); // Output: Perro hace un sonido.

La sintaxis de ES6 es más clara y se asemeja a la forma en que se definen clases en otros lenguajes,
haciendo que el código sea más intuitivo y fácil de seguir.
Resumen de la Evolución:

Antes de ES6: JavaScript utilizaba funciones constructoras y prototipos para la creación de objetos y la
herencia. Aunque funcional, este sistema resultaba complejo para desarrolladores que estaban
acostumbrados a lenguajes orientados a objetos más clásicos.

Después de ES6: Las clases trajeron una estructura más clara y familiar a JavaScript, facilitando el uso de
POO y promoviendo un código más organizado y legible, sin cambiar el núcleo prototípico del lenguaje.