Variables de entorno y patrones de configuración
Configure aplicaciones con valores predeterminados pequeños, lecturas seguras del entorno y objetos explícitos. Evite filtrar secretos en el navegador. Patrones adecuados para principiantes.
Variables de entorno y patrones de configuración es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 3 lecciones en total.
Visión general
Objetivo: leer la configuración de forma segura en cualquier entorno de ejecución.
- Primero, los valores predeterminados
- Detecte las funcionalidades del entorno (no dé por supuesto process.env)
- Analice las cadenas para convertirlas en números o valores booleanos
- No incluya secretos en los paquetes del navegador

Lectura segura del entorno
Use la detección de funcionalidades para leer el entorno solo cuando exista. Proporcione un pequeño almacén de demostración para que los ejemplos se puedan ejecutar.
// Read an env var if available; otherwise use a fallback
function readEnv(name, fallback) {
// detect Node-like env
const hasProcessEnv = typeof process !== "undefined" && process && process.env && typeof process.env === "object";
if (hasProcessEnv && typeof process.env[name] === "string") {
return process.env[name];
}
// demo fallback store so this snippet runs everywhere
const DEMO = { API_URL: "https://api.example.com", NODE_ENV: "development" };
if (typeof DEMO[name] === "string") return DEMO[name];
return fallback;
}
console.log("API_URL:", readEnv("API_URL", "https://fallback.local"));

Configuración a partir de valores predeterminados y entorno
Primero, use los valores predeterminados y, después, sobrescríbalos con el entorno. Convierta explícitamente las cadenas a number/boolean.
// Build config from defaults, then override via env when present
function buildConfig() {
const defaults = {
apiUrl: "https://api.example.com",
port: 3000,
debug: false
};
// env values are strings; parse to right types
const apiUrl = readEnv("API_URL", defaults.apiUrl);
const portStr = readEnv("PORT", String(defaults.port));
const debugStr = readEnv("DEBUG", defaults.debug ? "1" : "0");
return {
apiUrl: apiUrl,
port: Number.parseInt(portStr, 10),
debug: debugStr === "1" || debugStr === "true"
};
}
const cfg = buildConfig();
console.log("config:", cfg);

Parámetro de configuración explícito
Pase un pequeño objeto de configuración a las funciones. Así evitará el estado global y las sorpresas.
// Pass config into functions explicitly (easier to test)
function startApp(config) {
// use values directly
const mode = config.debug ? "debug" : "prod";
return "Starting " + mode + " at " + config.apiUrl + " on :" + config.port;
}
console.log(startApp(cfg));

Analizar el entorno de forma segura
Los valores del entorno son cadenas. Escriba pequeños analizadores para valores booleanos y enteros a fin de evitar errores.
// Helpers to parse common env shapes safely
function toBool(s, fallback) {
if (typeof s !== "string") return fallback;
const v = s.trim().toLowerCase();
if (v === "1" || v === "true" || v === "yes") return true;
if (v === "0" || v === "false" || v === "no") return false;
return fallback;
}
function toInt(s, fallback) {
const n = Number.parseInt(s, 10);
return Number.isFinite(n) ? n : fallback;
}
console.log("toBool:", toBool("yes", false), toBool("no", true));
console.log("toInt :", toInt("8080", 3000), toInt("oops", 3000));

Secretos y código del cliente
Importante:
- No incluya secretos en JavaScript del lado del cliente; los usuarios pueden leerlos.
- En el navegador, conserve únicamente indicadores y URL que no sean confidenciales.
- En Node, lea los secretos reales de process.env o de un almacén seguro.
- Conserve siempre una configuración predeterminada para las ejecuciones locales.

Cuestionario sobre fundamentos del entorno y la configuración
Comprobación rápida: patrón de configuración portable.

Resumen
Resumen: cree la configuración a partir de los valores predeterminados y lecturas seguras del entorno, analice las cadenas y pase un objeto config explícito. Nunca incluya secretos en el código del cliente.

Preguntas frecuentes
¿La lección «Variables de entorno y patrones de configuración» es gratis?
Sí — el texto completo de «Variables de entorno y patrones de configuración» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Variables de entorno y patrones de configuración»?
Configure aplicaciones con valores predeterminados pequeños, lecturas seguras del entorno y objetos explícitos. Evite filtrar secretos en el navegador. Patrones adecuados para principiantes. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.
¿Cuánto tiempo toma la lección «Variables de entorno y patrones de configuración»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Globales, disponibilidad de fetch y APIs de archivos/red
- Particularidades del cargador ESM y diferencias entre rutas y URL
- Variables de entorno y patrones de configuración