[JavaScript & TypeScript] Record, Map, Array 순서대로 순회하는 방법

[JavaScript & TypeScript] Record, Map, Array 순서대로 순회하는 방법

📌 Record, Map, Array란?

JavaScript와 TypeScript에서 데이터를 저장하는 주요 구조로 Record, Map, Array가 있습니다. 이들은 각기 다른 방식으로 데이터를 저장하고 순서에 대한 규칙이 다릅니다. 따라서 데이터 순서를 보장하면서 반복(iterate)하는 방법을 이해하는 것이 중요합니다. 🚀

---

✅ 1️⃣ Record 순회하기

📌 Record란?

Record<K, V>는 객체(Object)와 동일한 방식으로 동작하는 키-값 저장 구조입니다.

const record: Record<string, number> = {
  A: 1,
  B: 2,
  C: 3,
};

객체는 기본적으로 삽입 순서를 유지하지만 보장되지는 않습니다. 따라서 정렬이 필요한 경우 명시적으로 처리해야 합니다.

📌 for...in을 사용한 반복문

for (const key in record) {
  console.log(`Key: ${key}, Value: ${record[key]}`);
}

✅ 객체의 키를 순회할 수 있지만, 순서는 보장되지 않을 수 있음

📌 Object.keys()를 이용한 순회

Object.keys(record).forEach((key) => {
  console.log(`Key: ${key}, Value: ${record[key]}`);
});

✅ 배열로 변환 후 순회하면 명확한 순서를 보장 가능

📌 Object.entries()를 이용한 키-값 순회 (추천)

for (const [key, value] of Object.entries(record)) {
  console.log(`Key: ${key}, Value: ${value}`);
}

✅ 키와 값을 동시에 다루기에 가장 효율적!

📌 Object.values()를 이용한 값만 순회

Object.values(record).forEach((value) => {
  console.log(`Value: ${value}`);
});

✅ 값만 필요할 경우 간결하게 순회 가능

---

✅ 2️⃣ Map 순회하기

📌 Map이란?

Map<K, V>은 삽입 순서를 유지하는 키-값 저장 구조입니다.

const map = new Map<string, number>([
  ["A", 1],
  ["B", 2],
  ["C", 3],
]);

✅ 객체(Record)와 달리, Map은 삽입된 순서를 보장함

📌 for...of을 사용한 순회 (추천)

for (const [key, value] of map) {
  console.log(`Key: ${key}, Value: ${value}`);
}

✅ 키-값을 한 번에 처리 가능하며, 순서를 보장함

📌 map.forEach()를 이용한 순회

map.forEach((value, key) => {
  console.log(`Key: ${key}, Value: ${value}`);
});

✅ 키와 값을 동시에 다룰 때 유용

📌 map.keys(), map.values(), map.entries() 활용

console.log([...map.keys()]);    // 출력: ['A', 'B', 'C']
console.log([...map.values()]);  // 출력: [1, 2, 3]
console.log([...map.entries()]); // 출력: [['A', 1], ['B', 2], ['C', 3]]

✅ 배열 변환을 통해 순서를 유지하면서 조작 가능

---

✅ 3️⃣ Array 순회하기

📌 Array란?

배열(Array)은 순서를 보장하는 데이터 구조입니다.

const array = [1, 2, 3, 4, 5];

✅ 항상 삽입된 순서대로 요소가 저장됨

📌 for...of을 이용한 순회 (추천)

for (const value of array) {
  console.log(`Value: ${value}`);
}

✅ 배열의 요소를 순서대로 처리 가능

📌 forEach()를 이용한 순회

array.forEach((value) => {
  console.log(`Value: ${value}`);
});

✅ 콜백 함수를 활용하여 반복 가능

📌 map()을 이용한 순회 및 변환

const doubled = array.map((num) => num * 2);
console.log(doubled); // 출력: [2, 4, 6, 8, 10]

✅ 배열을 변환하면서 순회할 때 유용

---

📌 최종 정리

자료구조 순서 유지 여부 추천 순회 방식

Record	❌ 보장 안됨 (하지만 최신 JS 엔진에서는 삽입 순서 유지)	Object.entries() (추천), Object.keys(), Object.values()
Map	✅ 삽입 순서 유지	for...of (추천), map.forEach(), map.entries()
Array	✅ 삽입 순서 유지	for...of (추천), array.forEach(), map()

✅ 순서를 보장하려면 Map 또는 Array를 사용하는 것이 가장 안전함! 🚀