Skip to content

5. Los objetos literales

Aquí denominamos «objetos literales» a los objetos definidos literalmente en el código. JavaScript cuenta con el concepto de clase y de objeto instancia de clase. Por lo tanto, no es de este tipo de objetos de los que estamos hablando ahora.

Image

5.1. script [obj-01]

Aquí presentamos las primeras propiedades de los objetos literales. La principal es que el objeto se maneja mediante un puntero.


'use strict';
// un objeto vacío
const obj1={};
// se pueden crear dinámicamente las propiedades del objeto
obj1.prop1="abcd";
console.log('obj1=',obj1);
// otra propiedad
obj1.prop2=[1,2,3];
console.log("obj1=",obj1);
// otra propiedad con una notación diferente
obj1['prop3']=true;
console.log("obj1=",obj1);
// obj1 es una referencia al objeto (puntero), no el objeto en sí
const obj2=obj1;
// obj2 y obj1 apuntan al mismo objeto
obj2.prop1="xyzt";
console.log("obj1=",obj1);
console.log("obj2=",obj2);
// las propiedades pueden ser variables
const var1='prop1';
console.log('prop1=',obj1[var1]);

Ejecución


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-01.js"
obj1=[object Object]
obj1= { prop1: 'abcd', prop2: [ 1, 2, 3 ] }
obj1= { prop1: 'abcd', prop2: [ 1, 2, 3 ], prop3: true }
obj1= { prop1: 'xyzt', prop2: [ 1, 2, 3 ], prop3: true }
obj2= { prop1: 'xyzt', prop2: [ 1, 2, 3 ], prop3: true }
prop1= xyzt

Comentarios

  • línea 3 del código: un objeto se maneja mediante un puntero. Por lo tanto, [obj1] es un puntero. Modificar el objeto al que apunta no modifica el puntero [obj1]. Por eso, al igual que con las tablas, se declara una referencia de objeto con la palabra clave [const];
  • línea 6 del código: al igual que con los arreglos, [console.log] puede mostrar objetos;
  • línea 11 del código: obj1.prop3 puede reescribirse como obj1.[‘prop3’]. Esta última notación es útil cuando «prop3» es, de hecho, una variable (líneas 20-21);
  • las líneas 13 a 18 del código: muestran que la instrucción [obj2=obj1] es una copia de referencia del objeto y no del objeto mismo;

5.2. script [obj-02]

Este script muestra que las propiedades de un objeto pueden tener como valor un objeto. De este modo, se obtienen objetos de varios niveles. También se introduce el objeto global [JSON], que permite realizar conversiones entre objetos y cadenas de caracteres.


'use strict';
// un objeto de varios niveles
const personne = {
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  }
}
// acceso a las propiedades
console.log("prénom personne=", personne.prénom);
console.log("prénom mère=", personne.mère.prénom);
personne.mère.âge = 40;
console.log("âge mère=", personne.mère.âge);
// console.log sabe mostrar objetos
console.log("personne=", personne);
console.log("mère=", personne.mère);
// también se puede mostrar la cadena jSON del objeto
let json = JSON.stringify(personne);
console.log("jSON=", json);
// se puede volver a leer el jSON
let personne2 = JSON.parse(json);
console.log("père=", personne2.père);

Comentarios

  • línea 24: transformación de un objeto de JavaScript en una cadena jSON;
  • línea 27: transformación de una cadena jSON en un objeto JavaScript;

Ejecución


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-02.js"
prénom personne= martin
prénom mère= micheline
âge mère= 40
personne= { 'prénom': 'martin',
'edad': 12,
'«padre»: { 'nombre': 'paul', 'edad': 45 },
'madre': { 'nombre': 'micheline', 'edad': 40 } }
mère= { 'prénom': 'micheline', 'âge': 40 }
jSON= {"prénom":"martin","âge":12,"père":{"prénom":"paul","âge":45},"mère":{"prénom":"micheline","âge":40}}
père= { 'prénom': 'paul', 'âge': 45 }

Comentarios

  • línea 10: en una cadena jSON, las propiedades deben estar entre comillas, al igual que los valores de tipo cadena de caracteres;

5.3. script [obj-03]

Este script introduce el concepto de getter/setter de una propiedad de un objeto:


