'for loop', '.forEach' 및 '.map' 메서드의 성능 테스트. 어느 것이 가장 효과적입니까?

for 루프 중에서 .foEach 및 .map 메서드 중 어느 것이 가장 효율적인지 궁금한 적이 있습니까? 대부분의 경우 입력 크기가 작을수록 성능의 차이는 미묘합니다. 그러나 입력 크기가 커짐에 따라 그 차이를 명확하게 확인할 수 있었습니다.

for 루프, .forEach 및 .map 메소드의 성능을 테스트해 봅시다. 성능을 테스트하기 위해 다양한 크기 1-100, 1-500, 1-1000, 1-2000, 1-5000 및 마지막으로 1-10000의 정수 입력 배열을 사용합니다.

우리의 목표가 배열의 각 요소를 제곱하여 새 배열에 쓰는 것이라고 가정합니다(***입력 배열의 각 요소의 제곱을 새 배열로 푸시한다는 점에 유의하십시오). for 루프, .forEach 및 .map 메서드를 사용하여 동일한 목표를 달성할 것입니다. 다양한 입력 크기에 대해 각 방법에 소요된 시간을 기록합니다. 마지막에는 트리오가 개별적으로 걸린 시간을 시각화하고 비교하기 위해 그래프를 그릴 것입니다.

function efficiency(n){

const arr1 = []
for(let i=1; i<= n; i++){
    arr1.push(i)
}

let forArr = []
let eachArr = [];

//For loop
let t = performance.now();
for (let i = 1; i <= arr1.length; i++) {
    forArr.push(i*i)
}
console.log(forArr.length, 'using for loop', performance.now() - t);


//.forEach
let t0 = performance.now();
arr1.forEach(element => {
    eachArr.push(element * element);
});
console.log(eachArr.length, "using foreach", performance.now() - t0);


//.map
let t1 = performance.now();
let mapArr = arr1.map(function(x){
    return (x * x);
 })
console.log(mapArr.length, "using map", performance.now() - t1)
}

// function call and passing n-size of input array
efficiency(100)
efficiency(500)
efficiency(1000)
efficiency(2000)
efficiency(5000)
efficiency(10000)

이제 서로 다른 레코드 세트에 대해 동일한 것을 테스트하고 그래프를 그려 시간 차이를 밀리초 단위로 확인합니다.



그래프를 보면 .forEach가 모든 입력 크기에 대해 잘 수행되지 않았습니다. 작은 입력 크기(정수 1에서 100까지의 배열)의 경우 for 루프가 다른 두 개보다 더 잘 작동하므로 가장 효과적이었습니다. 입력 크기가 증가함에 따라(정수 배열 1에서 500까지) .map과 for 루프의 차이는 미묘했습니다. 그러나 입력 크기가 증가함에 따라(정수 배열-1000, .. 1-10000) .map은 다른 두 개에 비해 시간이 덜 걸리고 계속해서 그 위치를 버텼습니다. For 루프는 .map 다음으로 두 번째로 효율적입니다.