[JavaScript] 반복문 (for/while문)

 

왜 다들 i라고 짓는 걸까요

반복문이란?

이름 그대로 "반복"하는 문文statement으로, 일전에 사용했던 조건문과 같은 계열이다. 같은 작업을 반복할 때 쓸 수 있으며, 하나의 코드를 각각 다른 값value으로 실행시킬 때도 사용할 수 있어 프로그래밍하는데 있어 매우 유용하다. 반복문에는 다양한 종류가 있는데, 모든 반복문은 어떤 것을 반복적으로 시행하기 위해 사용한다는 공통점을 가지고 있다. 오늘은 보편적으로 사용되는 반복문 몇 가지의 구조와 사용법에 대해 알아보자.

 

 

---

반복문의 구성 요소

반복문은 종류에 따라 다음 세 가지 기능 중 하나 이상을 가지고 있으며, 해당 기능들을 기본으로 작동한다.

 

1. 카운터counter: 어떤 값으로 초기화되는 지점으로, 반복문 카운터의 초기값(시작값)을 설정해 '어디서부터' 시작할 지 정한다.
2. 조건condition: 반복문을 반복하게 하는 조건을 제시하는 곳으로, 참true/거짓false값을 돌려준다. 조건문의 해당 값의 boolean값 여부에 따라 '언제까지' 반복할 지 설정한다. 반복문은 보통 조건이 더 이상 true가 아닐 때까지 반복한다.
3. 반복자iterator: 조건이 true가 아닐 때까지 반복시킬 때 카운터를 증가시키는 기능이다. 앞서 언급한 조건을 참고해 작성해야하며, 이를 통해 해당 조건에 도달하기까지  '얼마나 반복할 지' 정할 수 있다. 

---

for 반복문

 

for 반복문은 세 가지 수식expression을 작성했을 때 구조가 성립하는데, 이를 각각 [초기문initialization], [조건문condition], [증감문final-expression]이라고 한다. 

 

1. 초기문(또는 초기화)은 보통 반복문 카운터의 초기값(시작값)을 설정할 수 있다. 이는 복잡한 구문이 될 수도 있고, 변수로 선언 되기도 한다. 
2. 조건문은 이전에 사용했던 조건식과 같은 방식을 사용한다. 만약 해당 조건문이 참true이라면 블럭문{...}안의 내용을 실행하고 조건문이 거짓false이라면 for문은 더 이상 실행되지 않는다. 
3. 블럭문{...}안의 코드 또는 문장 (보통 1줄)을 실행한다.
4. 증감문이 있다면, 블럭문{...}의 코드가 끝난 후 카운터를 갱신한다. 

만약 누군가 1부터 10까지의 수의 합을 구하고 그 과정을 보고 싶다고 해보자. 1+2+...+10을 적으며 하나하나의 값을 모두 더해줄 수 있겠지만, 그 과정을 컴퓨터로 표현한다면 어떨까. 배웠던 반복문을 쓰면 조금 더 편할 것 같다.

 

먼저 수의 합을 순차적으로 저장할 변수 sum을 선언하고 할당한 후, 함수 기능을 활용해 코드를 실행하긴 이름을 작명했다. 이후 함수의 블럭문 안에 for문을 구조대로 초기문, 조건문, 증감문 순으로 만들었다. 증감문의 경우 1씩 증가한다는 코드를 간략화한 ++ 연산자를 활용했고, sum도 코드가 반복될 때마다 누적될 수 있게 기존의 sum값에서 i만큼 증가할 수 있게 설정했다.

 

반복되는 과정은 다음과 같다. (function 호출 시점)

 

1. 초기문에 따라 i = 1, 선언이 완료됬으므로 이후 반복문에서는 더 이상 초기문을 사용하지 않음
2. 조건문을 확인, 현재 값은 참 (i = 1 < 11은 참)
3. 블럭문안의 코드를 확인, sum은 0 이므로 해당 sum값에 i(1)를 더한 후 콘솔 창에 sum값(1)을 출력
4. 증감문이 있으므로 i를 1만큼 상승
5. 조건문이 참일 때까지 2,3,4 과정을 반복
6. i 값이 11이 되었을 때, 조건문이 거짓(11 < 11은 거짓)이 됨으로 for문을 실행중지

콘솔창에서의 실행값

---

while 반복문

while문은 for문과 상당히 유사하지만, 사용하는 구조가 다르다. 

먼저 앞서 언급했듯 반복문은 카운터,조건,반복자 (초기문,조건문,증감문)의 기능을 가지고 있을 수 있다. 그리고 while문도 세 가지 기능을 활용하고 있다. 기존의 for문이 세 기능을 하나의 괄호 안에 넣어 직관적인 반면 while문은 세 기능을 각기 다른 곳에 배치했는데, 반복문의 구조를 이해하는데 있어 while문이 조금 더 편하다고 생각한다.

앞서 언급했던 예시(1부터 10까지의 합)를 while문으로 만들어보자.

