Aprender JavaScript

La sintaxis de JavaScript es el conjunto de reglas que definen cómo el programador construye los programas JavaScript y cómo el navegador o el tiempo de ejecución los interpreta.

Declaraciones y punto y coma

Una declaración de JavaScript es un comando que se le dice al motor:

javascriptCopy
let x = 10;
let y = 20;
let z = x + y;
console.log(z); // 30

Nota sobre el punto y coma: El punto y coma separa las declaraciones de JavaScript. Si bien la inserción automática de punto y coma (ASI) permite omitirlos en muchos casos, escribir punto y coma explícitos evita el análisis complicado de casos extremos.

Sensibilidad a mayúsculas y convenciones de nomenclatura

JavaScript distingue estrictamente entre mayúsculas y minúsculas:

• Las variables myVariable y myvariable son completamente distintas.
• La convención estándar para variables y funciones es lowerCamelCase (getUserProfile).
• Las clases y funciones de constructor usan UpperCamelCase (DeveloperProfile).
• Las constantes usan UPPER_SNAKE_CASE (MAX_RETRY_COUNT).

Comentarios

javascriptCopy
// Single line comment

/*
  Multi-line block comment
  useful for long descriptions or documentation
*/

Modo estricto ("use strict";)

El modo estricto evita errores silenciosos, prohíbe globales accidentales y prohíbe funciones de lenguaje problemáticas:

javascriptCopy
"use strict";

x = 3.14; // Uncaught ReferenceError: x is not defined (not declared with let/const)

Cuestionario interactivo: sintaxis

<div class=“interactive-quiz” data-answer=“2”> <div class=“quiz-question”>¿Qué convención de nomenclatura es estándar para funciones y variables en JavaScript?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-syn” value=“0”> <span>caso_serpiente</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-syn” value=“1”> <span>estuche-kebab</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-syn” value=“2”> <span>lowerCamelCase</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-syn” value=“3”> <span>SCREAMING_SNAKE_CASE</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Verificar respuesta</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

En JavaScript, las variables son contenedores para almacenar valores. JavaScript moderno (ES6+) proporciona tres palabras clave para declarar variables: const, let y el heredado var.

const frente a let frente a var

javascriptCopy
// Prefer const by default
const API_URL = "https://www.oldlane17.com";

// Use let when the value will change
let currentCount = 0;
currentCount += 1;

// Avoid var in modern code

Tipos de datos primitivos

JavaScript tiene 7 tipos de datos primitivos más object:

1. number: Tanto números enteros como flotantes (p. ej., 42, 3.14).
2. string: Secuencia de caracteres ("hello", 'world', `template ${val}`).
3. boolean: true o false.
4. undefined: Una variable declarada a la que no se le ha asignado un valor.
5. null: Representación explícita de “sin valor”.
6. bigint: Enteros de longitud arbitraria (9007199254740991n).
7. symbol: Identificador único e inmutable (Symbol("id")).

javascriptCopy
let title = "Old Lane 17";
console.log(typeof title);       // "string"
console.log(typeof 42);          // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (historic JS quirk!)

Cuestionario interactivo: variables<div class=“interactive-quiz” data-answer=“1”>

<div class=“quiz-question”>¿Qué error se produce al intentar reasignar una variable declarada con ‘const’?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-var” value=“0”> <span>Error de referencia</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-var” value=“1”> <span>TypeError (Asignación a variable constante)</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-var” value=“2”> <span>SyntaxError</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-var” value=“3”> <span>Sin error, reasigna silenciosamente</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Verificar respuesta</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

JavaScript incluye un amplio conjunto de operadores para realizar cálculos matemáticos, afirmaciones lógicas e inspecciones de objetos.

Igualdad estricta (===) frente a igualdad flexible (==)

Prefiera siempre la igualdad estricta (===) a la igualdad flexible (==):