'use strict';
// getters y setters de un objeto
const personne = {
  // getter
  get nom() {
    console.log("getter nom");
    return this._nom;
  },
  // setter
  set nom(unNom) {
    console.log("setter nom");
    this._nom = unNom;
  }
};
// setter
personne.nom = "Hercule";
// getter
console.log(personne.nom);
// el objeto mismo
console.log("personne=", personne);
// eso no impide acceder directamente a la propiedad [_nom]
personne._nom = "xyz";
console.log("personne=", personne);

Comentarios

  • líneas 5-7: definición de una función [getter], que por lo general devuelve el valor de una propiedad del objeto, pero que en realidad puede devolver cualquier cosa. La palabra clave [function] se reemplaza por la palabra clave [get];
  • línea 7: el getter devuelve la propiedad [_nom]. Se observa que esta no necesita declararse;
  • líneas 10-13: definición de [setter], una función que, por lo general, asigna el valor recibido a una propiedad del objeto, pero que, en realidad, puede hacer lo que sea. La palabra clave [function] se reemplaza por la palabra clave [set]. La función [setter] se puede utilizar para verificar la validez del valor pasado como parámetro a la función [setter];
  • línea 16: se llamará implícitamente a la función [set nom];
  • línea 18: se llamará implícitamente a la función [get nom];
  • línea 22: muestra que el uso de los getter y setter depende de la decisión del desarrollador. Si este conoce el nombre de la propiedad que gestionan, puede acceder a ella directamente;

Ejecución


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-03.js"
setter nom
getter nom
Hercule
personne= { nom: [Getter/Setter], _nom: 'Hercule' }
personne= { nom: [Getter/Setter], _nom: 'xyz' }

Cabe destacar, en las líneas 5 y 6, que [console.log] también muestra las propiedades que son funciones.

5.4. script [obj-04]

Este script muestra tres formas de escribir los nombres de las propiedades de un objeto y dos formas de acceder a ellas.


'use strict';
// los nombres de las propiedades de un objeto  pueden ser literales [nom], estar entre comillas simples ['nom']
// o entre comillas dobles ["nom"]

// literales
const obj1 = {
  nom: "martin",
  prénom: "jean"
};
console.log("prénom=", obj1.prénom);

// rodeados de apóstrofes
const obj2 = {
  'nombre': "martin",
  'nombre: "jean"
};
console.log("nom=", obj2.nom);

// entre comillas
const obj3 = {
  "nom": "martin",
  "prénom": "jean"
};

// dos sintaxis posibles para acceder a la propiedad [nom]
console.log("nom=", obj3.nom);
console.log("nom=", obj3['nom']);

Ejecución


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-04.js"
prénom= jean
nom= martin
nom= martin
nom= martin

5.5. script [obj-05]

El script muestra que las propiedades de un objeto literal pueden ser funciones. Esto se asemeja mucho a un objeto instancia de clase, donde tenemos propiedades y métodos.


'use strict';

// un objeto puede tener propiedades de tipo [function]
const personne = {
  // propiedades
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  },
  // método
  toString: function () {
    return JSON.stringify(this);
  }
}

// uso
console.log("personne=", personne);
console.log("personne.toString=", personne.toString());
  • líneas 17-19: un método interno del objeto. En este, se accede a las propiedades del objeto mediante la palabra clave [this] (línea 18). [this] se refiere al objeto mismo, [this.prénom], a la propiedad [prénom] de este;

Ejecución


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-05.js"
personne= { 'prénom': 'martin',
'edad': 12,
'padre': { 'nombre': 'paul', 'edad': 45 },
'madre': { 'nombre': 'micheline', 'edad': 42 },
toString: [Function: toString] }
personne.toString= {"prénom":"martin","âge":12,"père":{"prénom":"paul","âge":45},"mère":{"prénom":"micheline","âge":42}}

5.6. script [obj-06]

Este script muestra cómo acceder a las propiedades de un objeto cuando no se conoce de antemano el nombre de estas.


'use strict';

// un objeto puede tener propiedades de tipo [function]
let personne = {
  // propiedades
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  },
  // método
  toString: function () {
    return JSON.stringify(this);
  }
}

