Web Development/JAVASCRIPT

[JAVASCRIPT] each() 와 map()의 차이

devflate 2023. 3. 2. 14:25

map() 메서드

배열의 각 요소를 주어진 함수로 처리하여 그 결과를 모아 새로운 배열을 반환합니다. 반복을 종료할 수 있는 방법이 없습니다.

forEach() 메서드

배열의 각 요소에 대해 주어진 함수를 실행합니다. 반복을 중간에 종료할 수 있습니다(break나 return을 사용할 수 없습니다).

실제 사용 예시

원본 코드 (JavaScript로 변환)

document.getElementById('search_result_box').classList.remove('d-none');
document.getElementById('search_result_box').classList.add('d-block');
const inputText = document.getElementById('search_additional_informations').value;
let info_html = `<div class="bg-white mb-2rem"><button type="button" id="dynamic_btn" class="btn fs-18 text-a5a5a5">+ ${inputText} 입력하기</button></div>`;
infos.forEach(function(item) {
    info_html += `<div class="bg-white mb-2rem"><button type="button" id="dynamic_btn" class="btn fs-18" onclick="">${item.name}</button></div>`;
});
document.getElementById('search_result_box').innerHTML = info_html;

변경 코드

document.getElementById('search_result_box').classList.remove('d-none');
document.getElementById('search_result_box').classList.add('d-block');
const inputText = document.getElementById('search_additional_informations').value;
let infoItems = infos.map(item => `<div class="bg-white mb-2rem"><button type="button" id="dynamic_btn" class="btn fs-18" onclick="">${item.name}</button></div>`);
const info_html = `<div class="bg-white mb-2rem"><button type="button" id="dynamic_btn" class="btn fs-18 text-a5a5a5">+ ${inputText} 입력하기</button></div>${infoItems.join('')}`;
document.getElementById('search_result_box').innerHTML = info_html;

map()과 forEach()의 차이점

  • map(): 배열의 각 요소에 대해 주어진 함수를 호출하여 반환된 값들로 새로운 배열을 생성합니다. 마지막에 join() 메서드를 사용하여 배열을 하나의 문자열로 합칩니다.
  • forEach(): 배열의 각 요소에 대해 주어진 함수를 실행하며, 반복할 때마다 결과를 기존 문자열에 재할당합니다.

성능 차이

  • map()을 사용하면 배열을 한 번 순회하여 새로운 배열을 만들고, 마지막에 한 번만 문자열로 합칩니다. 이는 메모리 할당이 한 번 이루어지고, 배열의 크기와 상관없이 일정한 시간 복잡도를 가집니다.
  • forEach()를 사용하면 배열의 크기만큼 반복하면서 기존 문자열에 새 값을 추가하는 방식입니다. 문자열은 불변이기 때문에 새로운 문자열을 계속 생성하여 재할당해야 합니다. 이는 배열의 크기가 커질수록 성능 저하가 발생할 수 있습니다.

결론

성능과 코드의 가독성 측면에서 map()과 join()을 사용하는 것이 forEach()와 += 연산자를 사용하는 것보다 더 효율적입니다. 특히 배열이 큰 경우 이 차이는 더욱 두드러집니다.

참고 자료