Guías Técnicas

Objetos y Métodos en JavaScript

¿Qué es un Objeto?

Un objeto es una colección de propiedades y métodos relacionados agrupados en una sola estructura.

javascript 
// Un objeto simple
const auto = {
  marca: "Toyota",        // Propiedad (dato)
  modelo: "Corolla",      // Propiedad (dato)
  encender: function() {  // Método (función)
      console.log("Motor encendido");
  }
};

¿Qué es un Método?

Un método es simplemente una función que vive dentro de un objeto.

javascript 
const calculadora = {
  // 'sumar' es un MÉTODO de calculadora
  sumar: function(a, b) {
      return a + b;
  }
};

// Uso:
calculadora.sumar(5, 3); // 8

¿Qué es una Propiedad?

Una propiedad es un dato (valor) almacenado dentro de un objeto.

javascript 
const usuario = {
  nombre: "Ana",    // Propiedad
  edad: 25,         // Propiedad
  activo: true      // Propiedad
};

// Acceso:
console.log(usuario.nombre); // "Ana"

Analogías Simples

1Control Remoto de TV

💡 Moraleja: El control remoto (objeto) tiene botones (métodos) que realizan acciones específicas.

javascript 
// El control remoto (controlRemoto) tiene botones (métodos)

const controlRemoto = {
  encender: function() { 
      console.log("📺 TV encendida");
  },
  apagar: function() { 
      console.log("⚫ TV apagada");
  },
  subirVolumen: function() { 
      console.log("🔊 Volumen +");
  },
  bajarVolumen: function() { 
      console.log("🔉 Volumen -");
  }
};

// Usas los botones así:
controlRemoto.encender();      // 📺 TV encendida
controlRemoto.subirVolumen();  // 🔊 Volumen +
2Caja de Herramientas

💡 Moraleja: La caja (objeto) contiene herramientas (métodos) organizadas y listas para usar.

javascript 
// La caja de herramientas es el OBJETO
const cajaDeHerramientas = {
  // Cada herramienta es un MÉTODO (función dentro del objeto)
  martillar: function() {
      console.log("¡Martillando! 🔨");
  },
  
  atornillar: function() {
      console.log("¡Atornillando! 🔧");
  },
  
  serrar: function() {
      console.log("¡Serrando! 🪚");
  }
};

// Para usar una herramienta (método):
cajaDeHerramientas.martillar();    // ¡Martillando! 🔨
cajaDeHerramientas.atornillar();   // ¡Atornillando! 🔧
cajaDeHerramientas.serrar();       // ¡Serrando! 🪚

Función vs Método en JavaScript

La diferencia es simple 👇

  • Función: vive sola, fuera de cualquier objeto.
  • Método: es una función dentro de un objeto.

Ejemplo rápido

javascript 
// 🔹 Función normal (independiente)
function saludar() {
  console.log("¡Hola!");
}
saludar(); // ¡Hola!

// 🔹 Método dentro de un objeto
const persona = {
nombre: "Urian",
saludar() {
      console.log(`¡Hola! Soy ${this.nombre}`);
}
};
persona.saludar(); // ¡Hola! Soy Urian

⚙️ Diferentes formas de definir métodos (ES5 → ES6)

javascript 
// 🧩 Forma tradicional (ES5)
const usuario = {
  saludar: function(nombre) {
      console.log("Hola " + nombre + "!");
  }
};

// ⚡️ Forma moderna abreviada (ES6)
const usuario2 = {
  saludar(nombre) {
      console.log(`Hola ${nombre}!`);
  }
};

// 🚀 Arrow function (sin 'this')
const usuario3 = {
  saludar: (nombre) => console.log(`Hola ${nombre}!`)
};

// Ejemplo
usuario.saludar("Urian");
usuario2.saludar("Urian");
usuario3.saludar("Urian");
  Importante

Las arrow functions no tienen su propio this,
así que evita usarlas si el método necesita acceder a propiedades del objeto.

🔑 Regla de Oro

javascript 
// ✅ Si llamas algo con un PUNTO (.)
objeto.algo()
//     ↑
//  Esto es un MÉTODO

// ✅ Si lo llamas directo (sin punto)
algo()
// Esto es una FUNCIÓN normal

Ejemplos del Mundo Real

JavaScript tiene muchos objetos incorporados con métodos útiles:

javascript 
// MÉTODOS (con punto)
array.push(1);           // ✅ Método
array.pop();             // ✅ Elimina el último elemento y lo devuelve
string.toUpperCase();    // ✅ Método
objeto.hacerAlgo();      // ✅ Método
texto.toUpperCase();     // ✅ "HOLA MUNDO"

// 'console' es un objeto, 'log' es su método
console.log("Hola");       // Imprime en consola
console.error("Error!");   // Muestra error
console.warn("Cuidado");   // Muestra advertencia
console.table([1, 2, 3]);  // Muestra tabla

// Métodos del objeto Date
fecha.getFullYear();       // 2025
fecha.getMonth();          // 0-11
fecha.getDate();           // 1-31

// FUNCIONES (sin punto)
alert("Hola");           // ✅ Función
parseInt("42");          // ✅ Función
setTimeout(() => {}, 1000); // ✅ Función

Comparación Completa

Aquí tienes un ejemplo visual de cómo se ve cada forma:

javascript 
// Tres formas de hacer lo mismo:

// ✅ Tradicional
const objeto1 = {
  saludar: function(nombre) {
      return "Hola " + nombre;
  }
};

// ✅ Moderna (recomendada para métodos)
const objeto2 = {
  saludar(nombre) {
      return "Hola " + nombre;
  }
};

// ✅ Arrow function
const objeto3 = {
  saludar: (nombre) => {
      return "Hola " + nombre;
  }
};

// Todas funcionan igual:
objeto1.saludar("Ana"); // "Hola Ana"
objeto2.saludar("Ana"); // "Hola Ana"
objeto3.saludar("Ana"); // "Hola Ana"
  Nota importante

Las arrow functions se comportan diferente con this, por eso la sintaxis abreviada (ES6) suele ser mejor para métodos.

Ejercicio práctico:

Crea un Objeto Contador con Métodos para Incrementar, Decrementar, Resetear y Mostrar su Valor.

javascript 
// Crea un objeto contador con métodos para:
// incrementar, decrementar, resetear y mostrar

const contador = {
valor: 0,

incrementar() {
  this.valor++;
  return this;
},

decrementar() {
  this.valor--;
  return this;
},

resetear() {
  this.valor = 0;
  return this;
},

mostrar() {
  console.log(`Valor actual: ${this.valor}`);
  return this;
}
};

// Prueba con encadenamiento:
contador
.incrementar()
.incrementar()
.incrementar()
.decrementar()
.mostrar(); // Valor actual: 2
  Conclusión

  1. Un objeto es un contenedor de datos y funciones relacionadas
  2. Una propiedad es un dato dentro de un objeto
  3. Un método es una función dentro de un objeto y se llama usando nombreObjeto.metodo()
  4. Los métodos se llaman con nombreObjeto.metodo()
  5. Las funciones normales se llaman solo con funcion()