aimenu

Objetos predefinidos

Introducción a Objetos y Funciones Predefinidas en JavaScript

JavaScript posee de forma nativa una gran cantidad de funciones y objetos predefinidos que permiten crear código más eficiente, claro y ahorrar tiempo.
Un objeto es una colección de: - Propiedades (valores) - Métodos (funciones) - Eventos (acciones)

Para acceder a una propiedad o método de un objeto, se utiliza la notación del punto (.):

const persona = {
  nombre: "Juan",
  edad: 25,
  saludar: function() {
    return `Hola, soy ${this.nombre}`;
  }
};

console.log(persona.nombre); // Accediendo a una propiedad
console.log(persona.saludar()); // Accediendo a un método

Funciones Predefinidas

Tratamiento Numérico

parseInt(cadena, [base])

Convierte una cadena de texto en un número entero.

console.log(parseInt("10"));      // 10 (base 10)
console.log(parseInt("0xF"));     // 15 (base 16)
console.log(parseInt("010"));     // 10 (base 10 en ECMAScript 5)
console.log(parseInt("10.5"));    // 10 (descarta la parte decimal)

parseFloat(cadena)

Convierte una cadena de texto en un número decimal.

console.log(parseFloat("10.5"));  // 10.5
console.log(parseFloat("3.14abc")); // 3.14 (descarta caracteres no numéricos)

Función eval(cadena)

Interpreta una cadena como código JavaScript (¡Usar con precaución!).

console.log(eval("2 + 2")); // 4
let a = 5;
console.log(eval("a * 10")); // 50

Otras Funciones de Conversión/Validación:

isNaN(valor)

Verifica si un valor no es un número.

console.log(isNaN("abc")); // true
console.log(isNaN(123));   // false

isFinite(valor)

Determina si un valor es finito.

console.log(isFinite(100)); // true
console.log(isFinite(Infinity)); // false

Objetos Predefinidos Nativos de JavaScript

Objeto String

Permite manipular cadenas de texto mediante diversos métodos.

let mensaje = "JavaScript es genial";
console.log(mensaje.length);         // 21
console.log(mensaje.toUpperCase());  // JAVASCRIPT ES GENIAL
console.log(mensaje.toLowerCase());  // javascript es genial
console.log(mensaje.indexOf("genial")); // 14
console.log(mensaje.replace("genial", "increíble")); // JavaScript es increíble
console.log(mensaje.split(" "));    // ["JavaScript", "es", "genial"]

Objeto Date

Permite trabajar con fechas y horarios.

let fechaActual = new Date();
console.log(fechaActual.toDateString()); // Mié May 28 2025
console.log(fechaActual.getFullYear());  // 2025
console.log(fechaActual.getMonth());     // 4 (Mayo, porque los meses empiezan en 0)
console.log(fechaActual.getDay());       // 3 (Miércoles)

Objeto Array

Se usa para manipular listas de elementos.

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

numeros.push(6); // Agrega un nuevo elemento
console.log(numeros); // [1, 2, 3, 4, 5, 6]

numeros.pop(); // Elimina el último elemento
console.log(numeros); // [1, 2, 3, 4, 5]

numeros.reverse(); // Invierte el orden
console.log(numeros); // [5, 4, 3, 2, 1]

numeros.sort(); // Ordena (pero mal con números)
console.log(numeros); // [1, 2, 3, 4, 5]

console.log(numeros.slice(1, 4)); // [2, 3, 4]

Objeto Math

Este objeto no requiere instanciación; se accede directamente a sus métodos y constantes.

console.log(Math.PI); // 3.141592653589793
console.log(Math.E);  // 2.718281828459045
console.log(Math.sqrt(16)); // 4
console.log(Math.pow(2, 3)); // 8 (2³)
console.log(Math.round(4.7)); // 5
console.log(Math.floor(4.7)); // 4
console.log(Math.ceil(4.3)); // 5
console.log(Math.random()); // Un número aleatorio entre 0 y 1

Objeto Number

let num = new Number(42);
console.log(num.toFixed(2)); // "42.00"
console.log(num.toExponential(2)); // "4.20e+1"
console.log(num.toString(2)); // "101010" (Binario)
console.log(Number.MAX_VALUE); // Número más alto representable
console.log(Number.MIN_VALUE); // Número más pequeño positivo representable

Objeto Boolean

let bool = new Boolean(0);
console.log(bool.toString()); // "false"

console.log(Boolean("texto")); // true
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

Objeto Window (BOM)

alert("¡Hola! Esto es un mensaje emergente.");
let respuesta = prompt("¿Cómo te llamas?", "Escribe aquí...");
let confirmacion = confirm("¿Seguro que quieres continuar?");
console.log(respuesta, confirmacion);
setTimeout(() => {
    console.log("Han pasado 2 segundos.");
}, 2000);
let idIntervalo = setInterval(() => {
    console.log("Esto aparece cada 3 segundos.");
}, 3000);

