Aprende JavaScript en 10 minutos

1 September 2025 — Lenguaje De Programación

JavaScript es un lenguaje de programación interpretado de alto nivel conocido por su versatilidad y uso generalizado en el desarrollo web. Este tutorial cubre las características modernas de JavaScript (ES6+) para ayudarte a aprender rápidamente el lenguaje.

1. Escribiendo tu primer programa en JavaScript

Comencemos con un programa simple. Crea un archivo llamado hello.js e ingresa el siguiente código:

console.log("Hello, World!");

Guarda el archivo y ejecuta el siguiente comando en la terminal o línea de comandos:

node hello.js

O inclúyelo en un archivo HTML:

<script>
  console.log("Hello, World!");
</script>

La salida será:

Hello, World!

Este programa simple demuestra la funcionalidad básica de salida de JavaScript. La función console.log() se utiliza para mostrar información de texto en la consola.

2. Sintaxis básica

La sintaxis de JavaScript es similar a otros lenguajes de estilo C. Utiliza punto y coma para terminar declaraciones y llaves {} para definir bloques de código.

// Este es un comentario de una línea
console.log("Hello, World!");

/*
Este es un comentario
multilínea que abarca
varias líneas.
*/

Reglas básicas de sintaxis en JavaScript:

Punto y coma: Opcional pero recomendado para terminar declaraciones
Comentarios: Los comentarios de una línea comienzan con //, los multilínea con /* */
Sensibilidad a mayúsculas: JavaScript distingue entre mayúsculas y minúsculas
Bloques de código: Definidos por llaves {}

3. Variables y tipos de datos

En JavaScript, las variables se declaran usando let, const o var. JavaScript moderno prefiere let y const.

Declaración de variables:

let name = "John"; // Variable mutable
const age = 25;     // Constante inmutable
var oldWay = "deprecated"; // Evita usar var

Principales tipos de datos de JavaScript:

Number: 42, 3.14, -10
String: "hello", 'world', `template`
Boolean: true, false
Undefined: undefined (variable declarada pero no asignada)
Null: null (ausencia intencional de valor)
Object: {key: "value"}, [1, 2, 3]
Symbol: Symbol("description") (ES6+)
BigInt: 1234567890123456789012345678901234567890n (ES2020+)

3.1 Tipo Number

JavaScript utiliza números de punto flotante de 64 bits para todos los valores numéricos.

let integer = 42;
let float = 3.14159;
let scientific = 2.5e3; // 2500
let hex = 0xFF;         // 255
let binary = 0b1010;    // 10
let octal = 0o10;       // 8

3.2 Tipo String

Las cadenas se pueden crear con comillas simples, comillas dobles o literales de plantilla.

let single = 'Cadena con comillas simples';
let double = "Cadena con comillas dobles";
let template = `Literal de plantilla`;

// Literales de plantilla con interpolación
let name = "Alice";
let greeting = `¡Hola, ${name}!`; // "¡Hola, Alice!"

Operaciones con cadenas:

let text = "Programación JavaScript";
console.log(text.length);        // Longitud: 21
console.log(text.toUpperCase()); // "PROGRAMACIÓN JAVASCRIPT"
console.log(text.toLowerCase()); // "programación javascript"
console.log(text[0]);            // Primer carácter: "P"
console.log(text.slice(0, 10)); // "Programación"

3.3 Tipo Boolean

El tipo booleano tiene dos valores: true y false.

let isActive = true;
let isComplete = false;

// Operaciones booleanas
let result1 = true && false;  // false
let result2 = true || false;  // true
let result3 = !true;          // false

3.4 Undefined y Null

undefined significa que una variable ha sido declarada pero no se le ha asignado un valor. null es una ausencia intencional de cualquier valor.

let unassigned; // undefined
let empty = null;

if (unassigned === undefined) {
  console.log("Variable no definida");
}

if (empty === null) {
  console.log("Valor nulo");
}

4. Estructuras de datos

4.1 Array

Los arrays son colecciones ordenadas y mutables de valores.

