패스트캠퍼스 환급챌린지 46일차 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq

250815(금) 46일차

개념과 구조 - 이터러블, 이터레이터 프로토콜

프로세싱 - 형태의 변환 - 객체를 문자열로 변환하기

 

이터레이션 프로토콜
이터레이션 프로토콜은 크게 두 가지로 나뉜다
이터러블 프로토콜 – 객체가 [Symbol.iterator] 메서드를 가지고 있어야 하며, 이를 호출하면 이터레이터를 반환
이터레이터 프로토콜 – 반환된 객체가 next() 메서드를 가지고 있어야 하고, { value, done } 형태의 결과를 반환
제너레이터 함수는 이 두 가지 프로토콜을 자동으로 구현하는 대표적인 예시이므로, for...of 구문에서 자연스럽게 동작

const myIterable = {
  [Symbol.iterator]: function* () {
    let i = 1;
    while (i <= 5) {
      yield i++;
    }
  }
};

for (const num of myIterable) {
  console.log(num); // 1, 2, 3, 4, 5
}

 

객체를 문자열로 변환 – 반복문 vs 배열 메서드
이터레이션 프로토콜의 이해를 바탕으로 객체 배열을 CSV 형태로 변환하는 예제를 두 가지 방식으로 구현
전통적인 반복문(이중 for...of)

const cartItems = [
  { id: 1, item: 'Handmill', price: 4000, discount: 0.1 },
  { id: 2, item: 'A4 Paper', price: 400, discount: 0.05 }
];

let result = [];
for (const item of cartItems) {
  let row = [];
  for (const [, value] of Object.entries(item)) {
    row.push(value);
  }
  result.push(row.join(','));
}

console.log(result.join('\n'));

배열 메서드 체이닝(map + join)

const extractValues = obj =>
  Object.entries(obj).map(([, value]) => value);

const csv = cartItems
  .map(extractValues)
  .map(row => row.join(','))
  .join('\n');

console.log(csv);

 

이터레이션 프로토콜 이해는 커스텀 데이터 구조나 제너레이터 기반 로직 구현 시 필수적
for...of나 스프레드 연산자(...)가 내부적으로 이터레이션 프로토콜을 활용한다는 사실을 알면

동작 원리를 확실히 예측할 수 있다
CSV 변환 예제처럼 반복문과 함수형 메서드 스타일의 장단점을 비교하며 상황에 맞는 방식을 선택하는 습관을 들이는 것이 중요

 

이번 강의는 단순히 배열 순회 문법을 배우는 차원이 아니라 반복 가능 객체의 설계 규약을 이해하는 단계였다
이 규약을 알면 제너레이터·커스텀 반복자·데이터 변환 로직 등 다양한 영역에서 더 유연하고 재사용성 높은 코드를 작성할 수 있다