setTimeout(() => {
    clearInterval(idIntervalo); // Detiene el intervalo
    console.log("Intervalo detenido.");
}, 10000);

Formateo Avanzado de Fechas: Objeto Intl.DateTimeFormat

Formatear una fecha para mostrarla adecuadamente puede ser complejo, debido a la diversidad de representaciones (numéricas, alfabéticas, abreviadas, etc.) y variaciones regionales en idiomas, estilos y orden. Por ello, es frecuente querer formatear fechas según la configuración de una región específica.

El objeto Intl posee DateTimeFormat, que facilita el formateo adaptado a la configuración regional.

Creación e Instanciación

Se crea un formateador pasando el código del país (o región) y un objeto de opciones para personalizar el formato:

// Ejemplo básico: usa la configuración regional por defecto o la especificada
const formateadorBasico = new Intl.DateTimeFormat("es-ES");
const fecha = new Date();
console.log(formateadorBasico.format(fecha));
// Posible salida (dependiendo del navegador y sistema): "28/5/2025"

La instanciación es:

new Intl.DateTimeFormat([country], [options])

Métodos del Objeto Intl.DateTimeFormat

1. .format(date)

Utiliza la configuración definida para formatear una fecha y devuelve un string.

const opcionesSimples = { timeZone: "Europe/Madrid" };
const formateadorSimple = new Intl.DateTimeFormat("es-ES", opcionesSimples);
console.log(formateadorSimple.format(new Date()));
// Salida: "28/5/2025" o similar, según la localización

2. .formatToParts(date)

Devuelve un array de objetos que representan las diferentes partes formateadas de la fecha. Cada objeto tiene dos claves: type y value (los separadores se marcan con el tipo literal).

const partes = formateadorSimple.formatToParts(new Date());
console.log(partes);
/* Salida ejemplo:
[
  { type: "day", value: "28" },
  { type: "literal", value: "/" },
  { type: "month", value: "5" },
  { type: "literal", value: "/" },
  { type: "year", value: "2025" }
]
*/

3. .formatRange(a, b)

Crea y devuelve un string que representa un rango de fechas (por ejemplo, del 28 al 30 de mayo de 2025). Este método respeta la configuración regional y evita repetir partes compartidas entre ambas fechas.

const fechaInicio = new Date(2025, 4, 28); // Recuerda: los meses se numeran desde 0
const fechaFin   = new Date(2025, 4, 30);
console.log(formateadorSimple.formatRange(fechaInicio, fechaFin));
// Salida posible: "28 – 30/5/2025"

4. .formatRangeToParts(a, b)

Similar a .formatRange(), pero en lugar de un string, devuelve un array de objetos identificando cada parte del rango. Cada objeto incluye las claves type, value y source, que indica si la parte corresponde al inicio (startRange), al final (endRange) o es compartida (shared).

const partesRango = formateadorSimple.formatRangeToParts(fechaInicio, fechaFin);
console.log(partesRango);
/* Ejemplo de salida:
[
  { type: "day", value: "28", source: "startRange" },
  { type: "literal", value: " – ", source: "shared" },
  { type: "day", value: "30", source: "endRange" },
  { type: "literal", value: "/5/2025", source: "shared" }
]
*/

5. .resolvedOptions()

Devuelve un objeto que contiene las configuraciones de región y opciones definidas (incluyendo los valores por defecto) usados por el formateador.

const opcionesResueltas = formateadorSimple.resolvedOptions();
console.log(opcionesResueltas);
/* Ejemplo de salida:
{
  locale: "es-ES",
  numberingSystem: "latn",
  calendar: "gregory",
  timeZone: "Europe/Madrid",
  // ... otras propiedades por defecto
}
*/

Opciones de Personalización

Existen dos modos de personalización que son mutuamente excluyentes:

1. Estilos Predefinidos

Utilizan las propiedades dateStyle y timeStyle para definir perfiles genéricos de fecha y hora.
No se deben mezclar con opciones de formato personalizado (como weekday, day, etc.).

const opcionesEstilo = {
  dateStyle: "full",
  timeStyle: "short",
  timeZone: "Europe/Madrid"
};
const formateadorEstilo = new Intl.DateTimeFormat("es-ES", opcionesEstilo);
console.log(formateadorEstilo.format(new Date()));
// Salida posible: "miércoles, 28 de mayo de 2025, 19:22"

2. Formato Personalizado

Permite especificar individualmente las partes a mostrar, sin importar el orden de los parámetros. Algunas de las opciones son:

const opcionesPersonalizadas = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  timeZone: "Europe/Madrid"
};
const formateadorPersonalizado = new Intl.DateTimeFormat("es-ES", opcionesPersonalizadas);
console.log(formateadorPersonalizado.format(new Date()));
// Salida posible: "miércoles, 28 de mayo de 2025, 19:22"