Skip to content

5. Objetos literales

Aquí, nos referimos a los objetos definidos literalmente en el código como 'objetos literales'. JavaScript tiene el concepto de clases y objetos instancia de clase. Por lo tanto, este no es el tipo de objeto que estamos discutiendo ahora.

Image

5.1. script [obj-01]

Aquí presentamos las propiedades básicas de los objetos literales. La principal es que el objeto se manipula a través de un puntero.


1. 'use strict';
2. // an empty object
3. const obj1 = {};
4. // we can dynamically create the object's properties
5. obj1.prop1 = "abcd";
6. console.log('obj1=', obj1);
7. // another property
8. obj1.prop2 = [1, 2, 3];
9. console.log("obj1=", obj1);
10. // another property with a different notation
11. obj1['prop3'] = true;
12. console.log("obj1=", obj1);
13. // obj1 is a reference to the object (pointer), not the object itself
14. const obj2 = obj1;
15. // obj2 and obj1 point to the same object
16. obj2.prop1 = "xyzt";
17. console.log("obj1=", obj1);
18. console.log("obj2=", obj2);
19. // Properties can be variables
20. const var1 = 'prop1';
21. console.log('prop1=', obj1[var1]);

Ejecución


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

Comentarios

  • Línea 3 del código: Un objeto se manipula a través de un puntero. Por lo tanto, [obj1] es un puntero. Modificar el objeto apuntado no modifica el puntero [obj1]. Esta es la razón por la que, al igual que con las matrices, una referencia a un objeto se declara utilizando la [const] palabra clave;
  • Línea 6 del código: Al igual que con las matrices, [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 en realidad una variable (líneas 20-21);
  • líneas 13-18 del código: muestra que la sentencia [obj2=obj1] es una copia de la referencia al objeto y no del objeto en sí;

5.2. script [obj-02]

Este script demuestra que las propiedades de un objeto pueden tener un objeto como valor. Esto da lugar a objetos multinivel. También introducimos el objeto global [JSON], que permite conversiones de objeto a cadena y de cadena a objeto.


1. 'use strict';
2. // a multi-level object
3. const person = {
4.   firstName: "martin",
5.   age: 12,
6.   father: {
7.     firstName: "Paul",
8.     age: 45
9.   },
10.   mother: {
11.     first_name: "micheline",
12.     age: 42
13.   }
14. }
15. // access properties
16. console.log("person's first name=", person.firstName);
17. console.log("mother's first name=", person.mother.firstName);
18. person.mother.age = 40;
19. console.log("mother's age=", person.mother.age);
20. // console.log can display objects
21. console.log("person=", person);
22. console.log("mother=", person.mother);
23. // we can also display the object's JSON string
24. let json = JSON.stringify(person);
25. console.log("JSON=", json);
26. // We can parse the JSON
27. let person2 = JSON.parse(json);
28. console.log("father=", person2.father);

Comentarios

  • línea 24: conversión de un objeto JavaScript a una cadena JSON;
  • línea 27: conversión de una cadena JSON en un objeto JavaScript;

Ejecución


1. [Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objects\obj-02.js"
2. person's first name = martin
3. mother's first name = Micheline
4. mother's age= 40
5. person= { 'first_name': 'martin',
6. 'age': 12,
7. 'father': { 'first_name': 'Paul', 'age': 45 },
8. 'mother': { 'first_name': 'Micheline', 'age': 40 } }
9. mother = { 'first_name': 'micheline', 'age': 40 }
10. jSON = {"firstName": "martin", "age": 12, "father": {"firstName": "paul", "age": 45}, "mother": {"firstName": "micheline", "age": 40}}
11. father = { 'first_name': 'paul', 'age': 45 }

Comentarios

  • línea 10: en una cadena JSON, las propiedades deben ir entre comillas, al igual que los valores de cadena;

5.3. script [obj-03]

Este script introduce el concepto de getters y setters para una propiedad de un objeto'


1. 'use strict';
2. // getters and setters of an object
3. const person = {
4.   // getter
5.   get name() {
6.     console.log("getter name");
7.     return this._name;
8.   },
9.   // setter
10.   set name(aName) {
11.     console.log("setter name");
12.     this._name = aName;
13.   }
14. };
15. // setter
16. person.name = "Hercules";
17. // getter
18. console.log(person.name);
19. // the object itself
20. console.log("person=", person);
21. // this doesn't prevent you from accessing the [_name] property directly
22. person._name = "xyz";
23. console.log("person=", person);

Comentarios

  • líneas 5-7: definición de un [getter], una función que generalmente devuelve el valor de la propiedad de un objeto pero que en realidad puede devolver cualquier cosa. La palabra clave [función] se sustituye por la palabra clave [get];
  • línea 7: el getter devuelve la [_name] propiedad. Nótese que no es necesario declarar esta propiedad;
  • líneas 10-13: definición de un [setter], una función que generalmente asigna el valor recibido a una propiedad del objeto pero que en realidad puede hacer cualquier cosa. La palabra clave [función] se sustituye por la palabra clave [set]. El [setter]puede utilizarse para validar el valor pasado como parámetro al [setter];
  • línea 16: se llamará implícitamente a la función [set name] ;
  • línea 18: la función [obtener nombre] será llamada implícitamente;
  • línea 22: muestra que el uso de getters/setters depende del criterio del desarrollador. Si el desarrollador conoce el nombre de la propiedad que gestiona, puede acceder a ella directamente;

Ejecución


1. [Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-03.js"
2. setter name
3. getter name
4. Hercule
5. person = { name: [Getter/Setter], _name: 'Hercule' }
6. person = { name: [Getter/Setter], _name: 'xyz' }

Nota las líneas 5-6: [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.


1. 'use strict';
2. // The names of an object's properties can be literals [name], enclosed in single quotes ['name']
3. // or double quotes ["name"]
4. 
5. // literals
6. const obj1 = {
7.   lastName: "martin",
8.   firstName: "jean"
9. };
10. console.log("first_name=", obj1.first_name);
11. 
12. // enclosed in single quotes
13. const obj2 = {
14.   'lastName': "martin",
15.   'firstName': "jean"
16. };
17. console.log("lastName=", obj2.lastName);
18. 
19. // enclosed in quotes
20. const obj3 = {
21.   "lastName": "martin",
22.   "firstName": "jean"
23. };
24. 
25. // two possible ways to access the [lastName] property
26. console.log("lastName=", obj3.lastName);
27. console.log("lastName=", obj3['lastName']);

Ejecución


1. [Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objects\obj-04.js"
2. firstName=jean
3. lastName= martin
4. lastName= martin
5. last_name= martin

5.5. script [obj-05]

El script muestra que las propiedades de un objeto literal pueden ser funciones. Esto es muy similar a un objeto instancia de clase, que tiene propiedades y métodos.


1. 'use strict';
2. 
3. // an object can have properties of type [function]
4. const person = {
5.   // properties
6.   firstName: "martin",
7.   age: 12,
8.   father: {
9.     first_name: "paul",
10.     age: 45
11.   },
12.   mother: {
13.     first_name: "micheline",
14.     age: 42
15.   },
16.   // method
17.   toString: function () {
18.     return JSON.stringify(this);
19.   }
20. }
21. 
22. // usage
23. console.log("person=", person);
24. console.log("person.toString=", person.toString());
  • líneas 17-19: un método interno del objeto. En este método, accedemos a las propiedades del objeto utilizando la palabra clave [this] (línea 18). [this] se refiere al objeto en sí, y [this.firstName] se refiere a su [firstName] propiedad;

Ejecución


1. [Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objects\obj-05.js"
2. person = { 'firstName': 'martin',
3. 'age': 12,
4. 'father': { 'firstName': 'paul', 'age': 45 },
5. 'mother': { 'firstName': 'micheline', 'age': 42 },
6. toString: [Function: toString] }
7. person.toString = {"firstName":"martin","age":12,"father":{"firstName":"paul","age":45},"mother":{"firstName":"micheline","age":42}}

5.6. script [obj-06]

Este script demuestra cómo acceder a las propiedades de un objeto'cuando no se conocen sus nombres de antemano.


1. 'use strict';
2. 
3. // An object can have properties of type [function]
4. let person = {
5.   // properties
6.   firstName: "martin",
7.   age: 12,
8.   father: {
9.     first_name: "paul",
10.     age: 45
11.   },
12.   mother: {
13.     first_name: "micheline",
14.     age: 42
15.   },
16.   // method
17.   toString: function () {
18.     return JSON.stringify(this);
19.   }
20. }
21. 
22. // usage
23. console.log(person);
24. // properties
25. console.log("-----------------------");
26. for (const key in person) {
27.   if (person.hasOwnProperty(key)) {
28.     const element = person[key];
29.     console.log(key, "=", element);
30.   }
31. }
32. // to bypass the ESLint warning (1)
33. console.log("-----------------------");
34. for (const key in person) {
35.   if (Object.prototype.hasOwnProperty.call(person, key)) {
36.     const element = person[key];
37.     console.log(key, "=", element);
38.   }
39. }
40. // to bypass the ESLint warning (2)
41. console.log("-----------------------");
42. for (const key in person) {
43.   // eslint-disable-next-line no-prototype-builtins
44.   if (person.hasOwnProperty(key)) {
45.     const element = person[key];
46.     console.log(key, "=", element);
47.   }
48. }

Comentarios

  • líneas 26-31: el código que recupera la lista de propiedades (excluyendo métodos) de un objeto. Este código desencadena una advertencia de ESLint:

Image

  • líneas 32-39: el código que nos permite saltarnos el aviso de ESLint. Utilizamos el prototipo de la [Objeto] clase;
  • líneas 41-47: o simplemente podemos desactivar la advertencia (línea 43);

5.7. script [obj-07]

El script [obj-07] demuestra la capacidad de destruir un objeto:


1. 'use strict';
2. // destructuring
3. 
4. // literals
5. const obj1 = {
6.   name: "martin",
7.   first_name: "jean"
8. };
9. 
10. // unpacking obj1 into variables [n, p]
11. const { lastName: n, firstName: p } = obj1;
12. console.log("n=", n, "p=", p);
13. 
14. // Destructuring obj1 into variables [n2, p2]
15. function f({ lastName: n2, firstName: p2 }) {
16.   console.log("f-n2=", n2, "f-p2=", p2);
17. }
18. f(obj1);
19. 
20. // destructuring obj1 into variables [lastName, firstName]
21. function g({ lastName: lastName, firstName: firstName }) {
22.   console.log("g-lastName=", lastName, "g-firstName=", firstName);
23. }
24. g(obj1);
25. 
26. // destructuring obj1 into variables [lastName, firstName]
27. // using shorthand notation equivalent to h({lastName:lastName, firstName:firstName})
28. function h({ lastName, firstName }) {
29.   console.log("h-lastName=", lastName, "h-firstName=", firstName);
30. }
31. h(obj1);

Comentarios

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

const { lastName: n, firstName: p } = obj1

crea dos variables [n] y [p] y equivale a:


const n = obj1.lastName
const p = obj1.firstName

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


const { lastName => n, firstName => p } = obj1

para indicar que los valores de los atributos [apellido, nombre] van a las variables [n, p];

  • la operación de desestructuración se repite en las líneas 15, 21 y 28. Cada vez, la presencia de llaves {} indica que un objeto será desestructurado en variables;
  • La línea 28 puede resultar confusa. Es una abreviatura de la notación: 

function h({ lastName: lastName, firstName: firstName })

Los resultados de la ejecución son los siguientes:

1. n= martin p= jean
2. f-last2= martin f-first2= jean
3. g-last_name= martin g-first_name= jean
4. h-last_name= martin h-first_name= jean

5.8. script [obj-08]

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


1. 'use strict'
2. 
3. // object cloning
4. const obj1 = {
5.   name: "martin",
6.   firstName: "jean"
7. };
8. 
9. // Clone (copy) of obj1 using the spread operator
10. const obj2 = { ...obj1 }
11. 
12. // checks
13. // obj2 points to a copy of obj1
14. console.log("obj2===obj1 :", obj1 === obj2)
15. console.log("obj2=", obj2)
  • línea 10: la operación para copiar el objeto [obj1]. El operador ... se llama operador de propagación;

Los resultados de la ejecución son los siguientes:

1. obj2===obj1: false
2. obj2= { name: 'martin', 'first_name': 'jean' }
  • línea 1: muestra que las referencias [obj1] y [obj2] no apuntan al mismo objeto;
  • línea 2: muestra que el objeto apuntado por [obj2] es una copia del objeto apuntado por [obj1];

5.9. Conclusión

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

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.