[ 리액트(React) ] Key:Value형태인 Object에 map 함수 사용하기

📍 Key:Value형태인 Object에 map 함수 사용하기

다음 과목:점수 형태인 Object에서 map 함수를 사용할 때 3가지 방법이 있다.

 

1. Object.entries: array 형태로 [key, value]를 반환한다. 주의 할 점은 반환 시 객체의 순서를 보장하지 않으므로 정렬을 먼저 하고 나서 사용하는 것을 권장한다. (Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));, 출처: MDN)
2. Object.keys: key만 반환한다.
3. Object.values: value만 반환한다.

const subjects = { math: 90, english: 100, science: 80 };

// idx는 index 번호를 반환하고 따로 명시하지 않았다.

const getEntries = Object.entries(subjects).map((entrie, idx) => {
  return console.log(entrie, idx);
});
👉🏽 ['math', 90], ['english', 100], ['science', 80]

const getKeys = Object.keys(subjects).map((entrie, idx) => {
  return console.log(entrie, idx);
});
👉🏽 'math', 'english', 'science'

const getValues = Object.values(subjects).map((entrie, idx) => {
  return console.log(entrie, idx);
});
👉🏽 90, 100, 80