Categoría: Programación

Bloques de código

Hasta ahora, asumimos que después de declarar una variable, su nombre podría usarse en todo el código del programa (es decir, el alcance de la variable es global). Esto no es del todo cierto: el alcance de una variable depende de dónde se declare. Desafortunadamente, para una buena comprensión del alcance de una variable, necesitamos aprender algunos elementos de programación más, como instrucciones o funciones condicionales, que se analizarán con detalle más adelante en el curso. Así que aquí nos limitaremos a la información básica y volveremos a este tema en diferentes partes del curso. Uno de los elementos básicos que influyen en el alcance de las variables es un bloque del programa.

Podemos separar el código de un programa en bloques. En los bloques que creamos usando llaves {}, hay un conjunto de instrucciones que, por alguna razón, deben tratarse de forma independiente. Los bloques suelen estar asociados a instrucciones condicionales, bucles o funciones. También podemos separar un bloque de un programa que no tenga nada en especial, simplemente eligiendo un determinado rango de instrucciones.

{
    counter = 1;
 {
        console.log(counter); // -> 1
 }
}

Es hora de seguir adelante para determinar qué está pasando realmente con estos alcances. Desafortunadamente, los alcances de las variables (y constantes) declaradas con let y const son ligeramente diferentes a las declaradas con var. Así que los discutiremos de forma independiente.

let y const

En JavaScript, la declaración let const se utiliza para declarar variables que tienen un alcance de bloque. Esto significa que la variable sólo está disponible dentro del bloque de código en el que se ha declarado, y no está disponible en ningún otro lugar del programa.

if (true) {
  let x = "hello";
  console.log(x); // "hello"
}
console.log(x); // ReferenceError: x is not defined

En este ejemplo, la variable x se declara dentro del bloque de código del bloque if. Está disponible dentro del bloque y se puede acceder a ella en la primera línea de console.log(). Sin embargo, intentar acceder a x fuera del bloque de código del bloque if resulta en un error de referencia, ya que x no está definida en ese ámbito.

El alcance de bloque también se aplica a los bucles for y a otras estructuras de control de flujo. Por ejemplo:

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}
console.log(i); // ReferenceError: i is not defined

En este ejemplo, la variable i se declara dentro del bloque de código del bucle for. Está disponible dentro del bucle y se puede acceder a ella en cada iteración. Sin embargo, intentar acceder a i fuera del bucle resulta en un error de referencia, ya que i no está definida en ese ámbito.

En resumen, el alcance de una variable declarada con let es el bloque de código en el que se ha declarado. Fuera de ese bloque, la variable no está disponible y se produce un error de referencia si se intenta acceder a ella.

var

la declaración var se utiliza para declarar variables. A diferencia de la declaración let, que tiene un alcance de bloque, las variables declaradas con var tienen un alcance de función o global.

Si se declara una variable con var dentro de una función, está disponible en toda la función. Por ejemplo:

function foo() {
 if (true) {
 var x = "hello";
 }
  console.log(x); // "hello"
}

En este ejemplo, la variable x se declara dentro del bloque de código del bloque if, pero está disponible en toda la función foo(). Esto se debe a que el alcance de una variable declarada con var es la función en la que se ha declarado.

Si se declara una variable con var fuera de una función, está disponible en todo el ámbito global. Por ejemplo:

var x = "hello";
function foo() {
  console.log(x); // "hello"
}

En este ejemplo, la variable x se declara fuera de cualquier función, por lo que tiene un alcance global. Está disponible en todo el código del programa y se puede acceder a ella desde cualquier función.

Es importante tener en cuenta que el alcance de var puede dar lugar a comportamientos inesperados en algunos casos. Por ejemplo, si se declara una variable con var dentro de un bucle for, esta variable estará disponible en toda la función o el ámbito global, incluso después de que el bucle haya finalizado.

for (var i = 0; i < 5; i++) {
 // ...
}
console.log(i); // 5

En este ejemplo, la variable i se declara dentro del bucle for, pero está disponible en toda la función o el ámbito global. Esto puede dar lugar a comportamientos inesperados y es una de las principales razones por las que se recomienda utilizar let en lugar de var para declarar variables en JavaScript.

En resumen, el alcance de una variable declarada con var es la función o el ámbito global en el que se ha declarado. Esto puede dar lugar a comportamientos inesperados en algunos casos y se recomienda utilizar let en su lugar, que tiene un alcance de bloque más predecible.

En JavaScript existen objetos integrados que forman parte del núcleo del lenguaje. No necesitas crearlos: ya existen y puedes usarlos directamente.

Los más importantes:

• Math → cálculos matemáticos
• Object → base de todos los objetos
• Array → colecciones de datos
• String → texto
• Date → fechas y tiempo

