Tema 11 · Colecciones

Objetos Literales y la palabra "this"

Aprende a modelar entidades del mundo real con objetos literales: propiedades, métodos, acceso por punto y corchetes, y el contexto de ejecución con this.

Alcance (Scope) y Hoisting Arrays y Métodos Mutadores

¿Qué es un Objeto en JavaScript?

En JavaScript, casi todo es un objeto. Un objeto es una colección desordenada de pares clave : valor que permite agrupar datos y funciones relacionadas en una sola entidad estructurada: 

const curso = {
  titulo: "Desarrollo Web Fullstack",
  duracionSemanas: 12,
  activo: true,
  estudiantes: ["Ana", "Pedro", "Sofía"]
};

Métodos y la palabra clave "this"

Cuando el valor de una propiedad es una función, se le denomina método. Dentro de un método regular, la palabra clave this hace referencia directa al propio objeto que está ejecutando el código: 

const usuario = {
  nombre: "Carlos",
  apellido: "Gómez",
  nombreCompleto: function() {
    return `${this.nombre} ${this.apellido}`;
  }
};

console.log(usuario.nombreCompleto()); // "Carlos Gómez"
⚠️ Precaución con las Funciones Flecha: Las funciones flecha (() => {}) no tienen su propio this (heredan el del contexto exterior). Por tanto, no uses arrow functions como métodos de un objeto si requieres acceder a sus propiedades con this.

Métodos Estáticos de Object

  • Object.keys(obj): Devuelve un array con todas las claves o nombres de propiedades del objeto.
  • Object.values(obj): Devuelve un array con todos los valores almacenados en las propiedades.
  • Object.entries(obj): Devuelve un array de parejas [clave, valor], ideal para recorrer con bucles.

⚡ Modelado de Entidades con Objetos

Prueba a invocar los métodos del objeto estudiante para calcular su estado de graduación:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Objetos Literales en JS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-obj { max-width: 500px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .perfil-box { background: #f1f5f9; border-radius: 6px; padding: 15px; margin: 15px 0; }
    .btn { background: #0284c7; color: white; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: bold; margin-right: 6px; }
  </style>
</head>
<body>

  <div class="card-obj">
    <h3 style="margin-top: 0; color: #0f172a;">Perfil de Alumno (Objeto en JS)</h3>

    <div id="pantalla-perfil" class="perfil-box">
      Cargando perfil...
    </div>

    <button class="btn" onclick="aprobarModulo()">Aprobar Módulo (+1)</button>
    <button class="btn" onclick="reiniciarPerfil()" style="background: #64748b;">Reiniciar</button>

    <script>
      // Definición del objeto con propiedades y métodos usando this:
      const alumno = {
        nombre: "Luis Fernando",
        carrera: "Desarrollo Frontend",
        modulosCompletados: 3,
        modulosTotales: 6,
        
        calcularProgreso() {
          const porcentaje = (this.modulosCompletados / this.modulosTotales) * 100;
          return porcentaje.toFixed(0);
        },

        avanzar() {
          if (this.modulosCompletados < this.modulosTotales) {
            this.modulosCompletados++;
          }
        }
      };

      function renderizar() {
        const progreso = alumno.calcularProgreso();
        document.getElementById('pantalla-perfil').innerHTML = `
          <strong>Estudiante:</strong> ${alumno.nombre}<br>
          <strong>Carrera:</strong> ${alumno.carrera}<br>
          <strong>Módulos Aprobados:</strong> ${alumno.modulosCompletados} de ${alumno.modulosTotales}<br>
          <strong>Progreso Académico:</strong> <span style="color: #0284c7; font-weight: bold;">${progreso}%</span>
        `;
      }

      function aprobarModulo() {
        alumno.avanzar();
        renderizar();
      }

      function reiniciarPerfil() {
        alumno.modulosCompletados = 0;
        renderizar();
      }

      renderizar();
    </script>
  </div>

</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.