전체적인 구조는 for문과 유사하다

while문이 반복되는 과정은 다음과 같다.

 

1. while문 반복 전에 합을 누적하기 위한 값 변수 sum의 선언과 할당.
2. 초기문과 마찬가지로 i라는 변수를 선언, 1이라는 값을 할당 (이후 함수 호출)
3. while문 시작 전 조건식을 확인: 현재 값은 참 (i = 1 < 11은 참)
4. 블럭문안의 코드를 확인, sum은 0 이므로 해당 sum값에 i(1)를 더한 후 콘솔 창에 sum값(1)을 출력
5. 증감문이 있으므로 i를 1만큼 상승
6. 조건문이 참일 때까지 3,4,5 과정을 반복
7. i 값이 11이 되었을 때, 조건문이 거짓(11 < 11은 거짓)이 됨으로 while문을 종료

for문과 같은 결과값이 출력된다

---

for문 vs. while문 (break문)

for문과 while문은 상당히 유사하다. 그렇다면 차이가 무엇일까? 언제 for문을 쓰고 while문을 써야할까?

먼저 for문의 경우 구하고자 하는 값을 알아 '몇 번 반복해야하는 지'를 알 경우에 사용하는 게 좋고,구하고자 하는 값을 정확히 몰라 특정 '조건'에 도달하면 반복을 멈춰야할 경우 while문을 사용하는 게 좋다. 이를 활용하기 위해서 while문에서는 break문을 활용해 반복문을 종료할 수 있다.

 

더 자세한 설명을 위해 다른 예시를 살펴보자. 앞선 경우와 다르게, 매번 3씩 반복해서 합을 구하는 작업을 해야 하는데, 합이 100을 넘으면 멈춰야하는 기능을 구현하고 싶다. 먼저 while문을 활용해 코드를 만들어 보았다.

해당 구조를 활용하면 sum이란 변수는 0부터 시작해 3씩 반복해서 더할 것이고, 그 값이 100 미만일 때(조건식이 참일 때)까지만 반복한다. 이를 통해 우리는 몇 번 반복해야하는지 몰라도 sum값이 100 이전에 도달될 때까지 그 값을 반복해서 더할 수 있다.

약간의 편의성을 위해 기존 코드를 변경했다(sum값이 마지막에 한번만 출력)

문제가 생겼다. 기존 목표는 sum값이 "100 미만," 즉 100 직전(99)에서 멈추길 원했는데, 의도와 다르게 코드는 102가 될 때까지 실행됐다. 잠시 논리구조를 생각해보자.

 

1. sum=0에서 출발, 3씩 반복해서 더한다.
2. 몇 번 반복했는지는 모르지만, sum값이 99일 때, 기존의 조건식은 참(99<100)이므로 해당 코드를 한 번 더 실행한다.
3. sum값이 102가 되었으므로, 조건식이 거짓(102 > 100)이 되었으므로 반복문을 종료한다.

논리 구조에 문제가 있었다. 해당 문제를 해결할 가장 간단한 방법은 조건식을 (sum < 99)로 바꾸면 될 것이다.

하지만 이보다 더 복잡한 수식을 사용해야 한다면 어떨까? 임의의 숫자를 계속 더한다고 했을 때 합이 50을 넘으면 멈추고 싶다면? 이런 상황에서 사용하면 유용한 것이 바로 break문이다.

 

break문이란 반복문이 모든 반복이 완료되기 전에 반복문을 '강제로' 종료하는 기능이다.

 

이를 활용하면 이전의 상황에서 다른 해결책을 제시할 수 있다.

조건문은 다른 문 안에 넣을 수 있다는 사실을 활용해 while문 안에 if문을 추가했다. 그리고 이전에 말한 것 처럼 sum이 반복될 수 있는 환경을 제공한 뒤 목표하는 값(50을 넘는 수)에 도달할 경우 반복문을 종료하기 위해 break문을 활용했다. break문은 sum이란 변수가 50을 넘은 순간 조건문 if에 따라 기능, while문은 sum이 100을 넘기 전에 50을 넘었으므로 break문에 따라 조기 종료되었다. 이처럼 좀 더 복잡한 수식과 복잡한 조건에 따라 목표값에 도달하기까지 반복 횟숫를 정확히 모를 때 while문과 break문을 적절히 활용하면 된다. 

 

개인적으로 for문이 가독성이 더 좋고 다른 개발자가 읽어도 이전 개발자의 의도를 이해하기 비교적 수월하다고 생각한다. 목표값 도달을 위한 반복 횟수를 알 수 있다면 for문을 활용하자.

---

그림처럼 많지는 않다(아마도)

반복문은 for문과 while문만 있는 게 아니다. do...while 문, for...in 문, for...of 문 등 다양한 반복문이 상황에 맞게 사용될 수 있으니 더 자세한 건 MDN 문서를 통해 확인해보자.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration