[새싹x코딩온] 웹 개발자 부트캠프 과정 3주차 회고 | 어떤 반복문을 쓰는게 좋을까? (for, for of, forEach)

1. 들어가며

• JavaScript에서 반복문으로 사용되는 for문, for of문, forEach 메서드를 배웠다. 이들의 차이점은 무엇이고 어떤 반복문을 쓰면 좋을지 생각해보았다. 

2. 반복문

반복문

프로그래밍 언어에서 반복문은 특정 코드를 반복할 때 사용한다.

예를 들어 1~100까지 수를 적어야 한다고 할때

console.log(1)
console.log(2)
console.log(3)




console.log(100)

위와 같이 일일히 적을 수도 있겠지만 그러면 작업시간이 너무 느려지고 무엇보다 비효율적이다.

반복문을 사용하면 이 작업을 훨씬 단축시킬 수 있다.

for(let i = 1; i <= 100; i++){
 console.log(i)
}

 

for문을  흐름을 표현하자면 아래 그림과 같다.

이미지 출처 : 코딩온 강의 자료

 

 

배열에서의 반복

배열 요소를 순회하며 코드를 반복하기 위한 반복문도 있다 

하나는 forEach() 메서드고 하나는 for of 문이다.

아래 예시를 살펴보자

아래와 같은 배열이 있다.

let fruits = ["사과", "딸기", "포도", "배", "바나나", "망고", "용과", "복숭아"]

원하는 결과는 아래와 같다.

 

1) for문을 사용한 배열 요소 출력

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

2) for of 문을 사용한 배열 요소 출력

for(let fruit of fruits){
 console.log(fruit)
}

for of문은 배열을 순회하며 코드를 반복한다.

for of문 배열을 포함하여 반복 가능한 객체를 순회하며 코드를 반복한다.

 

( ※ 순회가 가능한 자료구조를 이터러블 이라고 하며, 종류로는 Array, String, Map, Set 등이 있다고 한다.

for of 문은 이터러블한 객체의 순회를 도와주는 반복문이며, 이터러블 하지 않은 일반 객체에는 for of문을

사용할 수 없다. 일반 객체를 반복하고 싶다면 for in문을 쓰면 된다. 본 포스팅에서는 다루지 않았다. )

 

3) forEach() 메서드를 사용 배열 요소 출력

fruits.forEach(item => console.log(item))

forEach()은 for문 과는 다르게 반복을 위한 변수를 선언하지 않아도 되며(대신 함수내에 전달변수를 사용한다.),

조건식과 증감식도 써주지 않아도 된다.

배열 자체를 순회하며 코드를 반복하기 때문이다.

forEach는 기본적으론 아래와 같이 표현한다.

배열.forEach(function(item, index, arr){코드}

for문, for of문 과는 다르게 forEach() 메서드는 반복문이 아니라 배열 메서드다.

forEach()메서드 내에 함수를 작성한다.

첫번째 전달변수는 배열값, 두번째 전달변수는 배열의 순번, 세번째 전달변수는 호출한 배열이다.

화살표 함수로도 표현할 수 있으며, 두번째 전달변수와 세번째 전달변수는 경우에 따라 생략이 가능하다.

 

속도 확인

반복만 하면 되는건데 왜 굳이 개발자들은 for 문, for of문, forEach() 메서드를 나눠서 만들어내고 사용할까?

책에서 forEach 메서드는 for문에 비해 성능이 좋지는 않지만 가독성이 더 좋다는 문구를 보았다.

그래서 시간이 많이 걸리는 복잡한 코드 또는 높은 성능이 필요한 경우는 for문을 사용하고 그렇지 않은 경우는 가독성을 위해 forEach 메서드를 권장한다고 한다.

 

그래서 한 번 속도를 실험해보았다.

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

위와 같이 배열을 만들어내는 코드를 작성해보았다.

 

const start = new Date()
- 실행코드 -
console.log((new Date() -  start) / 1000);

위와 같이 속도를 구할 수 있는 코드를 작성했다. (https://gurtn.tistory.com/121 이 블로그에서 코드를 참고했다.)

코드 실행 전 시간과 코드 실행 후 시간을 비교하여 실행 시간을 구하는 식이다.

 

1부터 n까지의 합을 구하는 연산을 하고 n의 숫자를 늘리면서 처리에 걸리는 시간을 구해볼 생각이다.

 

// for 문
let sumFor = 0;
for(let i = 1; i <= arr.length;i++){
 sumFor += i
}
console.log("for문",sumFor)

// for of 문
let sumForOf = 0;
for(let x of arr){
 sumForOf += x
}
console.log("for of문",sumForOf)

// forEach 메서드
let sumForEach = 0;
arr.forEach(val => sumForEach += val)
console.log("forEach",sumForEach);

 

 

1) n = 100 일때

 

계산이 간단해서 그런가 별 차이가 없었다.

그래서 n의 숫자를 엄청 늘리기로 했다

2) n = 100000 일때

