Notaciones en los objetos y espacios de nombre (namespaces) - Curso de JavaScript de cero a máster - Capítulo 34

En este capítulo te muestro tipos de notaciones para acceder a los elementos de los objetos y los espacios de nombre.

¿Que son los namespaces o espacios de nombre?

Los namespaces o espacios de nombre en español son contenedores de nombres en los cuales podemos almacenar variables, funciones, clases que pueden repetirse con el mismo nombre. Esto lo has visto ya, por ejemplo, los argumentos de una función podían repetir el mismo nombre de variable y eran dos elementos diferentes.

Los namespaces en los objetos

Lo mismo tienen los objetos, tienen su propio espacio de nombre. Aquí tienes un ejemplo:

Código JavaScript

var edad = 45;

let usuario = {
	nombre_completo: ['Enrique', 'Barros', 'Fernández'],
	edad: 30,
	telefono: '0467489304',
	pais_residencia: 'Australia',
	idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués', 'Italiano'],
};

console.log(usuario.edad);
console.log(edad);

terminal Resultado en la consola terminal

Aquí podemos ver que realmente hay un espacio de nombre global, el de la hoja de JavaScript y el del objeto usuario. Para acceder al namespace del objeto, debemos nombrarlo. Seguido de esto, pondremos un punto . para acceder a su contenido.

30
45

Notación de punto y notación con corchetes

Notación de punto en JavaScript

La notación (forma en la que accedemos a elementos del objeto) que hemos utilizado hasta ahora es la conocida como dot notation o notación de punto en español:

Código JavaScript

console.log(usuario.edad);

Notación de corchetes en JavaScript

La otra forma con la que podemos acceder a por ejemplo un atributo de un objeto es con la notación de corchetes:

Código JavaScript

usuario['edad'];

Esta forma de acceder recuerda a la forma de acceder a las posiciones de los array. Aunque su uso no es incorrecto, en más de una ocasión he visto desaconsejado su uso. Personalmente, no tengo una opinión en contraria a utilizar este tipo de notación.

Espacios de nombres secundarios en JavaScript

¿Qué son los espacios de nombres secundarios?

Los espacios de nombre secundarios son lo mismo solo que en un subnivel. En el siguiente ejemplo, tienes un objeto dentro de otro objeto, creando así un espacio de nombre secundario.

Objetos dentro de objetos

Fíjate en telefonos. Esta es la sintaxis para almacenar como propiedad un objeto dentro de otro. De esta forma, tenemos una propiedad con múltiples propiedades dentro o incluso métodos.

Código JavaScript

let usuario = {
	nombre_completo: ['Enrique', 'Barros', 'Fernández'],
	edad: 30,
	telefonos : {
		telefono1: '0467489304',
		telefono2: '0446395860'
		},
	pais_residencia: 'Australia',
	idiomas: ['Español', 'Catalán', 'Inglés', 'Portugués', 'Italiano'],
};

console.log(usuario.telefonos.telefono1);
console.log(usuario['telefonos']['telefono2']);

terminal Resultado en la consola terminal

Tanto en la notación de puntos o en la de corchetes, accedemos primero al espacio de nombre usuario y luego al espacio de nombre telefonos. Después, ya podemos acceder a las propiedades del espacio de nombre secundario (telefonos).

"0467489304"
"0446395860"

Ejercicios de JavaScript

  1. Analiza el siguiente objeto. Solo observa. No escribas nada.
  2. Código JavaScript

    let colores = {
    	color1: 'rojo',
    	color2: 'verde',
    	color3: 'azul',
    	secundarios : {
    		color1: 'naranja',
    		color2: 'amarillo',
    		color3: 'púrpura',
    		terciarios : {
    			color1: 'rojo-naranja',
    			color2: 'amarillo-naranja',
    			color3: 'verde-amarillo',
    			color4: 'azul-verde',
    			color5: 'azul-púrpura',
    			color5: 'rojo-púrpura',
    		},
    	},
    };
  3. ¿Qué crees que tiene de malo este código?
  4. Del código del ejercicio nº70, imprime en la consola el color 'azul'.
  5. Del código del ejercicio nº70, imprime en la consola el color 'naranja'.
  6. Del código del ejercicio nº70, imprime en la consola el color 'rojo-púrpura'.

La solución la encontrarás aquí: Haz click aquí.


Capítulos


    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


    Comentarios

    Si te quedan dudas sobre el temario, sobre JavaScript, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.