Skip to content

5. Los objetos literales

Denominamos aquí «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]

A continuación presentamos las principales propiedades de los objetos literales. La más importante 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 matrices, se declara una referencia de objeto con la palabra clave [const];
  • línea 6 del código: al igual que con los arrays, [console.log] es capaz de mostrar objetos;
  • Línea 11 del código: obj1.prop3 puede reescribirse como obj1.[‘prop3’]. Esta última notación resulta útil cuando «prop3» es, en realidad, una variable (líneas 20-21);
  • las líneas 13-18 del código: muestran que la instrucción [obj2=obj1] es una copia de referencia del objeto y no del objeto en sí;

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 multinivel. 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 ir 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 propio objeto
console.log("personne=", personne);
// esto 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 normalmente devuelve el valor de una propiedad del objeto, pero que, en realidad, puede devolver cualquier cosa. La palabra clave [function] se sustituye 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 quiera. La palabra clave [function] se sustituye por la palabra clave [set]. La función [setter] puede utilizarse para comprobar 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 voluntad del desarrollador. Si este conoce el nombre de la propiedad gestionada por ellos, 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);

// entre comillas simples
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. En este caso, nos acercamos mucho al objeto instancia de clase, en el que 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 él, se accede a las propiedades del objeto mediante la palabra clave [this] (línea 18). [this] designa al propio objeto, [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 las mismas.


'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 recurre al prototipo de la clase [Object];
  • líneas 41-47: o bien nos limitamos a desactivar 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,apellidos:apellidos})
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 [nom, prénom] se asignan a las variables [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 producir la desestructuración de un objeto en variables;
  • la línea 28 puede resultar desconcertante. Se trata de 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"
};

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

// comprobaciones
// 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 denomina 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. Se trata de un objeto dinámico cuyas propiedades se pueden definir en tiempo de ejecución. Se comporta, por tanto, como un diccionario cuyos elementos pueden ser de cualquier tipo y, en particular, del tipo [fonction].

https://tahe.developpez.com
Este curso-tutorial escrito por Serge Tahé se pone a disposición del público según los términos de la Licencia Creative Commons Reconocimiento – Sin uso comercial – Compartir en las mismas condiciones 3.0 no adaptada.