[JavaScript] 배열에 사용하는 반복문과 배열 메소드 비교하기

배열에 적용하여 쓸 수 있는 반복문과 배열 메소드를 대략 살펴보면 for문, while문 그리고 map, forEach가 있다.

이게 전부는 아니지만 자주 쓰이므로 각각의 차이에 대해 정리할 필요가 있다고 생각한다.

 

1. 반복문

---

우선 어느 프로그래밍 언어든 처음 배울 때 나오는 핵심 내용, 바로 반복문이다. 큰 맥락으로 구분해보면 for문, while문이 있다. do...while 같은건 어차피 while이랑 모양이 비슷하니 for와 while 두개로 크게 나눈다고 가정한다.

 

예를 들어 1부터 10까지 담긴 배열 numArr이 있다고 하자.

 

const numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

 

반복문을 사용하여 이 배열 안에 있는 원소를 하나씩 출력하는 케이스를 만든다면 어떻게 할 수 있을까?

 

for문을 사용한다고 하면

 

for (let i = 0; i < numArr.length; i++) {
    console.log(numArr[i]);
}

 

이렇게 시도했을 때 i가 0부터 시작해서 1씩 증가하며 numArr의 길이만큼(조건식이 true일 동안) numArr의 i번째 원소를 출력해준다.

 

while문을 사용하면 어떻게 될까?

 

let i = 0;
while (i < numArr.length) {
    console.log(numArr[i]);
    i++;
}

 

기준을 잡아주는 값을 하나 선언해주고, 조건식이 참일 때까지 while 루프는 numArr의 i번째 원소를 출력하는데, i번째 원소 하나가 출력되면 i에 1이 증가하면서 다음 인덱스를 찾아 출력한다.

 

for문과 while문은 조건식이 참일 때까지 반복 루프를 계속 순환하며 조건식이 거짓이 되면 멈춘다. 조건식이 참이더라도 반복을 종료하기 위해서는 반복 루프 안에 특정 조건을 if문으로 걸어주고 if 조건이 참일 때 반복을 중지하도록 break를 사용해야 한다.

 

 

2. 배열 메소드

---

배열 메소드는 종류로 따졌을 때 여러개가 있을 수 있지만(?) 자주 쓰이는 forEach와 map에 대해서만 정리한다.

 

"반복문과 어떤 차이가 있는가?" 라고 한다면, break를 쓸 수 없다. 즉 모든 배열에 대한 요소를 순회한다.

 

두개의 배열 메소드를 어떻게 사용하는지 살펴보면 우선 forEach의 경우

 

const numArr = [1, 2, 3, 4, 5];
numArr.forEach(num => num ** 2);

 

위와 같이 사용할 수 있는데, numArr이라는 배열의 개별 원소(num)에 대해 제곱 연산을 시켜주는 것이다.

 

map의 경우는

 

numArr.map(num => num ** 2);

 

위와 같이 사용하며, forEach와 별반 다를바가 없어보인다..

 

그렇다면 둘의 차이는 무엇일까? 생긴건 비슷해도 분명 차이점이 존재할 것이다.

 

둘의 차이점을 알아보기 위해 브라우저 콘솔에서 예시로 작성한 배열을 선언해주고 forEach와 map 각각 동일한 연산을 하게 해보았다.

 

forEach와 map 비교

 

비슷하지만 다른점이 있을 것이라 추측했으나, 역시 다른 점이 있었다.

 

forEach는 실행했을 때 아무 결과도 보여주지 않지만(undefined), map은 연산 결과가 담긴 배열을 리턴해주었다.

 

forEach는 아무래도 연산 결과에 대해 리턴해주지 않으므로 새로운 빈 배열을 선언하여 그 배열 안에 연산 결과를 넣어주는 작업을 해야 할 것 같다.

 

forEach 연산결과를 새 배열에 넣어주기

 

귀찮은 절차를 하나 더 거쳐야 해서 그닥 내키지는 않는다...

 

다만 배열 메소드는 그냥 반복문을 쓸때보다 속도가 빠르다고 하는데 실제로는 어떨까?

 

3. 연산 속도는?

---

for, while 반복문과 map, forEach 배열 메소드의 연산 속도를 측정해보려고 한다.

 

측정시간은 Date 객체를 처음에 생성해두고, 테스트를 진행하고 나서 새로운 Date 객체를 생성한다. 그리고 두 Date의 차이를 구해 1000으로 나눠 밀리세컨드 단위로 비교할 것이다. 테스트 환경은 크롬 브라우저의 콘솔이다.

 

1부터 10,000,000까지 배열에 채워놓고, 시간 측정 시작, 루프 반복, 시간 측정 종료 후 두 시간의 차이를 구한 것이다.

 

우선 for문부터 보면

 

1부터 10,000,000까지 배열에 채워두고 for문을 사용하여 str변수에 배열의 i번째를 더하는 케이스

 

약 3.133ms 정도가 소요되었다고 나온다.

 

while문은 어떨까?

 

1부터 10,000,000까지 배열에 채워두고 while문을 사용하여 str변수에 배열의 i번째를 더하는 케이스

 

약 1.113ms라고 한다. for문보다 현저하게 빠른 속도를 보여주었다.

 

이제 배열 메소드의 연산결과를 살펴보자.

 

1부터 10,000,000까지 배열에 채워두고 forEach 메소드를 사용하여 str변수에 배열의 개별 원소를 더하는 케이스

 

확실이 for보다는 forEach를 썼을 때 연산 속도가 현저하게 빠르다는 것을 알 수 있다.

 

map을 썼을 때는

 

1부터 10,000,000까지 배열에 채워두고 map 메소드를 사용하여 str변수에 배열의 개별 원소를 더하는 케이스

 

훨씬 더 빨랐다.. 물론 이 결과를 100% 맹신할 수는 없다. 테스트 횟수가 현저하게 적기 때문에 무조건적으로 신뢰할 수는 없으나 확실히 for만을 놓고 비교했을 때는 forEach나 map이 for보다 훨씬 빠르다는 사실을 직감할 수는 있다.

 

 

 

 

 

 

 

 

 

https://fromnowwon.tistory.com/entry/forEach-map

[Javascript] 반복문 for, forEach, map 차이점

 

https://webclub.tistory.com/166

반복문(for문, while문, do-while문)

 

https://blog.naver.com/wideeyed/221877912230

[JavaScript] for vs. forEach vs. map

 

https://3colored.tistory.com/5

반복문 속도 비교 (while, for, iterator)

 

https://gurtn.tistory.com/121

[JS] 반복문 (for, forEach 등) 속도 비교