[15일차]forEach와 map, 리팩토링, HTTP Status Code

forEach와 map의 핵심 차이점

forEach와 map은 둘 다 배열의 각 요소를 순회하는 고차 함수이지만,
목적과 반환값에서 근본적인 차이가 있다.

---

1. forEach

목적: 단순 반복 실행

forEach는 배열의 각 요소를 가지고 주어진 함수(콜백)를 단순히 실행하는 것이 목적이다.
각 요소에 대해 어떤 '행동(Action)'을 수행하고 싶을 때 사용한다.

반환값: undefined

forEach는 항상 undefined를 반환한다.
즉, 메서드 호출의 결과로 새로운 값을 만들어내지 않는다.

예시 코드 (DB에 저장)

// 가상의 DB 객체
const db = {
  save: (data) => console.log(`${data.productId}번 상품 DB에 저장 성공!`)
};

const newOrders = [
  { productId: 101, quantity: 1 },
  { productId: 102, quantity: 2 }
];

// 각 주문에 대해 'DB에 저장하는 행동'만 수행한다.
const result = newOrders.forEach(order => {
  db.save(order);
});

// 실행 결과:
// "101번 상품 DB에 저장 성공!"
// "102번 상품 DB에 저장 성공!"

console.log(result); // undefined (반환값이 없음)

언제 사용하는가?

• 배열의 각 요소를 DB에 저장하거나 API로 전송하는 등의 '작업'을 수행할 때
• 배열의 각 요소를 화면에 단순히 출력할 때 (console.log)
• 결과로 새로운 배열이 필요 없을 때 사용한다.

---

2. map

목적: 새로운 배열 생성 (변환)

map은 배열의 각 요소를 주어진 함수(콜백)를 통해
새로운 값으로 변환(Transform)하고,
이 변환된 값들로 이루어진 새로운 배열을 생성하는 것이 목적이다.

반환값: 새로운 배열 (A New Array)

map은 콜백 함수에서 return된 값들로 구성된,
원본 배열과 같은 길이의 새로운 배열을 반환한다.

예시 코드 (HTML 태그 반환)

const products = [
  { id: 1, name: '노트북' },
  { id: 2, name: '키보드' },
  { id: 3, name: '마우스' }
];

// 각 상품 데이터를 '<li> 태그 문자열'로 변환하여 새로운 배열을 만든다.
const htmlListItems = products.map(product => {
  return `<li>${product.name}</li>`; // 변환된 HTML 문자열을 return
});

console.log(htmlListItems);
// 결과:
// [
//   "<li>노트북</li>",
//   "<li>키보드</li>",
//   "<li>마우스</li>"
// ]

console.log(products); // 원본 배열은 변경되지 않음

언제 사용하는가?

• 서버에서 받아온 데이터 배열을 HTML 요소 배열이나 React 컴포넌트 배열로 변환할 때
• 원본 데이터를 기반으로 한 새로운 데이터 배열이 필요할 때 사용한다.

---

3. 한눈에 보는 비교표

구분	forEach	map
목적	각 요소에 대한 반복 작업 수행	각 요소를 변환하여 새로운 배열 생성
반환값	undefined	새로운 배열 (New Array)
원본 배열 변경	변경하지 않음	변경하지 않음
대표 사용 예시	배열 순회하며 DB에 저장	데이터 배열을 HTML 태그 배열로 변환

---

핵심 요약

• forEach: 반환값이 필요 없는 행동을 할 때 사용한다. (예: DB 저장)
• map: 새로운 배열을 필요로 하는 변환을 할 때 사용한다. (예: HTML 생성)

---

리팩토링(refactoring)

리팩토링이란 소프트웨어 공학에서
결과의 변경 없이
코드의 구조를 개선하는 것

△리팩터링-위키백과

---

목적

• 가독성 향상, 복잡성 감소 → 버그 및 취약점 발견
• 유지보수의 편리함
• 설계, 구조 및 구현의 개선 및 기능 보존

언제 하는가?
자유롭게 원하는 때에 할 수 있는 것이 리팩토링의 장점.
하지만 배포를 하거나 실제 운영 직전의 코드를 수정하는 것은 절대 금지.

---

HTTP Status Code

HTTP의 응답에 대한 상태를 나타내는 코드.
크게 5가지로
1xx(정보), 2xx(성공), 3xx(리다이렉션), 4xx(클라이언트 오류), 5xx(서버 오류)로 분류.

일반적으로 많이 보는 코드

• 200 : 조회, 수정, 삭제 성공
• 201 : 새로운 데이터 생성 성공
• 404 : 요청한 페이지를 찾을 수 없음
• 500 : 서버 오류로 요청을 수행할 수 없음