JavaScript Básico

01. Variables

// let, const y var — cómo declarar y usar datos

1

let y const

let nombre = "Ana";
const edad = 25;
let activo = true;

console.log(nombre, edad, activo);

▶ Pruébalo

2

Tipos de datos

const texto   = "Hola mundo";  // string
const numero  = 42;           // number
const decimal = 3.14;         // float
const booleano= true;         // boolean
const nada    = null;         // null

typeof texto;  // "string"

▶ Inspeccionar tipos

3

Template literals

const nombre = "Carlos";
const edad = 30;

// Concatenación tradicional:
"Hola, " + nombre + ". Tienes " + edad + " años."

// Template literal (moderno):
`Hola, ${nombre}. Tienes ${edad} años.`

▶ Genera tu mensaje

02. Operadores

// aritméticos, de comparación y lógicos

1

Calculadora aritmética

const a = 10, b = 3;

a + b;   // 13  — suma
a - b;   // 7   — resta
a * b;   // 30  — multiplicación
a / b;   // 3.33— división
a % b;   // 1   — módulo (resto)
a ** b;  // 1000— potencia

▶ Prueba operadores

2

Comparaciones

5 == "5"   // true  (valor)
5 === "5"  // false (valor+tipo)
5 != 3    // true
5 > 3     // true
5 <= 5    // true

▶ Comparar valores

3

Lógicos &&, ||, !

true && false  // false (AND)
true || false  // true  (OR)
!true          // false (NOT)

// Ejemplo real:
const edad = 20;
const tieneID = true;
edad >= 18 && tieneID; // true

▶ ¿Puede entrar al club?

tiene ID

03. Condicionales

// if / else if / else — tomar decisiones

1

If / Else If / Else

function calificar(nota) {
  if (nota >= 90) {
    return "Sobresaliente 🏆";
  } else if (nota >= 70) {
    return "Aprobado ✅";
  } else if (nota >= 50) {
    return "Regular ⚠️";
  } else {
    return "Reprobado ❌";
  }
}

▶ Califica tu nota

2

Operador ternario

// condición ? valorTrue : valorFalse

const edad = 20;
const estado = edad >= 18
  ? "Mayor de edad"
  : "Menor de edad";

// Equivale al if/else tradicional

▶ Mayor o menor

3

Switch

function diaSemana(n) {
  switch(n) {
    case 1: return "Lunes";
    case 2: return "Martes";
    case 3: return "Miércoles";
    case 4: return "Jueves";
    case 5: return "Viernes";
    default: return "Fin de semana";
  }
}

▶ Número → Día

04. Bucles

// for, while, forEach — repetir acciones

1

FizzBuzz clásico

for (let i = 1; i <= 30; i++) {
  if (i % 15 === 0)      print("FizzBuzz");
  else if (i % 3 === 0) print("Fizz");
  else if (i % 5 === 0) print("Buzz");
  else                   print(i);
}

▶ Hasta N

2

While — contador

let count = 0;

while (count < 5) {
  console.log(`Vuelta ${count + 1}`);
  count++;
}

▶ Simulador interactivo

0

3

For...of — iterar

const frutas = [
  "🍎 Manzana",
  "🍌 Banana",
  "🍇 Uvas"
];

for (const fruta of frutas) {
  console.log(fruta);
}

▶ Agrega frutas (separadas por coma)

05. Funciones

// declaradas, expresiones y arrow functions

1

Función declarada

function saludar(nombre) {
  return `¡Hola, ${nombre}!`;
}

saludar("Mundo"); // ¡Hola, Mundo!

▶ Llama la función

2

Arrow function

// Sintaxis corta y moderna:
const cuadrado = (n) => n ** 2;
const suma     = (a, b) => a + b;
const pi       = () => 3.1416;

cuadrado(5);   // 25
suma(3, 4);    // 7

▶ Cuadrado de N

3

Función con parámetros por defecto

function presentar(
  nombre = "Desconocido",
  rol    = "Visitante",
  nivel  = 1
) {
  return `👤 ${nombre} | ${rol} | Nivel ${nivel}`;
}

presentar();                     // usa defaults
presentar("Laura", "Dev", 5);  // personalizado

▶ Genera tu presentación

06. Arrays

// map, filter, reduce — el poder funcional

1

map() — transformar

const nums = [1, 2, 3, 4, 5];

// Duplicar cada elemento:
const dobles = nums.map(n => n * 2);
// [2, 4, 6, 8, 10]

▶ Números (separados por coma) → Multiplicar por

×

2

filter() — filtrar

const nums = [1,2,3,4,5,6];

const pares = nums
  .filter(n => n % 2 === 0);
// [2, 4, 6]

▶ Filtrar mayores que

>

3

reduce() — acumular

const nums = [10, 20, 30];

const total = nums.reduce(
  (acc, n) => acc + n, 0
);
// 60

▶ Suma total