배열 map 사용법과 예제

배열 map 사용법과 예제에서 먼저 볼 부분

map은 배열의 각 항목을 다른 형태로 바꿔 새 배열을 만드는 메서드입니다. 화면 목록을 만들 때 특히 많이 씁니다.

map은 원본 배열을 순회하면서 각 항목을 변환합니다. 문자열 배열을 HTML 문자열 배열로 바꾸거나, 데이터 객체를 화면 카드로 바꿀 때 자연스럽습니다.

map의 결과는 새 배열입니다. 단순히 콘솔에 찍기만 하려면 forEach가 어울릴 수 있지만, 변환 결과가 필요하면 map이 더 명확합니다.

React에서도 map은 목록 렌더링의 기본입니다. 이때 key를 함께 다루는 이유까지 이어서 배우면 좋습니다.

상품 목록 HTML 만들기

const products = ["키보드", "마우스", "모니터"];

const items = products.map((product) => {
  return `<li>${product}</li>`;
});

document.querySelector("#list").innerHTML = items.join("");

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

잘못 작성했을 때 나타나는 흐름

JavaScript 글은 값이 언제 만들어지고 함수가 언제 실행되는지를 순서대로 따라가면 이해가 쉬워집니다.

console.log는 단순 확인용이 아니라 현재 값의 모양과 실행 흐름을 확인하는 가장 기본적인 디버깅 도구입니다.

DOM을 다루는 코드는 HTML 요소가 먼저 준비되었는지 확인해야 하며, 선택 결과가 null인지 보는 습관이 중요합니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 결과 배열이 필요한지 확인하기
• 콜백 함수에서 return을 빠뜨리지 않기
• 원본 배열을 직접 바꾸는 코드와 구분하기
• 화면에 넣을 때 join으로 문자열을 합치기