Tema 24 · JS Moderno

Formato JSON y Módulos ES (import/export)

Domina el intercambio de datos con JSON (parse y stringify) y la arquitectura modular en JavaScript moderno mediante sentencias import y export.

Manejo de Errores con try...catch

¿Qué es JSON (JavaScript Object Notation)?

JSON es el formato estándar mundial para el intercambio ligero de datos entre servidores y clientes web. Es independiente del lenguaje y fácil de leer tanto por personas como por máquinas.

Método Nativo Dirección de Conversión Ejemplo
JSON.stringify(objeto) Convierte un objeto o array JavaScript en una cadena de texto JSON. JSON.stringify({ id: 1 }) // '{"id":1}'
JSON.parse(textoJson) Analiza una cadena de texto JSON y reconstruye el objeto o array en memoria. JSON.parse('{"id":1}') // { id: 1 }

Módulos ES6 (import y export)

En lugar de escribir miles de líneas de código en un solo archivo gigante, JavaScript moderno permite dividir la lógica en módulos reutilizables e independientes: 

// Archivo: matematicas.js
export const PI = 3.14159;

export function duplicar(n) {
  return n * 2;
}

export default function saludar(nombre) {
  return `¡Hola, ${nombre}!`;
}
// Archivo: app.js
import saludar, { PI, duplicar } from './matematicas.js';

console.log(saludar("Mundo")); // "¡Hola, Mundo!"
console.log(duplicar(10));     // 20

Para usar módulos en el navegador, se agrega el atributo type="module" en la etiqueta <script>: 

<script type="module" src="app.js"></script>

⚡ Transformador Bidireccional de JSON en Vivo

Convierte objetos a cadenas formateadas con JSON.stringify y reconstruye objetos válidos con JSON.parse:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>JSON y Módulos en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-json { max-width: 540px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .grupo-botones { display: flex; gap: 8px; margin-bottom: 15px; }
    button { padding: 9px 14px; background: #0284c7; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
    button:hover { background: #0369a1; }
    .caja-codigo { background: #0f172a; color: #38bdf8; padding: 14px; border-radius: 6px; font-family: monospace; font-size: 0.85rem; white-space: pre-wrap; margin-bottom: 12px; }
    .caja-resultado { background: #f1f5f9; border-left: 4px solid #10b981; padding: 12px; border-radius: 4px; font-family: inherit; font-size: 0.9rem; }
  </style>
</head>
<body>

  <div class="card-json">
    <h3 style="margin-top: 0; color: #0f172a;">Serialización y Parseo con JSON</h3>

    <div class="grupo-botones">
      <button onclick="serializar()">1. JSON.stringify()</button>
      <button style="background: #0d9488;" onclick="deserializar()">2. JSON.parse()</button>
    </div>

    <strong>Salida de Texto Serializado (JSON):</strong>
    <div class="caja-codigo" id="visor-json">// Presiona "JSON.stringify()" para ver el formato de texto...</div>

    <strong>Objeto Reconstruido en Memoria:</strong>
    <div class="caja-resultado" id="visor-objeto">Esperando deserialización...</div>
  </div>

  <script>
    // Objeto JavaScript original en memoria
    const cursoCertificado = {
      id: "KILO-JS-2026",
      nombre: "Desarrollo Web Fullstack",
      duracionSemanas: 12,
      temas: ["HTML5", "CSS3", "JavaScript ES6+", "PHP 8.3"],
      certificadoOficial: true
    };

    let textoJsonGenerado = "";

    function serializar() {
      // JSON.stringify con sangría de 2 espacios
      textoJsonGenerado = JSON.stringify(cursoCertificado, null, 2);

      document.getElementById('visor-json').textContent = textoJsonGenerado;
      document.getElementById('visor-objeto').textContent = 
        "Objeto convertido exitosamente a cadena de texto lista para ser enviada por internet o guardada en archivo.";
    }

    function deserializar() {
      if (!textoJsonGenerado) {
        serializar();
      }

      // JSON.parse reconstruye el objeto original
      const objetoRestaurado = JSON.parse(textoJsonGenerado);

      document.getElementById('visor-objeto').innerHTML = `
        <strong>Objeto reconstruido correctamente:</strong><br>
        Curso: <em>${objetoRestaurado.nombre}</em> (Duración: ${objetoRestaurado.duracionSemanas} semanas)<br>
        Módulos incluidos: ${objetoRestaurado.temas.join(' · ')}<br>
        Certificado: ${objetoRestaurado.certificadoOficial ? 'Sí (Acreditado)' : 'No'}
      `;
    }

    // Inicializar visualización
    serializar();
  </script>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.