let numbers = [1, 2, 3, 4, 5];
numbers.push(6);        // Agregar elemento: [1, 2, 3, 4, 5, 6]
numbers.pop();          // Eliminar último: [1, 2, 3, 4, 5]
numbers.unshift(0);     // Agregar al inicio: [0, 1, 2, 3, 4, 5]
numbers.shift();        // Eliminar primero: [1, 2, 3, 4, 5]
numbers[0] = 10;        // Modificar: [10, 2, 3, 4, 5]

Métodos de array:

let fruits = ["manzana", "banana", "naranja"];

// Iteración
fruits.forEach(fruit => console.log(fruit));

// Transformación
let lengths = fruits.map(fruit => fruit.length); // [7, 6, 7]

// Filtrado
let longFruits = fruits.filter(fruit => fruit.length > 6); // ["manzana", "naranja"]

// Búsqueda
let hasApple = fruits.includes("manzana"); // true
let bananaIndex = fruits.indexOf("banana"); // 1

4.2 Object

Los objetos son colecciones de pares clave-valor.

let person = {
  name: "John",
  age: 30,
  city: "Nueva York",
  isStudent: false
};

// Accediendo a propiedades
console.log(person.name);       // "John"
console.log(person["age"]);     // 30

// Agregando propiedades
person.country = "USA";
person["occupation"] = "Desarrollador";

// Eliminando propiedades
delete person.isStudent;

// Métodos de objeto
let keys = Object.keys(person);    // ["name", "age", "city", "country", "occupation"]
let values = Object.values(person); // ["John", 30, "Nueva York", "USA", "Desarrollador"]
let entries = Object.entries(person); // [["name", "John"], ["age", 30], ...]

4.3 Set

Los sets son colecciones de valores únicos.

let numbers = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(numbers); // Set {1, 2, 3, 4, 5}

// Operaciones con sets
numbers.add(6);       // Agregar valor
numbers.delete(1);    // Eliminar valor
numbers.has(2);       // true
numbers.size;         // 5

// Iterando
numbers.forEach(num => console.log(num));

4.4 Map

Los maps son colecciones de pares clave-valor con cualquier tipo de dato como clave.

let map = new Map();
map.set("name", "Alice");
map.set(1, "número uno");
map.set(true, "booleano verdadero");

console.log(map.get("name"));    // "Alice"
console.log(map.has(1));         // true
console.log(map.size);           // 3

// Iterando
for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

5. Operadores

JavaScript proporciona varios operadores para cálculos y comparaciones.

Aritméticos: +, -, *, /, %, ** (exponenciación)
Comparación: ==, ===, !=, !==, >, <, >=, <=
Lógicos: &&, ||, !
Asignación: =, +=, -=, *=, /=, %=
Ternario: condición ? expr1 : expr2

5.1 Operadores aritméticos

let a = 10, b = 3;

console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1
console.log(a ** b);  // 1000

5.2 Operadores de comparación

let x = 5, y = 10;

console.log(x == y);    // false
console.log(x === y);   // false (igualdad estricta)
console.log(x != y);    // true
console.log(x !== y);   // true (desigualdad estricta)
console.log(x > y);     // false
console.log(x < y);     // true
console.log(x >= y);    // false
console.log(x <= y);    // true

5.3 Operadores lógicos

let a = true, b = false;

console.log(a && b);   // false
console.log(a || b);   // true
console.log(!a);       // false

6. Control de flujo

6.1 Sentencias if

let age = 20;

if (age >= 18) {
  console.log("Adulto");
} else if (age >= 13) {
  console.log("Adolescente");
} else {
  console.log("Niño");
}

6.2 Sentencia switch

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("Inicio de semana");
    break;
  case "Friday":
    console.log("Casi fin de semana");
    break;
  default:
    console.log("Día regular");
}

6.3 Bucles for

// Bucle for tradicional
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// Bucle for...of (arrays, strings)
let fruits = ["manzana", "banana", "naranja"];
for (let fruit of fruits) {
  console.log(fruit);
}

// Bucle for...in (propiedades de objeto)
let person = {name: "John", age: 30};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

6.4 Bucles while

// Bucle while
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

