Objeto dentro de un objeto en JavaScript

1. Crear objetos anidados en JavaScript
2. Anidamiento múltiple en Javascript

Este artículo tutorial explicará cómo podemos crear varios objetos dentro de otro objeto en JavaScript.

Un objeto JavaScript es una colección de pares clave-valor, y los objetos anidados son objetos que tienen otros objetos dentro de ellos como propiedad. El anidamiento es una práctica ampliamente utilizada en programación, ya que proporciona al código más detalles mejorados.

Cada objeto tiene sus propias propiedades o claves, que se utilizan para almacenar los detalles del objeto. Una coma separa cada propiedad o clave.

Echemos un vistazo a cómo creamos un objeto y propiedades en Javascript.

const layer0 = {
  layer1Item1: 'Layer 1 Item 1 Text',
  layer1Item2: 'Layer 1 Item 2 text',
  layer1Item3: 'Layer 1 Item 3 Text',
  layer1Item4: 'Layer 1 Item 4 text'
}

Aquí, si puede ver, const layer0 es el nombre del objeto. Así es como creamos un objeto en Javascript. Ahora, dentro del objeto, como puede ver, layer1Item1, layer1Item2, layer1Item3 y layer1Item4 son las propiedades del objeto. Estas propiedades deben ser únicas y los factores diferenciadores que distinguen un objeto de otro.

Ahora, si desea crear un objeto dentro de otro objeto, el objeto interno se crea como una propiedad del externo, y solo se puede acceder a este objeto interno usando el objeto externo.

Crear objetos anidados en JavaScript

const layer0 = {

  layer1Item1: 'Layer 1 Item 1 Text',
  layer1Item2: {
    layer2Item1: 'Layer 2 Item 2 Text',
    layer2Item2: false

  }
};

En este ejemplo, layer1Item2 es un nuevo objeto dentro de otro objeto. Sin embargo, layer1Item1 es una propiedad del objeto y layer1Item2 es un objeto. Ambos se ven similares porque el objeto recién creado también se crea como una propiedad del objeto exterior layer0.

Ahora, si quieres acceder al objeto interno, escribirás el nombre del objeto externo, y después de un punto, escribirás el nombre del objeto interno.

layer0.layer1Item2

Y si desea acceder a alguna propiedad dentro del objeto interno, el código será:

layer0.layer1Item2.layer2Item1

Anidamiento múltiple en Javascript

No hay límite de anidamiento en Javascript. Puede hacer n número de jerarquías. El método para acceder a los objetos sería el mismo para acceder a los internos, como se discutió en el ejemplo anterior.

const layer0 = {

  layer1Item1: 'Layer 1 Item 1 Text',
  layer1Item2: {
    layer2Item1: 'Layer 2 Item 2 Text',
    layer2Item2: false,
    layer2Item3: {layer3Item1: 'Layer 3 Item 2 Text'}
  }
};

En este ejemplo, hay 3 objetos creados, layer0, layer1 y layer2. El objeto layer2 está dentro de layer1 y layer1 está dentro de layer0. Hay 3 capas o jerarquías en este ejemplo. Ahora, layer2 se escribe como una propiedad de layer1.

Para acceder a las propiedades de la layer2, escribiremos el siguiente código.

layer0.layer1Item2.layer2Item1.layer3Item1

Ahora, para agregar una nueva propiedad a un objeto en el siguiente código:

let layer0 = {
  layer1Item1: 'Layer 1 Item 1 Text',
  layer1Item2: 'Layer 1 Item 2 text',
  layer1Item3: 'Layer 1 Item 3 Text',
  layer1Item4: 'Layer 1 Item 4 text'
}

simplemente adjuntaremos el nombre del objeto con la propiedad del objeto con un punto y le asignaremos un valor como el siguiente:

layer0.layer1Item5 = 'New Item created';

Ahora el objeto resultante se verá así:

{
  layer1Item1: 'Layer 1 Item 1 Text', layer1Item2: 'Layer 1 Item 2 text',
      layer1Item3: 'Layer 1 Item 3 Text', layer1Item4: 'Layer 1 Item 4 text',
      layer1Item5: 'New Item Created'
}

Si desea eliminar cualquier propiedad del objeto, es fácil de entender. Usamos la palabra clave delete junto con el nombre del objeto adjunto con la propiedad del objeto, separados por un punto que desea eliminar. Mira el siguiente ejemplo:

Considere que tenemos el siguiente objeto.

let layer0 = {
  layer1Item1: 'Layer 1 Item 1 Text',
  layer1Item2: 'Layer 1 Item 2 text',
  layer1Item3: 'Layer 1 Item 3 Text',
  layer1Item4: 'Layer 1 Item 4 text'
}

Y queremos eliminar la propiedad layer1Item4; escribiremos el siguiente código.

delete layer0.layer1Item4;

Ahora el objeto se verá como se muestra a continuación.

{
  layer1Item1: 'Layer 1 Item 1 Text', layer1Item2: 'Layer 1 Item 2 text',
      layer1Item3: 'Layer 1 Item 3 Text',
}