[Javascript] Array, Set, Map 자료구조를 순회할 수 있는 방법과 이유

배열(Array) 순회

1. 전통적 for 루프

   인덱스 기반 접근으로 정밀한 제어 가능 (임의 점프/중단 가능)

   const arr = [1, 2, 3];
   for (let i=0; i<arr.length; i++) {
     console.log(arr[i]); *// 1, 2, 3*
   }

2. forEach 메서드

   간결한 함수형 프로그래밍 스타일 (사이드 이펙트만 필요할 때 적합)

   arr.forEach(item => console.log(item));

3. for...of (인덱스 없이 값만 필요한 경우)

   for (const num of arr) {
     console.log(num);
   }

집합(Set) 순회

1. forEach 메서드

   삽입 순서 보장 (Map과의 API 일관성 유지)

   const mySet = new Set([1, 2, 3]);
   mySet.forEach(value => console.log(value));

2. for...of 문

   이터레이터 직접 접근 (순회 중간에 break 가능)

   for (const val of mySet) {
     console.log(val);
   }

맵(Map) 순회

1. entries() 메서드

   키-값 쌍 동시 접근 (구조 분해 할당으로 직관적 접근)

   const map = new Map([['a',1], ['b',2]]);
   for (const [key, val] of map.entries()) {
     console.log(key, val); *// a 1, b 2*
   }

2. forEach 메서드

   값 중심 처리 (배열의 forEach와 유사한 사용 경험)

   map.forEach((value, key) => {
     console.log(key, value);
   });

3. 키/값 이터레이터

   단일 요소 접근 시 (특정 요소 타입만 필요할 때 최적화)

   for (const key of map.keys()) {
     console.log(key); *// a, b*
   }
   
   for (const value of map.values()) {
     console.log(value); // value1, value2
   }

   선택 기준

   기준	배열	Set	Map
   인덱스 접근	필수 시 for	지원 안 함	지원 안 함
   조기 종료	for 루프	for...of	for...of
   부수 효과	forEach	forEach	forEach
   새 컬렉션 생성	map()	변환 필요	변환 필요

   최신 브라우저 환경에서는 for...of와 forEach가 내부적으로 최적화되어 있으며, Map/Set은 Object보다 순회 성능이 약 30% 빠른 것으로 측정

   for, for of for-seach 등으로 순회가 가능한 이유

   자바스크립트에서 데이터 구조를 순회할 수 있는 이유는 이터러블(Iterable Protocol)과 이터레이터(Iterator Protocol)을 구현했기 때문.

   이 두 프로토콜이 자바스크립트의 다양한 순회 메커니즘을 가능케 함

   1. 이터러블(Iterable):

      • [Symbol.iterator]() 메서드를 구현한 객체(예: Array, Map, Set, String).
      • 이 메서드는 이터레이터 객체를 반환함

      const arr = [1, 2, 3];
      const iterator = arr[Symbol.iterator](); *// 이터레이터 생성*

   2. 이터레이터(Iterator):

      • next() 메서드를 가지며, 호출 시 { value: 값, done: boolean } 형태의 객체 반환
      • done: true가 반환되면 순회 종료.

   각 루프의 동작 방식

   1. for...of 루프

   • 이터러블 프로토콜을 직접 사용 내부적으로 [Symbol.iterator]()를 호출해 이터레이터 생성 후 next()를 반복 호출
     
   • 지원 대상: Array, Map, Set, String, TypedArray, arguments 등

   for (const num of [1, 2, 3]) {
     console.log(num); *// 1, 2, 3*
   }

   2. forEach 메서드

   • Array 전용 메서드 Array.prototype.forEach로 구현되어 인덱스 기반으로 요소 접근
     
   • 제어 흐름 제한: return이 현재 콜백만 종료(루프 전체 종료 불가)

     [1, 2, 3].forEach(num => console.log(num));

   3. 전통적 for 루프

   • 인덱스 기반 접근 배열의 length 프로퍼티와 인덱스를 통해 순회6.
     
   • 유연성: break, continue, return 모두 사용 가능.

   프로토콜 차이 비교표

   특징	for...of	forEach	for
   프로토콜 사용	이터러블 프로토콜	Array 메서드	인덱스 접근
   break/continue	지원 O	지원 X	지원 O
   반환 값	없음	없음	없음
   비동기 처리	await 가능	await 불가	await 가능