[Javascript] 객체를 나열하는 방법. (map함수 사용)

많은 사람들이 알다시피 map() 은 배열에서만 사용할 수 있는 함수이다. 
그렇기 때문에 내가 혹시나 "객체"에 있는 모든 요소를 나열하고 싶어서 map()을 사용했다면, 에러가 떴을 것이다. 

 

 

 

그럼 어떻게 해결할 수 있는지 확인해보자.

---

해결 방안

 

{Object.keys(toDos).map((key) => (
          <View key={key}>
            <Text style={{ color: "white" }}>{toDos[key].text}</Text>
          </View>
        ))}

 

이것은 내가 사용했던 React Native의 코드이다.  이를 예시로 들어 자세히 설명해 보겠다.

 

 

1. 먼저 Object.keys(객체) 함수는 객체 의 key를 "list 형태"로 반환하는 함수이다. 그렇기에 toDos라는 객체의 key들을 전부 list에 보여준다.

 

2. list에 담겼으니 우리는 map 함수를 사용할 수 있다. 여기서 다시 한 번 명심해야할 점은 이 map 함수로 loop를 도는 대상은 객체가 아닌 key값이 담긴 list이다. map() 함수를 통해 그대로 출력하면 객체의 key값만 나오는 것이다.

 

3. list.map(key => {}) 에서 우리는 각 key값으로 이제 객체에 그 key값에 해당하는 value를 불러내면 된다.

 

 

이 과정을 예시로 들어보겠다.

const dataArray = {
        "메뉴31": 1,
        "메뉴35": 1,
        "메뉴36": 1,
        "메뉴40": 1,
        "메뉴41": 1,
      };

다음과 같은 객체가 있다. 우리는 여기서 1을 순서대로 나열할 생각이다.

 

먼저 Object.keys(dataArray)를 통해 dataArray의 모든 key값을 리턴한다.

리턴값은 분명 ["메뉴31", "메뉴35", "메뉴36", "메뉴40", "메뉴41" ] 일 것이다. 이것에다가 map()함수로 사용할 것이다. 

 

["메뉴31", "메뉴35", "메뉴36", "메뉴40", "메뉴41" ]. map( (key) => {}) 를 사용하면 각 key가 선택되고 이제 이를 dataArray[key]로 출력하면 된다!

 

 

 

자바스크립트 기본 문법에 대한 이해가 있다면 쉽게 해결할 수 있을 것이다.