Bienvenido a JavaScript

Una guía para desarrolladores Java que quieren aprender el lenguaje de la web moderna.

1. ¿Qué es JavaScript?

JavaScript es un lenguaje de programación interpretado, no tipado y de alto nivel. Creado en 1995 ofrece la posibilidad de añadir interactividad a las páginas web, pero hoy en día se ejecuta en navegadores, servidores (Node.js, Bun...), aplicaciones móviles y más.

En el navegador

Interactividad web, manipulación del DOM, peticiones a APIs

En el servidor

Node.js para backend, APIs REST, servicios en tiempo real

Aplicaciones

React Native, Electron, aplicaciones de escritorio y móviles

2. JavaScript vs Java

A pesar del nombre similar, JavaScript y Java son lenguajes completamente diferentes. El nombre fue una estrategia de marketing en 1995. Aquí están las diferencias principales:

Aspecto	Java	JavaScript
Compilación	Compilado a bytecode	Interpretado
Tipado	Estático y fuerte	Dinámico y débil
Paradigma	Orientado a objetos (clases)	Multi-paradigma (funcional, OOP, prototípico)
Ejecución	JVM (Java Virtual Machine)	Motor JS (V8, SpiderMonkey, etc.)
Uso principal	Backend, Android, aplicaciones empresariales	Web (frontend/backend), aplicaciones multiplataforma

Ejemplo comparativo

Java

Compilado · Tipado estático

1public class HelloWorld {
2    public static void main(String[] args) {
3        // Tipos declarados explícitamente
4        String nombre = "Ana";
5        int edad = 25;
6 
7        System.out.println("Hola " + nombre);
8 
9        // ❌ Esto causa ERROR DE COMPILACIÓN:
10        edad = "25";
11        // Error: incompatible types: String cannot be converted to int
12    }
13}

JavaScript

Interpretado · Tipado dinámico

1// No necesita clase ni main
2// Los tipos NO se declaran
3let nombre = "Ana";
4let edad = 25;
5 
6console.log("Hola " + nombre);
7 
8// ✅ PERMITIDO - Cambio de tipo
9edad = "25";
10// La variable ahora contiene un String
11console.log(typeof edad); // "string"

3. Tipado Dinámico

En Java, los tipos se verifican en tiempo de compilación. En JavaScript, se verifican en tiempo de ejecución. Las variables pueden cambiar de tipo:

Tipado Dinámico en JavaScriptjavascript

1// Las variables pueden cambiar de tipo libremente
2let variable = 42;              // Number
3console.log(typeof variable);   // "number"
4 
5variable = "Ahora soy texto";   // String
6console.log(typeof variable);   // "string"
7 
8variable = true;                // Boolean
9console.log(typeof variable);   // "boolean"
10 
11variable = { nombre: "Ana" };   // Object
12console.log(typeof variable);   // "object"
13 
14// Esto puede causar errores sutiles si no tienes cuidado
15let suma = "5" + 3;  // "53" (concatenación, no suma)
16let resta = "5" - 3; // 2 (conversión automática a número)

⚠️ Ventajas y desventajas

Ventajas: Código más flexible y rápido de escribir

Desventajas: Errores de tipo solo aparecen en ejecución. TypeScript ayuda con esto.

4. Hoisting (Elevación)

Hoisting es un comportamiento único de JavaScript donde las declaraciones de variables y funciones se "elevan" al inicio de su scope antes de la ejecución del código.

Esto no existe en Java y puede causar confusión al principio.

Hoisting con var

Hoisting con varjavascript

1// Lo que escribes:
2console.log(mensaje); // undefined (no error!)
3var mensaje = "Hola";
4 
5// Lo que JavaScript interpreta:
6var mensaje;          // Declaración elevada
7console.log(mensaje); // undefined
8mensaje = "Hola";     // Asignación en su lugar

Hoisting con let y const

Hoisting con let/constjavascript

1// ❌ let y const NO se inicializan automáticamente
2console.log(nombre); // ReferenceError: Cannot access before initialization
3let nombre = "Ana";
4 
5// ✅ Mejor práctica: declara variables ANTES de usarlas
6let apellido = "García";
7console.log(apellido); // "García"

Hoisting con funciones

Hoisting de funcionesjavascript

1// ✅ Las funciones declaradas SÍ se elevan completamente
2saludar(); // "Hola!" - Funciona antes de la declaración
3 
4function saludar() {
5  console.log("Hola!");
6}
7 
8// ❌ Las arrow functions NO se elevan
9despedir(); // ReferenceError
10 
11const despedir = () => {
12  console.log("Adiós!");
13};

5. Interpretado vs Compilado

Java (Compilado)

1. Escribes código .java
2. Compilador genera bytecode .class
3. JVM ejecuta el bytecode
4. Errores detectados: En compilación

JavaScript (Interpretado)

1. Escribes código .js
2. Motor JS lo lee línea por línea
3. Se ejecuta directamente
4. Errores detectados: En ejecución

💡 Nota sobre JIT Compilation

Los motores modernos (V8, SpiderMonkey) usan JIT (Just-In-Time compilation) que compila el código JavaScript a código máquina durante la ejecución para mejorar el rendimiento. Así que JavaScript es "interpretado con compilación JIT".

6. Scope (Ámbito)

JavaScript tiene varios tipos de scope que difieren de Java. Vamos a ver cada uno con ejemplos claros:

1. Scope Global

Variables declaradas fuera de cualquier función o bloque. Accesibles desde cualquier parte del código.

Scope Globaljavascript