• === (Estricto): verifica tanto el valor como el tipo sin coerción.
• == (Suelto): obliga a los tipos antes de la comparación, lo que genera resultados inesperados.

javascriptCopy
console.log(5 === "5"); // false (number !== string)
console.log(5 == "5");  // true  (string coerced to number)

console.log(0 === false); // false
console.log(0 == false);  // true

Operadores seguros modernos: ?. y ??

JavaScript moderno (ES2020+) introdujo dos operadores para manejar de forma segura null y undefined:

1. Encadenamiento opcional (?.)

Accede de forma segura a las propiedades de los objetos anidados sin lanzar TypeError: Cannot read properties of undefined:

javascriptCopy
const user = { profile: { name: "Alice" } };

// Without optional chaining: would crash if profile were null/undefined
console.log(user?.profile?.name); // "Alice"
console.log(user?.settings?.theme); // undefined (safe!)

2. Operador coalescente nulo (??)

Devuelve el operando de la derecha solo si el operando de la izquierda es null o undefined (a diferencia de || que también recurre a 0, "" o false):

javascriptCopy
const userScore = 0;

// Logical OR (||) treats 0 as falsy!
const displayA = userScore || 10;
console.log(displayA); // 10 (Incorrect: 0 was a valid score!)

// Nullish Coalescing (??) preserves 0 and empty string
const displayB = userScore ?? 10;
console.log(displayB); // 0 (Correct!)

Operadores de asignación lógica

javascriptCopy
let count = 0;
count ||= 5; // count becomes 5 (since 0 is falsy)

let title = null;
title ??= "Default Title"; // title becomes "Default Title"

Cuestionario interactivo: Operadores<div class=“interactive-quiz” data-answer=“2”>

<div class=“quiz-question”>¿Cuál es el resultado de: nulo? ‘Retroceso’ vs falso || ¿‘Retroceso’?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-ops” value=“0”> <span>‘Retroceso’ y falso</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-ops” value=“1”> <span>null y ‘Fallback’</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-ops” value=“2”> <span>‘Retroceso’ y ‘Retroceso’</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-ops” value=“3”> <span>null y false</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Verificar respuesta</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Las declaraciones condicionales se utilizan para realizar diferentes acciones en función de diferentes condiciones.

if, else if y else

javascriptCopy
const hour = new Date().getHours();
let greeting;

if (hour < 12) {
  greeting = "Good morning";
} else if (hour < 18) {
  greeting = "Good afternoon";
} else {
  greeting = "Good evening";
}

console.log(greeting);

El operador ternario (? :)

Una frase clara para asignar valores condicionales:

javascriptCopy
const age = 19;
const canVote = age >= 18 ? "Eligible to vote" : "Too young to vote";
console.log(canVote);

La declaración switch

Al evaluar una única variable frente a varios casos de coincidencia estricta:

javascriptCopy
const role = "editor";

switch (role) {
  case "admin":
    console.log("Full system access");
    break;
  case "editor":
    console.log("Can edit and publish articles");
    break;
  case "viewer":
    console.log("Read-only access");
    break;
  default:
    console.log("Guest access");
}

Advertencia: Incluya siempre break; al final de cada caso; de lo contrario, la ejecución pasará automáticamente al siguiente caso.

Cuestionario interactivo: condicionales

<div class=“interactive-quiz” data-answer=“1”> <div class=“quiz-question”>En una declaración de cambio, ¿qué sucede si olvida escribir una declaración de ‘interrupción’ en un caso coincidente?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-cond” value=“0”> <span>Se genera un error de sintaxis inmediatamente</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-cond” value=“1”> <span>La ejecución pasa al siguiente bloque de caso</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-cond” value=“2”> <span>La declaración de cambio se vuelve a ejecutar desde el principio</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-cond” value=“3”> <span>El bloque predeterminado se ejecuta en su lugar</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Verificar respuesta</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Los bucles ejecutan un bloque de código varias veces siempre que una condición especificada sea verdadera.