Acceso a propiedades y métodos

Se usa el operador punto (.)

Propiedad (dato)

miObjeto.miPropiedad

Método (acción)

miObjeto.miMetodo(param1, param2)
miObjeto.miMetodo()

Objeto Math

Sirve para realizar cálculos matemáticos. No se instancia.

alert(Math.random());

Genera número decimal entre 0 y 1

letnumero=Math.floor(Math.random() *10);
alert(numero);

Métodos principales de Math

Objeto String

Cuando creas texto, JavaScript crea un objeto String.

let texto="Hola mundo";
alert(texto.length);

Métodos principales de String

Objeto Array

Colecciones ordenadas de datos.

let numeros= [10,20,30];
numeros.push(40);

Métodos principales de Array

Objeto Object

Es la base de todos los objetos en JavaScript.

let persona= {nombre: "Ana",edad: 20};
alert(persona.nombre);

Métodos principales de Object

Objeto Date

El objeto Date representa fechas y tiempo. Internamente guarda milisegundos desde 1 enero 1970 (Unix Epoch).

let ahora = new Date();
alert(ahora);

Crear fechas

new Date()                      // Fecha actual
new Date("2025-12-25")          // Desde texto
new Date(2025, 0, 1)            // Año, mes(0-11), día

Métodos principales de Date

Ejemplo práctico Date

let ahora = new Date();

let mensaje =
  "Hoy es: " + ahora.toLocaleDateString() +
  "\nHora: " + ahora.toLocaleTimeString();

alert(mensaje);

Concepto clave

En JavaScript:

• Las propiedades describen
• Los métodos actúan

Ejemplo:

texto.length        → dato
texto.toUpperCase() → acción
fecha.getFullYear() → acción sobre el tiempo

Otros objetos disponibles en JavaScript

• JSON → traductor entre objetos y texto
• Map vs Object → Map está optimizado para colecciones dinámicas
• Set → evita duplicados automáticamente
• Promise → permite esperar resultados sin bloquear el programa
• RegExp → motor de búsqueda textual extremadamente potente
• Symbol → claves invisibles para evitar colisiones
• BigInt → números más allá del límite de Number

Ejemplos

JSON

let texto = '{"nombre":"Ana"}';
let obj = JSON.parse(texto);
alert(obj.nombre);

Map

let mapa = new Map();
mapa.set("usuario", "admin");
alert(mapa.get("usuario"));

Set

let mapa = new Map();
mapa.set("usuario", "admin");
alert(mapa.get("usuario"));

Promise (idea básica)

fetch("datos.json")
  .then(r => r.json())
  .then(datos => console.log(datos));

Ejercicios

Ejercicio 1

Mostrar un número aleatorio del 1 al 100.

Ejercicio 2

Crear un texto con tu nombre y mostrar:

• Longitud
• En mayúsculas
• Si contiene la letra «a»

Ejercicio 3

Crear un array con 3 números y:

• Añadir uno
• Mostrar tamaño
• Mostrar si contiene el número 5

Ejercicio 4

Mostrar:

• Año actual
• Mes actual
• Hora actual

Un array es una estructura que permite almacenar múltiples valores en una sola variable.

Puede contener:

• Números
• Texto
• Objetos
• Otros arrays
• Mezclas de todo (JavaScript no es quisquilloso)

Crear un array

let numeros= [10, 20, 30];

También:

letvacio= [];

O usando el constructor:

let lista=new Array(1,2,3);

Acceder a elementos

Los arrays empiezan en índice 0 (como casi todo en informática).

let colores = ["rojo", "verde", "azul"];

alert(colores[0]); // rojo
alert(colores[2]); // azul

Propiedad fundamental

let numeros = [1,2,3,4];
alert(numeros.length);

length → número de elementos

Métodos principales de Array

Añadir y eliminar

let lista = [10,20];

lista.push(30);   // añade al final
lista.pop();      // elimina último
lista.unshift(5); // añade al inicio
lista.shift();    // elimina primero

Buscar elementos

let numeros = [10,20,30];

numeros.includes(20); // true
numeros.indexOf(30);  // 2

Convertir a texto

let colores = ["rojo","verde","azul"];
alert(colores.join(" - "));

Resultado:

rojo - verde - azul

Extraer partes

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

let sub = datos.slice(1,4); // [2,3,4]

slice no modifica el original.

Modificar el array

let datos = [1,2,3,4];

datos.splice(1,2); // elimina desde posición 1 → elimina 2 elementos

Resultado:

[1,4]

Video Arrays

Tabla completa de métodos importantes

Recorrer arrays

Método clásico

let numeros = [10,20,30];

for (let i = 0; i < numeros.length; i++) {
  console.log(numeros[i]);
}

