[JavaScript] 2중 객체(중첩된 객체) 접근

2중 객체(중첩된 객체)

실무에서 객체(Object) 안에 객체를 만들고 반복문을 돌려야 하는 일이 생겼다.

아래 예시 코드를 보자.

let 팝업 = {
  첫번째: {
    tab_name: '<div> 1 </div>',
    tab_bg: '#2D3E52',
    link: '',
    end_date: '2021-02-28'
  },
  두번째: {
    tab_name: '<div> 2 </div>',
    tab_bg: '#F1A5CC',
    link: 'www.naver.com',
    end_date: '2020-01-01'
  },
  세번째: {
    tab_name: '<div> 3 </div>',
    tab_bg: '#0060AC',
    link: '',
    end_date: '2020-08-31'
  },
  네번째: {
    tab_name: '<div> 4 </div>',
    tab_bg: '#FF540F',
    link: 'www.daum.net',
    end_date: '2021-03-30'
  },
  다섯번째: {
    tab_name: '<div> 5 </div>',
    tab_bg: '#FF7F7E',
    link: '',
    end_date: '2022-01-01'
  }
}

위 코드가 효율적인지 아닌지는 둘째치고 이러한 코드에 접근하는 상황이라고 가정하자.

for문을 돌린다고 할 때 어떻게 key와 value에 접근할 것인지 문제가 된다.

배열을 합치거나 하는 몇 가지 방법들이 있긴 하겠지만 나는 이 상태 그대로 접근하고 싶었다.

 

typeof(팝업); // "Object"
typeof(팝업.첫번째) // "Object"

팝업과 팝업.첫번째는 모두 객체이다.

그렇다면 tab_name을 선택하려면 어떻게 해야 할까?

 

팝업.첫번째.tab_name
// "<div> 1 </div>"

쉽다. 가장 단순하게 생각나는대로 적으면 된다.

그렇다면 [0] 과 같은 숫자 형태로 접근하려면 어떻게 해야 할까?

 

팝업.첫번째
// {tab_name: "<div> 1 </div>", tab_bg: "#2D3E52", link: "", end_date: "2021-02-28"}

팝업.첫번째[0]
// undefined

Object.keys(팝업.첫번째)[0]
// "tab_name"

Object.values(팝업.첫번째)[0]
// "<div> 1 </div>"

일반적인 팝업.첫번째[0] 은 안되고 Object.keys 혹은 Object.values 를 사용해야 한다.

하지만 이대로 반복문을 돌릴 수는 없다.

'두번째', '세번째' 역시 반복문으로 접근할 수 있어야 한다.

팝업의 첫번째 객체인 '첫번째' 를 어떻게 숫자로 나타낼 수 있을까?

 

 

Object.keys(팝업.첫번째)[0] 의 결과 "tab_name" 을 얻을 수 있었다.

그리고 위에서 팝업.첫번째.tab_name 의 결과 "<div> 1 </div> 가 나왔으므로 tab_name 자리에 Object.keys(팝업.첫번째)[0] 을 쓰면 되지 않을까?

 

팝업.첫번째.Object.keys(팝업.첫번째)[0]
// Uncaught TypeError: Cannot read property 'keys' of undefined

 

하지만 에러가 발생했다.

그 이유는 Object.keys(팝업.첫번째)[0] 의 타입이 string이기 때문이다.

실제 tab_name은 key 이다.

typeof(Object.keys(팝업.첫번째)[0]);
// "string"

 

다른 방법으로 접근하는 것이 필요했다.

Object.values 말고 Object['value'] 로 접근했다.

팝업.첫번째['tab_name']
// "<div> 1 </div>"

Object.keys(팝업)[0]
// "첫번째"

팝업[Object.keys(팝업)[0]].tab_name
// "<div> 1 </div>"

 

복잡하지만 두 가지 방식을 모두 사용해서 원하는 결과값을 얻을 수 있었다.

이제 반복문을 돌릴 수 있다.

 

for (let i = 0; i < Object.keys(팝업).length; i++ ) {
  console.log(팝업[Object.keys(팝업)[i]].tab_name);
}

// <div> 1 </div>
// <div> 2 </div>
// <div> 3 </div>
// <div> 4 </div>
// <div> 5 </div>