1. El bucle estándar for

javascriptCopy
for (let i = 0; i < 5; i++) {
  console.log(`Iteration: ${i}`);
}

2. for...of (Mejor para matrices e iterables)

for...of recorre los valores de un iterable (matrices, cadenas, conjuntos, mapas):

javascriptCopy
const frameworks = ["Vanilla JS", "Node.js", "Cloudflare Workers"];

for (const fw of frameworks) {
  console.log(`Building with ${fw}`);
}

3. for...in (Lo mejor para inspeccionar las propiedades de los objetos)

for...in itera sobre las claves de propiedad enumerables de un objeto:

javascriptCopy
const serverConfig = {
  host: "www.oldlane17.com",
  port: 443,
  ssl: true
};

for (const key in serverConfig) {
  console.log(`${key}: ${serverConfig[key]}`);
}

4. Métodos modernos de iteración de matrices

En JavaScript moderno, los métodos de matriz como .forEach(), .map() y .filter() se usan comúnmente:

javascriptCopy
const numbers = [1, 2, 3, 4, 5];

// Map creates a new array transformed
const doubled = numbers.map(n => n * 2);

// Filter returns elements that pass test
const evens = numbers.filter(n => n % 2 === 0);

Prueba interactiva: bucles

<div class=“interactive-quiz” data-answer=“2”> <div class=“quiz-question”>¿Qué estructura de bucle itera directamente sobre los VALORES de una matriz?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-loop” value=“0”> <span>para… en</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-loop” value=“1”> <span>interruptor…caso</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-loop” value=“2”> <span>para… de</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-loop” value=“3”> <span>mientras…cada uno</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Verificar respuesta</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Las funciones son los bloques de construcción fundamentales en JavaScript. Una función es un procedimiento reutilizable que recibe datos, realiza cálculos y devuelve un valor.

Declaraciones de funciones frente a expresiones

javascriptCopy
// Function Declaration (hoisted)
function add(a, b) {
  return a + b;
}

// Function Expression (not hoisted)
const multiply = function(a, b) {
  return a * b;
};

Funciones de flecha (=>)

Introducidas en ES6, las funciones de flecha ofrecen una sintaxis concisa y no vinculan su propio this:

javascriptCopy
// Standard arrow function
const subtract = (a, b) => {
  return a - b;
};

// Implicit return for single expressions
const square = x => x * x;

// Returning an object literal directly requires wrapping parentheses ({})
const makeUser = (name, role) => ({ name, role });

Parámetros de descanso y valores predeterminados

javascriptCopy
// Default parameter value
function formatMessage(msg, prefix = "INFO") {
  return `[${prefix}] ${msg}`;
}

// Rest parameters: collects extra arguments into a real Array
function sumAll(...numbers) {
  return numbers.reduce((acc, n) => acc + n, 0);
}

console.log(sumAll(10, 20, 30)); // 60

Cierres en JavaScript

Un cierre es la combinación de una función agrupada con referencias a su entorno léxico circundante:

javascriptCopy
function createCounter(initialValue = 0) {
  let count = initialValue;
  return {
    increment: () => ++count,
    decrement: () => --count,
    getValue: () => count
  };
}

const counter = createCounter(10);
console.log(counter.increment()); // 11
console.log(counter.increment()); // 12
console.log(counter.getValue());  // 12

Cuestionario interactivo: Funciones

<div class=“interactive-quiz” data-answer=“1”> <div class=“quiz-question”>¿Cómo maneja una función de flecha la palabra clave ‘esta’ en comparación con las funciones normales?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-fn” value=“0”> <span>Vincula ‘esto’ dinámicamente a la persona que llama</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-fn” value=“1”> <span>Hereda léxicamente ‘esto’ del alcance de ejecución adjunto</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-fn” value=“2”> <span>Siempre establece ‘esto’ en nulo</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-fn” value=“3”> <span>Se crea un nuevo global ‘este’</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Verificar respuesta</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Los objetos en JavaScript son colecciones de pares clave-valor donde las claves son cadenas (o símbolos) y los valores pueden ser cualquier tipo de datos.