1// Variables globales - Disponibles en TODO el código
2let nombreUsuario = "Ana";
3const PI = 3.14159;
4 
5function mostrarDatos() {
6  console.log(nombreUsuario); // ✅ "Ana"
7  console.log(PI);            // ✅ 3.14159
8}
9 
10if (true) {
11  console.log(nombreUsuario); // ✅ "Ana" - Accesible en bloques
12}
13 
14mostrarDatos();

2. Scope de Función

Variables declaradas dentro de una función. Solo accesibles dentro de esa función.

Scope de Funciónjavascript

1function procesarPedido() {
2  // Variables de función - Solo existen dentro de esta función
3  let pedidoId = 12345;
4  let total = 99.99;
5 
6  console.log(pedidoId); // ✅ 12345
7  console.log(total);    // ✅ 99.99
8}
9 
10procesarPedido();
11 
12// ❌ Error: pedidoId y total NO existen aquí
13console.log(pedidoId); // ReferenceError: pedidoId is not defined
14console.log(total);    // ReferenceError: total is not defined

3. Scope de Bloque (let/const)

Variables declaradas con let o const dentro de llaves { }. Solo existen dentro de ese bloque.

Scope de Bloque con let/constjavascript

1function ejemplo() {
2  let x = 10; // Scope de función
3 
4  if (true) {
5    // Scope de bloque - Solo existe dentro del if
6    let y = 20;
7    const z = 30;
8 
9    console.log(x); // ✅ 10 - Accede a la función
10    console.log(y); // ✅ 20
11    console.log(z); // ✅ 30
12  }
13 
14  console.log(x); // ✅ 10
15  console.log(y); // ❌ ReferenceError: y is not defined
16  console.log(z); // ❌ ReferenceError: z is not defined
17}
18 
19ejemplo();

4. Problema con var (NO respeta bloques)

var ignora el scope de bloque y solo respeta el scope de función. ¡Evita usar var!

Por qué evitar varjavascript

1function ejemploVar() {
2  if (true) {
3    var mensaje = "Hola"; // var NO respeta el bloque
4    let secreto = "Shhh"; // let SÍ respeta el bloque
5  }
6 
7  // ✅ var es accesible fuera del bloque (¡problema!)
8  console.log(mensaje); // "Hola"
9 
10  // ❌ let NO es accesible fuera del bloque (correcto)
11  console.log(secreto); // ReferenceError: secreto is not defined
12}
13 
14// Otro ejemplo del problema con var
15for (var i = 0; i < 3; i++) {
16  // var "escapa" del for
17}
18console.log(i); // ✅ 3 - ¡i sigue existiendo! (no debería)
19 
20// Con let funciona correctamente
21for (let j = 0; j < 3; j++) {
22  // let se queda en el for
23}
24console.log(j); // ❌ ReferenceError: j is not defined

5. Shadowing: Diferencia clave con Java

En JavaScript, puedes declarar una variable con el mismo nombre en un scope interno. Esto NO es posible en Java.

Java

❌ Shadowing NO permitido

1public class Ejemplo {
2  public static void main(String[] args) {
3    int x = 5;
4    System.out.println(x); // 5
5 
6    if (true) {
7      int x = 10; // ❌ ERROR DE COMPILACIÓN
8      // Error: variable x is already defined in method main(String[])
9    }
10  }
11}

JavaScript

✅ Shadowing permitido

1let x = 5;
2console.log(x); // 5
3 
4if (true) {
5  let x = 10; // ✅ PERMITIDO - Nueva variable
6  console.log(x); // 10 - Variable interna
7}
8 
9console.log(x); // 5 - Variable externa (sin cambios)
10 
11// Son dos variables DIFERENTES en scopes distintos

⚠️ Buenas prácticas con Scope

✅ Usa let y const: Respetan el scope de bloque
❌ Evita var: Causa comportamientos inesperados
💡 Declara en el scope más pequeño posible: Reduce errores
💡 Ten cuidado con shadowing: Puede confundir

7. El Ecosistema JavaScript Moderno

JavaScript ha evolucionado enormemente y cuenta con un ecosistema rico de herramientas y frameworks. Dos tecnologías que destacan son:

TypeScript

Es un superset de JavaScript que añade tipado estático opcional. Perfecto para desarrolladores que vienen de Java.

• Detecta errores en tiempo de desarrollo
• Mejor autocompletado en el IDE
• Se compila a JavaScript estándar

React

Es una biblioteca de JavaScript para construir interfaces de usuario con componentes reutilizables.

• Componentes declarativos y reutilizables
• Virtual DOM para alto rendimiento
• Gran comunidad y ecosistema

💡 Tu camino de aprendizaje

Primero domina JavaScript puro (este curso), luego podrás explorar TypeScript para añadir tipado y React para construir UIs complejas. También usaremos Astro, un framework moderno que combina lo mejor de varios mundos.

8. Conceptos Clave para Recordar

No hay tipos en las variables

Las variables pueden contener cualquier tipo de dato en cualquier momento

Usa let y const, evita var

Son más predecibles y respetan el scope de bloque

Declara antes de usar

Aunque el hoisting exista, siempre declara variables antes de usarlas

Todo es un objeto (casi)

Excepto null y undefined, todo en JS tiene propiedades y métodos

Punto y coma opcionales

JavaScript usa ASI (Automatic Semicolon Insertion), pero es buena práctica ponerlos

Case-sensitive

nombre, Nombre y NOMBRE son variables diferentes

Volver al inicio Siguiente: Variables y Tipos de Datos →