// Bucle do...while
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

6.5 break y continue

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // Salir del bucle
  }
  if (i % 2 === 0) {
    continue; // Saltar números pares
  }
  console.log(i); // 1, 3
}

7. Funciones

Las funciones son bloques de código reutilizables.

7.1 Declaración de funciones

function greet(name) {
  return `¡Hola, ${name}!`;
}

console.log(greet("Alice")); // "¡Hola, Alice!"

7.2 Expresiones de función

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 5)); // 20

7.3 Funciones flecha (ES6+)

const add = (a, b) => a + b;
const square = x => x * x;
const greet = name => `¡Hola, ${name}!`;

console.log(add(2, 3));      // 5
console.log(square(4));      // 16
console.log(greet("Bob"));   // "¡Hola, Bob!"

7.4 Parámetros por defecto

function createUser(name, age = 18, isActive = true) {
  return {name, age, isActive};
}

console.log(createUser("John"));        // {name: "John", age: 18, isActive: true}
console.log(createUser("Alice", 25));  // {name: "Alice", age: 25, isActive: true}

7.5 Parámetros rest

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(5, 10, 15));  // 30

7.6 Operador de propagación

let numbers = [1, 2, 3];
let moreNumbers = [4, 5, 6];
let allNumbers = [...numbers, ...moreNumbers]; // [1, 2, 3, 4, 5, 6]

let person = {name: "John", age: 30};
let updatedPerson = {...person, city: "Nueva York"}; // {name: "John", age: 30, city: "Nueva York"}

8. Clases y objetos (ES6+)

8.1 Declaración de clase

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    return `Soy ${this.name}, tengo ${this.age} años`;
  }

  haveBirthday() {
    this.age++;
    return `${this.name} cumplió años, ahora tiene ${this.age} años`;
  }
}

let person = new Person("John", 25);
console.log(person.introduce());      // "Soy John, tengo 25 años"
console.log(person.haveBirthday());   // "John cumplió años, ahora tiene 26 años"

8.2 Herencia

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} hace un sonido`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name, "Perro");
    this.breed = breed;
  }

  makeSound() {
    return `${this.name} ladra`;
  }

  fetch() {
    return `${this.name} busca la pelota`;
  }
}

let dog = new Dog("Buddy", "Golden Retriever");
console.log(dog.makeSound()); // "Buddy ladra"
console.log(dog.fetch());     // "Buddy busca la pelota"

8.3 Getters y Setters

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  get diameter() {
    return this.radius * 2;
  }

  set diameter(diameter) {
    this.radius = diameter / 2;
  }

  get area() {
    return Math.PI * this.radius ** 2;
  }
}

let circle = new Circle(5);
console.log(circle.diameter); // 10
console.log(circle.area);     // 78.53981633974483

circle.diameter = 20;
console.log(circle.radius);   // 10

9. JavaScript asíncrono

9.1 Callbacks

function fetchData(callback) {
  setTimeout(() => {
    callback("Datos recibidos");
  }, 1000);
}

fetchData(data => {
  console.log(data); // "Datos recibidos" después de 1 segundo
});

9.2 Promesas

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Datos recibidos");
      // reject("Error ocurrido");
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data)) // "Datos recibidos"
  .catch(error => console.error(error));

9.3 async/await (ES2017+)

async function getData() {
  try {
    let data = await fetchData();
    console.log(data); // "Datos recibidos"
  } catch (error) {
    console.error(error);
  }
}

getData();

9.4 Fetch API

async function getUser() {
  try {
    let response = await fetch('https://api.example.com/user');
    let user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('Error:', error);
  }
}

10. Manejo de errores

try {
  let result = 10 / 0;
  if (!isFinite(result)) {
    throw new Error("División por cero");
  }
  console.log(result);
} catch (error) {
  console.error("Error:", error.message);
} finally {
  console.log("Esto siempre se ejecuta");
}

11. Módulos (ES6+)

11.1 Exportación

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export default function multiply(a, b) {
  return a * b;
}

11.2 Importación

// main.js
import multiply, { PI, add } from './math.js';

console.log(PI);           // 3.14159
console.log(add(2, 3));    // 5
console.log(multiply(4, 5)); // 20

12. Características modernas de JavaScript

12.1 Desestructuración

// Desestructuración de array
let [first, second, third] = [1, 2, 3];
console.log(first, second, third); // 1 2 3

// Desestructuración de objeto
let {name, age} = {name: "John", age: 30, city: "NY"};
console.log(name, age); // John 30

// Desestructuración de parámetros de función
function greet({name, age}) {
  return `Hola ${name}, tienes ${age} años`;
}

12.2 Literales de plantilla

let name = "Alice";
let age = 25;

// Interpolación básica
let greeting = `¡Hola, ${name}!`;

// Cadenas multilínea
let message = `
  Nombre: ${name}
  Edad: ${age}
  Estado: ${age >= 18 ? "Adulto" : "Menor"}
