JavaScript의 객체 안의 객체

1. JavaScript에서 중첩 객체 생성
2. 자바스크립트의 다중 중첩

이 튜토리얼 기사에서는 JavaScript에서 다른 객체 내부에 여러 객체를 생성하는 방법을 설명합니다.

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'
}

여기에서 볼 수 있는 경우 const layer0은 개체의 이름입니다. 이것이 자바스크립트에서 객체를 생성하는 방법입니다. 이제 개체 내에서 볼 수 있듯이 layer1Item1, layer1Item2, layer1Item3 및 layer1Item4는 개체의 속성입니다. 이러한 속성은 고유해야 하며 개체를 다른 개체와 구별하는 차별화 요소여야 합니다.

이제 다른 객체 안에 객체를 생성하고 싶다면 외부 객체의 속성으로 내부 객체를 생성하고 이 내부 객체는 외부 객체를 통해서만 접근할 수 있다.

JavaScript에서 중첩 객체 생성

const layer0 = {

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

  }
};

이 예에서 layer1Item2는 다른 개체 내부의 새 개체입니다. 그러나 layer1Item1은 객체의 속성이고 layer1Item2는 객체입니다. 새로 생성된 객체도 외부 객체 layer0의 속성으로 생성되기 때문에 둘 다 비슷해 보입니다.

이제 내부 개체에 액세스하려면 외부 개체의 이름을 쓰고 점 뒤에 내부 개체의 이름을 씁니다.

layer0.layer1Item2

내부 개체 내의 일부 속성에 액세스하려는 경우 코드는 다음과 같습니다.

layer0.layer1Item2.layer2Item1

자바스크립트의 다중 중첩

Javascript에는 중첩 제한이 없습니다. n개의 계층을 만들 수 있습니다. 객체에 접근하는 방법은 이전 예제에서 논의한 것처럼 내부 객체에 접근하는 방법과 동일합니다.

const layer0 = {

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

이 예에서는 layer0, layer1 및 layer2의 3개 개체가 생성되었습니다. layer2 개체는 layer1 안에 있고 layer1은 layer0 안에 있습니다. 이 예에는 3개의 계층 또는 계층이 있습니다. 이제 layer2는 layer1의 속성으로 작성됩니다.

layer2의 속성에 액세스하기 위해 다음 코드를 작성합니다.

layer0.layer1Item2.layer2Item1.layer3Item1

이제 다음 코드에서 개체에 새 속성을 추가합니다.

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'
}

우리는 단순히 점으로 객체 속성과 객체 이름을 첨부하고 아래와 같은 값을 할당합니다:

layer0.layer1Item5 = 'New Item created';

이제 결과 개체는 다음과 같이 보일 것입니다.

{
  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'
}

객체에서 속성을 삭제하려는 경우 이해하기 쉽습니다. 삭제하려는 점으로 구분된 객체 속성과 함께 첨부된 객체 이름과 함께 delete 키워드를 사용합니다. 다음 예를 보십시오.

다음 객체가 있다고 가정합니다.

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'
}

그리고 layer1Item4 속성을 삭제하려고 합니다. 우리는 다음 코드를 작성할 것입니다.

delete layer0.layer1Item4;

이제 객체는 아래와 같이 보일 것입니다.

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