// uso
console.log(personne);
// propiedades
console.log("-----------------------");
for (const key in personne) {
  if (personne.hasOwnProperty(key)) {
    const element = personne[key];
    console.log(key, "=", element);
  }
}
// para evitar la advertencia de ESLint (1)
console.log("-----------------------");
for (const key in personne) {
  if (Object.prototype.hasOwnProperty.call(personne, key)) {
    const element = personne[key];
    console.log(key, "=", element);
  }
}
// para evitar la advertencia de ESLint (2)
console.log("-----------------------");
for (const key in personne) {
  // eslint-disable-next-line no-prototype-builtins
  if (personne.hasOwnProperty(key)) {
    const element = personne[key];
    console.log(key, "=", element);
  }
}

Comentarios

  • líneas 26-31: el código que permite obtener la lista de propiedades, sin los métodos, de un objeto. Este código es objeto de una advertencia de ESLint:

Image

  • líneas 32-39: el código que permite evitar la advertencia de ESLint. Se utiliza el prototipo de la clase [Object];
  • líneas 41-47: o bien simplemente se desactiva la advertencia (línea 43);

5.7. script [obj-07]

El script [obj-07] muestra la posibilidad de desestructurar un objeto:


'use strict';
// desestructuración

// literales
const obj1 = {
  nom: "martin",
  prénom: "jean"
};

// desestructuración de obj1 en variables [n,p]
const { nom: n, prénom: p } = obj1;
console.log("n=", n, "p=", p);

// desestructuración de obj1 en variables [n2,p2]
function f({ nom: n2, prénom: p2 }) {
  console.log("f-n2=", n2, "f-p2=", p2);
}
f(obj1);

// descomposición de obj1 en variables [nom,prénom]
function g({ nom: nom, prénom: prénom }) {
  console.log("g-nom=", nom, "g-prénom=", prénom);
}
g(obj1);

// descomposición de obj1 en variables [nom,prénom]
// con notación abreviada equivalente a h({nombre:nombre,apellido:apellido})
function h({ nom, prénom }) {
  console.log("h-nom=", nom, "h-prénom=", prénom);
}
h(obj1);

Comentarios

  • línea 11: son las llaves {} las que permiten la desestructuración. La sintaxis 

const { nom: n, prénom: p } = obj1

crea dos variables, [n] y [p], y es equivalente a:


const n = obj1.nom
const p = obj1.prénom

La declaración podría leerse de la siguiente manera:


const { nom => n, prénom => p } = obj1

para recordar que los valores de los atributos de [nom, prénom] se asignan a las variables de [n, p];

  • la operación de desestructuración se repite en las líneas 15, 21 y 28. En cada caso, la presencia de las llaves {} indica que se va a realizar la desestructuración de un objeto en variables;
  • la línea 28 puede resultar desconcertante. Es un atajo para la notación: 

function h({ nom : nom, prénom : prénom })

Los resultados de la ejecución son los siguientes:

1
2
3
4
n= martin p= jean
f-n2= martin f-p2= jean
g-nom= martin g-prénom= jean
h-nom= martin h-prénom= jean

5.8. script [obj-08]

El script [obj-08] muestra cómo obtener una copia de un objeto:


'use strict'

// clonación de objetos
const obj1 = {
  nom: "martin",
  prénom: "jean"
};

// clona (copia) de obj1 con el operador de expansión
const obj2 = { ...obj1 }

// verificaciones
// obj2 apunta a una copia de obj1
console.log("obj2===obj1 :", obj1 === obj2)
console.log("obj2=", obj2)
  • línea 10: la operación de copia del objeto [obj1]. El operador ... se conoce como operador de propagación;

Los resultados de la ejecución son los siguientes:

1
2
obj2===obj1 : false
obj2= { nom: 'martin', 'prénom': 'jean' }
  • línea 1: muestra que las referencias [obj1] y [obj2] no apuntan al mismo objeto;
  • línea 2: muestra que el objeto al que apunta [obj2] es una copia del objeto al que apunta [obj1];

5.9. Conclusion

Los scripts de esta sección han demostrado que el objeto literal de JavaScript es similar al objeto de instancia de clase de los lenguajes orientados a objetos. En él se pueden definir propiedades, métodos y getters/setters. Es un objeto dinámico cuyas propiedades se pueden definir en tiempo de ejecución. Se comporta entonces como un diccionario cuyos elementos pueden ser de cualquier tipo y, en particular, del tipo [fonction].

https://stahe.github.io
Este curso-tutorial, escrito por Serge Tahé, se pone a disposición del público de acuerdo con los términos de la Creative Commons Reconocimiento – Sin uso comercial – Compartir igual 3.0 sin modificaciones.