`;

// Evaluación de expresiones
let calculation = `2 + 3 = ${2 + 3}`; // "2 + 3 = 5"

12.3 Encadenamiento opcional (?.)

let user = {
  profile: {
    name: "John",
    address: {
      city: "Nueva York"
    }
  }
};

console.log(user?.profile?.name);           // "John"
console.log(user?.profile?.age);            // undefined
console.log(user?.profile?.address?.city);  // "Nueva York"
console.log(user?.employment?.company);     // undefined (sin error)

12.4 Fusión de nulos (??)

let name = "";
let age = 0;
let city = null;
let country = undefined;

console.log(name || "Desconocido");    // "Desconocido" (cadena vacía es falsy)
console.log(name ?? "Desconocido");    // "" (solo null/undefined)

console.log(age || 18);           // 18 (0 es falsy)
console.log(age ?? 18);           // 0 (solo null/undefined)

console.log(city ?? "Desconocido");   // "Desconocido"
console.log(country ?? "USA");    // "USA"

13. Métodos útiles de arrays

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

// map: transformar cada elemento
let squares = numbers.map(n => n * n); // [1, 4, 9, 16, 25]

// filter: seleccionar elementos
let evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce: acumular valores
let sum = numbers.reduce((total, n) => total + n, 0); // 15

// find: encontrar primer elemento coincidente
let firstEven = numbers.find(n => n % 2 === 0); // 2

// some: verificar si algún elemento coincide
let hasEven = numbers.some(n => n % 2 === 0); // true

// every: verificar si todos los elementos coinciden
let allPositive = numbers.every(n => n > 0); // true

// sort: ordenar elementos
let sorted = numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]

14. Fechas y horas

let now = new Date();
console.log(now.toString());      // Fecha y hora actual
console.log(now.getFullYear());   // Año actual
console.log(now.getMonth());      // Mes actual (0-11)
console.log(now.getDate());       // Día actual (1-31)
console.log(now.getHours());      // Hora actual (0-23)

// Formateo de fechas
console.log(now.toLocaleDateString()); // Cadena de fecha localizada
console.log(now.toLocaleTimeString()); // Cadena de hora localizada
console.log(now.toISOString());        // Cadena en formato ISO

// Creación de fechas específicas
let specificDate = new Date(2025, 0, 1); // 1 de enero de 2025
let timestamp = new Date(1640995200000); // Desde timestamp

15. Expresiones regulares

let text = "Hola, mi correo es [email protected] y mi teléfono es 123-456-7890";

// Patrón de email
let emailPattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
let emails = text.match(emailPattern); // ["[email protected]"]

// Patrón de teléfono
let phonePattern = /\d{3}-\d{3}-\d{4}/g;
let phones = text.match(phonePattern); // ["123-456-7890"]

// Método test
let isValidEmail = emailPattern.test("[email protected]"); // true

// Método replace
let maskedText = text.replace(phonePattern, "XXX-XXX-XXXX");
console.log(maskedText);

JavaScript es un lenguaje poderoso y versátil que continúa evolucionando. Este tutorial cubre los conceptos esenciales para comenzar, pero hay mucho más por explorar, incluidos temas avanzados como generadores, proxies y APIs web.