🪁react/바닐라 js 실습

[...객체] 와 Object.value(객체)의 차이 그리고 Object.entries()

하얀성 2024. 4. 5. 20:09

[...객체]  ||  Object.value(객체) 방식

 

둘다 객체나 배열의 요소를 추출하고 사용하는 방법 중 하나입니다.

그러나 두 방법은 사용하는 상황과 목적에 따라 약간의 차이가 있습니다.

 

1. [...객체]  : 객체의 key와 value값 모두를 받아와서 배열이나, 객체에 저장

2. Object.value(객체)  :   객체의 value값만 받아와서 배열이나, 객체에 저장

3.Object.entries(객체) : 객체의 key와 value값을 세트로 각각 받아와서 각 배열로 저장후, 다시 배열로 감싼다. 

스프레드 연산자 (...)

스프레드 연산자는 배열이나 객체의 모든 요소를 개별 요소로 "펼쳐서" 사용할 수 있게 해줍니다. 이를 통해 배열이나 객체를 쉽게 복사하거나, 함수의 인자로 전달하거나, 배열을 합치는 등의 작업을 할 수 있습니다.

Object.values()

반면, Object.values() 함수는 객체의 모든 값을 배열로 반환합니다. 이는 주로 객체의 값에 접근하여 작업을 할 때 사용됩니다.

Object.entries()

배열 안에 배열

Object.entries()의 결과로 배열 안에 배열이 들어가는 이유는, 각 속성의 키와 값 쌍을 하나의 단위로 취급하여 그들을 나타내기 위함입니다. 이렇게 함으로써, 프로그래머는 객체의 속성을 쉽게 순회하고 각 속성의 키와 값을 동시에 처리할 수 있게 됩니다.

기존 코드

이해가 어렵고 오래 되서 아래에 다른 사람의 코드를 데려 왔다.(결과가 동일하다고 강사님이 인정해주심)

class Template {
  getTabList() {
    return `
    <ul>
    ${Object.values(TabType)
      .map((tabType) => ({
        tabType,
        tabLabel: TabLabel[tabType],
      }))
      .map(this._getTab)
      .join("")}
    </ul>`;
  }

  _getTab({ tabType, tabLabel }) {
    return `
    <li data-tab="${tabType}">
      ${tabLabel}
    </li>`;
  }
}

바뀐코드

요약

  • 첫 번째 .map() 함수 후에는 tabType과 tabLabel 정보를 담은 객체 배열이 생성됩니다.
  • 두 번째 .map() 함수는 이 객체 배열을 HTML 문자열 배열로 변환합니다.
  • .join('')은 이 HTML 문자열들을 하나의 문자열로 합쳐서, 최종적으로 HTML로 삽입될 수 있는 전체 탭 목록을 생성합니다.
const TabLable = {
  'KEYWORD': '추천 검색어',
  'HISTORY': '최근 검색어'
}

Object.entries(TabLable)
        .map((row) => {
          const [ tabType, tabLable ] = row;
          return { tabType, tabLable }
        })
        .map(this._getTab)
        .join('');

 

Object.entries 적용후,

첫번째 map함수 내용 적용후

.map((row) => {
  const [tabType, tabLabel] = row; // 배열 구조 분해 할당
  return { tabType, tabLabel }; // 새로운 객체 생성
})

객체 리터럴 표기법

return { tabType, tabLabel }; 부분에서 객체 리터럴 표기법을 사용합니다. 이 표기법에서는 { 변수명 }으로 객체를 생성할 때, 속성명과 변수명이 같다면, { 속성명: 변수값 }을 단순화하여 { 변수명 }으로 작성할 수 있습니다.

따라서, 위 코드에서 tabType 변수와 tabLabel 변수는 각각 [key, value] 쌍의 key와 value에 해당합니다. 그리고 이 변수들을 사용해 { tabType: tabType, tabLabel: tabLabel } 객체를 생성하는데, 이를 간소화하여 { tabType, tabLabel }로 작성한 것입니다.

결론

  • Object.entries(TabLabel)로부터 얻은 각 [key, value] 쌍에 대해 .map() 함수 내에서 구조 분해 할당을 사용하여 tabType과 tabLabel 변수에 값을 할당합니다.
  • 이 변수들을 사용하여 새로운 객체 { tabType, tabLabel }를 생성합니다. 여기서 객체의 속성명과 변수명이 같기 때문에, 간결한 표기법을 사용합니다.
  • 최종적으로, .map() 함수는 이러한 객체들의 배열을 반환합니다. 각 객체는 원래 배열의 [key, value] 쌍을 { tabType: "KEYWORD", tabLabel: "추천 검색어" }와 같은 형태로 변환한 것입니다.