Literales de objetos y taquigrafía

javascriptCopy
const name = "Old Lane 17";
const year = 2026;

// Property shorthand
const site = {
  name,
  year,
  // Method shorthand
  describe() {
    return `${this.name} (${this.year})`;
  }
};

console.log(site.describe());

Sintaxis de desestructuración y difusión

javascriptCopy
const config = { host: "localhost", port: 8788, ssl: false, debug: true };

// Object Destructuring with default values
const { host, port, protocol = "http" } = config;

// Spread syntax for shallow copying and merging
const productionConfig = {
  ...config,
  host: "www.oldlane17.com",
  ssl: true
};

Clases ES6

Las clases de ES6 proporcionan una capa de sintaxis limpia sobre la herencia basada en prototipos de JavaScript:

javascriptCopy
class Article {
  constructor(title, author) {
    this.title = title;
    this.author = author;
    this.likes = 0;
  }

  like() {
    this.likes += 1;
    return this.likes;
  }
}

class TutorialArticle extends Article {
  constructor(title, author, language) {
    super(title, author);
    this.language = language;
  }

  getSummary() {
    return `"${this.title}" (${this.language}) by ${this.author}`;
  }
}

const post = new TutorialArticle("Python Decorators", "Old Lane 17", "Python");
console.log(post.getSummary());

Cuestionario interactivo: objetos

<div class=“interactive-quiz” data-answer=“2”> <div class=“quiz-question”>¿Qué sintaxis extrae la propiedad ‘título’ de un objeto ‘artículo’ a una variable local?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-obj” value=“0”> <span>const [título] = artículo;</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-obj” value=“1”> <span>título constante <- article;</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-obj” value=“2”> <span>const {título} = artículo;</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-obj” value=“3”> <span>const título = extracto(artículo);</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Verificar respuesta</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>

Bienvenido al Tutorial de JavaScript de Old Lane 17. JavaScript es el lenguaje de programación de la Web. Impulsa interfaces de usuario dinámicas en el navegador, tiempos de ejecución de servidores modernos a través de Node.js y aplicaciones de escritorio/móviles.

¿Por qué aprender JavaScript?

• Ubicuo: Todos los navegadores modernos ejecutan JavaScript de forma nativa sin complementos.
• Capacidad de pila completa: Utilice JavaScript tanto en el cliente (frontend) como en el servidor (Node.js/Cloudflare Workers).
• Vasto ecosistema: Acceda a millones de paquetes de código abierto a través de npm.

javascriptCopy
// Modern JavaScript (ES6+)
const greet = (name) => {
  return `Hello, ${name}! Welcome to Old Lane 17.`;
};

const users = ["Alice", "Bob", "Charlie"];
users.forEach(user => console.log(greet(user)));

Descripción general del plan de estudios tutorial

Navegue por los cimientos centrales usando la barra lateral de la izquierda:

Prueba interactiva

Pruebe sus fundamentos de JavaScript:<div class=“interactive-quiz” data-answer=“1”> <div class=“quiz-question”>¿Qué palabra clave debería ser su opción predeterminada para declarar variables que no se reasignan en JavaScript moderno?</div> <div class=“quiz-options”> <label class=“quiz-option”><input type=“radio” name=“quiz-js-intro” value=“0”> <span>var</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-intro” value=“1”> <span>const</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-intro” value=“2”> <span>let</span></label> <label class=“quiz-option”><input type=“radio” name=“quiz-js-intro” value=“3”> <span>def</span></label> </div> <button class=“btn quiz-check-btn” type=“button”>Verificar respuesta</button> <div class=“quiz-feedback” aria-live=“polite”></div> </div>