[JavaScript 시리즈 3편] 함수와 배열 메서드로 흐름 정리하기

변수와 자료형으로 값의 모양을 확인했다면, 이제 그 값을 반복적으로 변환해 버튼 동작과 리스트 렌더링으로 이어야 합니다. 이번 글도 개념 → 코드 → 이유 순서를 지킵니다.

이번 글에서 새로 나오는 용어

1. 함수: 입력을 받아 특정 동작을 수행한 뒤 결과를 돌려주는 재사용 가능한 코드 묶음입니다.
2. 화살표 함수: () => {} 형태처럼 짧게 쓰는 함수 문법으로, 콜백을 깔끔하게 작성할 때 사용합니다.
3. 콜백: 다른 함수에 넘겨서 나중에 호출되는 함수로, 배열 메서드와 이벤트에서 자주 등장합니다.
4. 배열 메서드: map, filter, reduce처럼 배열을 변형·요약하는 내장 함수 모음입니다.
5. 체이닝: 여러 메서드를 점(.)으로 이어 데이터를 단계별로 가공하는 작성법입니다.

핵심 개념

• 함수: 동작을 이름 붙여 재사용할 수 있게 만든 묶음입니다. 입력(매개변수)과 출력(반환값)을 명확히 해야 합니다.
• 화살표 함수: const fn = () => {}처럼 작성하는 짧은 함수 표현입니다. 중괄호를 생략하면 한 줄짜리 계산을 간단히 표현할 수 있습니다.
• 배열 메서드: map(각 요소를 새 값으로 바꾸기), filter(조건에 맞는 요소만 남기기), reduce(배열을 하나의 값이나 객체로 줄이기) 같은 도구입니다. 모두 콜백 함수를 매개변수로 받습니다.
• 체이닝: 배열 메서드를 줄줄이 연결해 데이터를 단계별로 가공하는 방식입니다. UI 상태를 읽기 쉽게 설명할 수 있습니다.

코드로 확인하기

function add(a, b) {
  return a + b;
}

const multiply = (a, b) => a * b;

add는 함수 선언, multiply는 화살표 함수입니다. 둘 다 입력과 출력만 바르다면 동등하게 사용할 수 있습니다.

const scores = [70, 85, 90];
const raisedScores = scores.map((score) => score + 5);

const posts = [
  { title: "입문", published: true },
  { title: "초안", published: false },
];
const publishedPosts = posts.filter((post) => post.published);

const total = scores.reduce((sum, score) => sum + score, 0);

map, filter, reduce를 조합하면 학교 축제 일정표, 동아리 명단 등 반복되는 배열 문제를 빠르게 풀 수 있습니다.

const users = [
  { name: "민지", active: true },
  { name: "지수", active: false },
  { name: "호준", active: true },
];

const activeNames = users
  .filter((user) => user.active)
  .map((user) => user.name);

console.log(activeNames); // ["민지", "호준"]

const orders = [
  { price: 12000, type: "ramen" },
  { price: 4500, type: "coffee" },
  { price: 8000, type: "ramen" },
];

const totalByType = orders.reduce((acc, order) => {
  const nextTotal = (acc[order.type] ?? 0) + order.price;
  return { ...acc, [order.type]: nextTotal };
}, {});

console.log(totalByType); // { ramen: 20000, coffee: 4500 }

??(null 병합 연산자)는 값이 없을 때 기본값을 채워 넣는 연산자입니다. 주문 합계를 계산할 때 undefined 오류를 막아 줍니다.

왜 중요한가

• 교내 행사 페이지에서 “마감된 신청자만 숨기기” 같은 요구가 들어오면, filter 한 줄로 해결할 수 있습니다.
• 재고 개수나 응답 통계를 빠르게 계산하면 UI를 새로 고칠 때 서버 왕복 없이도 반응성 있는 화면을 만들 수 있습니다.
• 명확한 함수 이름은 협업 노트나 코드 리뷰에서 “이 함수는 어떤 입력을 받아 어떤 화면을 갱신한다”는 설명을 쉽게 만들어 줍니다.

실습

• 따라 하기: todos 배열을 만들고 toggleTodo(id) 함수를 작성해 완료 여부를 바꾼 뒤 filter로 완료/미완료 리스트를 출력합니다.
• 확장하기: reduce를 사용해 태그 사용 빈도를 객체로 만들고, 이 객체를 리스트 UI에 붙일 수 있는 형태로 변환합니다.
• 디버깅: reduce 초기값을 일부러 빼고 생기는 TypeError 메시지를 기록한 뒤 초기값을 추가해 문제를 해결합니다.
• 완료 기준: filter -> map -> reduce 흐름을 직접 연결한 코드가 예상한 배열과 통계 객체를 모두 출력하면 실습을 마친 것입니다.

마무리

함수와 배열 메서드를 익히면 데이터를 읽을 때 “무슨 일을 하는지” 한 문장으로 말할 수 있습니다. 다음 글에서는 DOM 요소를 직접 선택하고 이벤트를 연결해 지금 만든 함수 흐름을 화면에 붙여 보겠습니다.