이때부터 뭔가 차이가 있어보인다. 미세하지만  for문이 속도면에서 제일 빨랐다.

3) n = 10000000 일때

 

4) n = 100000000 일때

 

뭔가 야매(?)스럽지만 다른 블로그나 책에서 말한것처럼 코드가 길어지고 연산이 더 길어질수록 for문의 속도가 제일 빠르다는 것을 확인했다.

 

 

for문과 forEach 메서드 비교

1) 가독성

속도면에서 for문이 제일 좋은데도 사람들은 for of 문이나 forEach메서드의 사용을 권장하기도 한다.

forEach를 사용하면 어떤 배열을 사용하는지 바로 알 수 있고, 한계값, 증감식등을 설정하지 않기 때문에 코드가 더 깔끔해보이며 가독성이 좋다.

 

2) 배열 조작

또한 for문은 원본 배열을 변경할 수 있는데 반해, forEach 메서드는 원본 배열을 변경하지 않는다.

이것은 장점이자 단점이 될수도 있다고 생각한다.

장점으로는 배열의 변경으로 인한 혹시라도 생길 오류를 줄일 수 있을 것 같다.

하지만 단점으로는 배열을 추가할 수 없기 때문에 배열을 추가해야할 방법으로는 적합하지 않다.

 

3) 배열 탐색

for문의 경우 변수의 시작값, 한계값, 증감식을 바꾸는 식으로 역순으로 접근할 수 있다. 예시를 살펴보자

let fruits = ["사과", "딸기", "포도", "배", "바나나", "망고", "용과", "복숭아"]

위와 같은 배열을 순서대로 출력하기 위해서 아래와 같은 코드를 사용했다. 

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

 

역순으로 출력하고자 하면 아래와 같이 변경해주면 된다.

for(let i = fruits.length-1; i > 0 ; i--){
 console.log(fruits[i])
}

그러면 아래와 같이 역순으로 출력된다.

 

forEach는 배열의 아이템을 순서대로 접근하기 때문에 역순으로는 탐색할 수 없다. 

(굳이 역순으로 탐색하고 싶으면 배열 메서드 중에 reverse()를 사용해서 배열을 역순으로 배치한 다음에 사용할 수도??)

또한 forEach는 break, continue 문을 사용할 수 없어서 배열의 특정 요소만 빼거나 배열 중간에 중단할 수 없다.

 

4) 오류

for문은 한계값과 증감식을 개발자가 잘못 설정해주면 무한루프에 빠지는 일이 발생하여 오류에 빠지기 쉽다.

하지만 forEach는 배열내에서 순회하기 때문에 무한루프에 빠질 일이 없다.

 

 

3. 마치며

반복문을 배우면서 부족하지만 각각의 반복문의 차이점을 살펴보았다.
처음에 반복문을 배울때 그냥 forEach문이 조건을 설정안해줘도 되고 편해서 더 좋은거 아닌가? 싶었는데

차이점을 살펴보니 각각 알맞은 상황에 써야 좋은 개발자가 될 수 있다는 것을 실감했다.

(예를 들어 로직이 복잡해서 연산시간이 빨라야 하는 경우에는 for문이 적합 할 수 있다.

 또 반복하는 도중에 중간에 값을 스킵한다던지 중단해야 할떄는 break와 continue 키워드를 쓸 수 있는 for문이 적합할 수 있다.)

개발에 정답이 없다고는 하지만 더 좋은 코드를 짜기 위해 각각의 차이점을 숙지하고 알맞게 활용해야겠다.

 

4. Reference

1. 코딩온 강의 자료

 

2. 모던 자바스크립트 Deep Dive

http://product.kyobobook.co.kr/detail/S000001766445?LINK=NVB&NaPm=ct%3Dlwt20us8%7Cci%3D3eeae87413d188962c2189bfc03af972cec288fd%7Ctr%3Dboksl1%7Csn%3D5342564%7Chk%3D0a86971807241e21311b2f82ad997d61e4c24ab4

모던 자바스크립트 Deep Dive | 이웅모 - 교보문고

 

3. https://n-log.tistory.com/39

[JS] forEach, for in, for of의 차이

 

4. https://bum-developer.tistory.com/entry/JavaScript-for%EB%AC%B8%EA%B3%BC-forEach%EB%AC%B8-%EC%B0%A8%EC%9D%B4

[JavaScript] for문과 forEach문 차이

 

5. https://html-jc.tistory.com/648

[JS] for vs forEach

 

6. https://velog.io/@zuyonze/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9D%98%EB%AC%B8-glk00t4bxk

자바스크립트 성능 최적화에 대한 의문이 들었다

7. https://poiemaweb.com/es6-iteration-for-of

Iteration & for...of | PoiemaWeb

 

8. https://velog.io/@ttoottie/JS-for-forEach-for...of-%EC%84%B1%EB%8A%A5%EB%B9%84%EA%B5%90

[JS] for, forEach, for...of 성능비교

 

9. https://gurtn.tistory.com/121

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