Propiedades Enumerables y Propiedades Propias en JavaScript: Diferencias Clave

En JavaScript los objetos pueden tener diferentes tipos de propiedades y es importante entender cómo estas propiedades se comportan cuando se interactúa con ellas. Entre los conceptos más importantes están las propiedades enumerables y las propiedades propias. Estas categorías juegan un papel clave al trabajar con objetos, especialmente al iterar sobre sus propiedades o al tratar con la herencia prototípica.

En este artículo exploraremos qué son las propiedades enumerables y las propiedades propias, sus diferencias y cómo interactuar con ellas en JavaScript.

¿Qué son las Propiedades Enumerables?

Una propiedad enumerable es una propiedad que puede ser iterada o listada, por ejemplo: cuando se usa un bucle for...in o al utilizar métodos como Object.keys().

Por defecto las propiedades creadas de forma literal o mediante el uso de Object.defineProperty() con el atributo enumerable establecido en true son propiedades enumerables.

Ejemplo: Propiedad Enumerable

const persona = {
  nombre: 'Ana',
  edad: 28
};

// Iterar sobre las propiedades enumerables
for (let clave in persona) {
  console.log(clave);
}

"nombre"
"edad"

En el ejemplo anterior las propiedades nombre y edad son enumerables, lo que significa que aparecerán cuando iteremos sobre el objeto persona usando for...in.

Atributo Enumerable

El atributo enumerable controla si una propiedad será visible durante la iteración. Si el valor de enumerable es false, la propiedad no aparecerá en bucles o cuando se usen métodos como Object.keys(), pero aún se puede acceder a ella directamente.

Modificar el atributo enumerable

const persona = {};

Object.defineProperty(persona, 'nombre', {
  value: 'Carlos',
  enumerable: false
});

console.log(persona.nombre);  // Output: Carlos

// No aparecerá en la iteración porque no es enumerable
for (let clave in persona) {
  console.log(clave);  // No muestra nada
}

¿Qué es una Propiedad Propia?

Básicamente esta es una propiedad que se definen directamente en el objeto y no en su prototipo. En JavaScript, cuando un objeto hereda de otro mediante prototipos, puede acceder a las propiedades del prototipo, pero esas propiedades no son consideradas “propias” del objeto.

Ejemplo: Propiedad Propia

const animal = {
  especie: 'mamífero'
};

const perro = Object.create(animal);
perro.nombre = 'Fido';

console.log(perro.nombre);
console.log(perro.especie);

"Fido"
"mamífero"

En el anterior ejemplo nombre es una propiedad propia de perro, mientras que especie es una propiedad heredada del prototipo animal.

Trabajando con Propiedades Enumerables

Estas propiedades son aquellas que pueden aparecer en iteraciones o cuando se listan las propiedades de un objeto. No todas las propiedades de un objeto son enumerables pero puedes controlar este comportamiento a través del atributo enumerable.

• Iterables: Las propiedades enumerables aparecen en bucles como for...in y al usar métodos como Object.keys().
• Configurables: Puedes modificar el atributo enumerable de una propiedad para hacerla visible o no en las iteraciones.

Obtener Propiedades Enumerables con Object.keys()

El método Object.keys() devuelve un array con todas las propiedades propias de un objeto. Esto significa que solo incluirá las propiedades que sean tanto propias como enumerables.

const persona = {
  nombre: 'Ana',
  edad: 28
};

console.log(Object.keys(persona));  // Output: ['nombre', 'edad']

["nombre", "edad"]

Iterar sobre Propiedades Enumerables con for...in

El bucle for...in se utiliza para iterar sobre las propiedades enumerables de un objeto, incluidas aquellas heredadas a través de la cadena de prototipos. Sin embargo, en este artículo solo introducimos este bucle ya que profundizaremos en su uso detallado en otro artículo específico sobre el bucle for...in.

Trabajando con Propiedades Propias

Obtener Propiedades Propias con Object.getOwnPropertyNames()

El método hasOwnProperty() permite verificar si una propiedad es propia del objeto y no heredada de su prototipo.

const animal = {
  especie: 'mamífero'
};

const perro = Object.create(animal);
perro.nombre = 'Fido';

console.log(perro.hasOwnProperty('nombre'));
console.log(perro.hasOwnProperty('especie'));

true
false

El método hasOwnProperty() devuelve true para la propiedad nombre ya que es una propiedad propia de perro, mientras que devuelve false para especie, ya que es heredada de animal.

Diferencias Clave entre Propiedades

1. Propiedades Enumerables:
   • Son aquellas que pueden ser iteradas con for...in o listadas con Object.keys().
   • Puedes modificar si una propiedad es enumerable o no utilizando Object.defineProperty().
2. Propiedades Propias:
   • Son las propiedades definidas directamente en el objeto, no heredadas de su prototipo.
   • Se pueden listar usando Object.getOwnPropertyNames() y verificar con hasOwnProperty().

Conclusión

Entender estos dos conceptos resultará clave al trabajar con objetos en JavaScript. Entender estas diferencias te permitirá controlar mejor cómo interactúas con los objetos, cómo los iteras, y cómo se comportan las propiedades heredadas o propias. En particular, el bucle for...in juega un papel importante al iterar sobre las propiedades enumerables, y profundizaremos en su uso y detalles en nuestro próximo tutorial.