forEach

numeros.forEach(function(n) {
  console.log(n);
});

map (transformar)

let dobles = numeros.map(n => n * 2);

filter (filtrar)

let mayores = numeros.filter(n => n > 15);

Arrays con objetos

let alumnos = [
  {nombre:"Ana", nota:8},
  {nombre:"Luis", nota:5}
];

console.log(alumnos[0].nombre);

Esto es el paso previo al JSON del backend → DOM

Conceptos clave

• Los arrays pueden crecer dinámicamente
• Pueden contener cualquier tipo
• Son objetos (typeof array → "object")
• map/filter/find son la base del JavaScript moderno

Ejercicios para alumnos

Ejercicio 1

Crear un array con 5 números y mostrar el tamaño.

Ejercicio 2

Añadir un número y eliminar el primero.

Ejercicio 3

Mostrar solo los números mayores que 10.

Ejercicio 4

Crear un array de nombres y convertirlos a mayúsculas con map.

Ejercicio 5

Crear un array de objetos alumno {nombre, nota} y mostrar solo los aprobados.

Una función es un bloque de código reutilizable que ejecuta una tarea concreta.
Sirve para organizar, reutilizar y abstraer lógica.

Idea clave: no repitas código, encapsúlalo.

Ejemplo mental: una cafetera.
Entras agua + café → proceso → sale café.
La función hace exactamente eso, pero con datos.

2. Sintaxis básica

function nombreFuncion() {
    // código a ejecutar
}

Ejemplo:

function saludar() {
    console.log("Hola mundo");
}

La función no se ejecuta sola. Hay que llamarla:

saludar();

3. Funciones con parámetros

Los parámetros son datos que recibe la función.

function saludar(nombre) {
    console.log("Hola " + nombre);
}

saludar("Antonio");
saludar("Bea");

La función se adapta al dato. Eso es abstracción.

4. Retorno de valores (return)

Una función puede devolver un resultado.

function saludar(nombre) {
    console.log("Hola " + nombre);
}

saludar("Antonio");
saludar("Bea");

Sin return, la función devuelve undefined.

Concepto importante:
return termina la ejecución de la función.

5. Parámetros vs argumentos

• Parámetros → variables definidas en la función
• Argumentos → valores reales que se pasan al llamar

functionmultiplicar(x, y) {   // parámetrosreturnx*y;}multiplicar(4, 2);             // argumentos

6. Funciones que llaman a otras funciones

Las funciones pueden componer comportamiento.

function cuadrado(n) {
    return n * n;
}

function mostrarCuadrado(num) {
    let resultado = cuadrado(num);
    console.log(resultado);
}

mostrarCuadrado(5);

Esto es modularidad. Construir piezas pequeñas y combinarlas.

7. Funciones anónimas

Funciones sin nombre, normalmente guardadas en variables.

let saludar = function(nombre) {
    return "Hola " + nombre;
};

console.log(saludar("Carlos"));

8. Arrow functions (funciones flecha)

Forma moderna y compacta.

let sumar = (a, b) => {
    return a + b;
};

Si solo hay una línea:

let sumar = (a, b) => {
    return a + b;
};

Si solo hay un parámetro:

let cuadrado = n => n * n;

9. Ámbito (scope)

El scope define dónde existe una variable.

function prueba() {
    let x = 10;
    console.log(x);
}

prueba();
console.log(x); // ERROR

x solo vive dentro de la función.
Esto protege el programa de efectos colaterales.

10. Buenas prácticas

Nombres claros

Mal:

functionf(x) {}

Bien:

function calcularTotal(precio, iva) {}

Funciones pequeñas

Una función debe hacer una sola cosa.

Evitar repetir código

Si copias y pegas → necesitas una función.

11. Ejemplos prácticos

Calcular precio con IVA

function calcularPrecioConIVA(precio) {
    return precio * 1.21;
}

console.log(calcularPrecioConIVA(100));

Verificar si un número es par

function esPar(numero) {
    return numero % 2 === 0;
}

console.log(esPar(4));
console.log(esPar(7));

Convertir JSON recibido del backend (pensando en JEE)

function pintarUsuario(usuario) {
    console.log("Nombre: " + usuario.nombre);
    console.log("Email: " + usuario.email);
}

let json = {
    nombre: "Antonio",
    email: "antonio@email.com"
};

pintarUsuario(json);

Aquí empieza el puente hacia DOM + datos del servidor.

12. Ejercicios

1. Crear función que calcule el área de un rectángulo
2. Crear función que convierta grados Celsius a Fahrenheit
3. Crear función que reciba un nombre y devuelva: "Bienvenido <nombre>"
4. Crear función que reciba un array y devuelva la suma total