while과 for 반복문

while 반복문

while 반복문의 문법은 다음과 같습니다.

while (condition) {
  // 코드
  // '반복문 본문(body)'이라 불림
}

condition(조건)이 truthy 이면 반복문 본문의 코드가 실행됩니다.
아래 반복문은 조건 i < 3을 만족할 동안 i를 출력해줍니다.

let i = 0;
while (i < 3) { // 0, 1, 2가 출력됩니다.
  alert( i );
  i++;
}

내가 공부한 내용을 덧 붙이면 for문과 다르게 while문은 초기값을 밖에 선언한다.
그렇기에 let i라는 변수에 0을 대입하고 i는 0이기에 0, 1, 2/ 3보단 작다하였으므로 0,1,2 값을 출력합니다.

반복문 본문이 한 번 실행되는 것을 반복(iteration, 이터레이션)이라고 부릅니다. 위 예시에선 반복문이 세 번의 이터레이션을 만듭니다.

i++가 없었다면 이론적으로 반복문이 영원히 반복되었을 겁니다. 그런데 브라우저는 이런 무한 반복을 멈추게 해주는 실질적인 수단을 제공합니다. 서버 사이드 자바스크립트도 이런 수단을 제공해 주므로 무한으로 반복되는 프로세스를 죽일 수 있습니다.

반복문 조건엔 비교뿐만 아니라 모든 종류의 표현식, 변수가 올 수 있습니다.
조건은 while에 의해 평가되고, 평가 후엔 불린 값으로 변경됩니다.

아래 예시에선 while(i != 0)을 짧게 줄여 while(i)로 만들어보았습니다.

let i = 3;
while (i) { // i가 0이 되면 조건이 falsy가 되므로 반복문이 멈춥니다.
  alert( i );
  i--;
}

do while은 생략

for 반복문

for 반복문은 while 반복문보다는 복잡하지만 가장 많이 쓰이는 반복문입니다.

문법은 아래와 같습니다.

for (begin; condition; step) {
  // ... 반복문 본문 ...
}

for문을 구성하는 각 요소가 무엇을 의미하는지 알아봅시다.
아래 반복문을 실행하면 i가 0부터 3이 될 때까지 (단, 3은 포함하지 않음) alert(i)가 호출됩니다.

for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력됩니다.
  alert(i);
}

구성 요소

begin (i = 0) : 반복문에 진입할 때 단 한 번 실행됩니다. (초기값)
condition (i < 3) : 반복마다 해당 조건이 확인됩니다. false이면 반복문을 멈춥니다.(한번 조건이 실행되면 다시 돌아와서 조건이 또 부합하는지 확인)
body (alert(i)) : condition(조건)이 truthy(참, 사실)일 동안 계속해서 실행됩니다.
step (i++) : 각 반복의 body가 실행된 이후에 실행됩니다.

begin이 한 차례 실행된 이후에, condition 확인과 body, step이 계속해서 반복 실행되죠.

// for (let i = 0; i < 3; i++) alert(i)

// begin을 실행함
let i = 0
// condition이 truthy이면 → body를 실행한 후, step을 실행함
if (i < 3) { alert(i); i++ }
// condition이 truthy이면 → body를 실행한 후, step을 실행함
if (i < 3) { alert(i); i++ }
// condition이 truthy이면 → body를 실행한 후, step을 실행함
if (i < 3) { alert(i); i++ }
// i == 3이므로 반복문 종료

인라인 변수 선언

지금까진 카운터 변수 i를 반복문 안에서 선언하였습니다.
이런 방식을 인라인 변수 선언이라고 부릅니다.
이렇게 선언한 변수는 반복문 안에서만 접근할 수 있습니다.

for (let i = 0; i < 3; i++) {
  alert(i); // 0, 1, 2
}
alert(i); // Error: i is not defined

인라인 변수 선언 대신, 정의 되어있는 변수를 사용할 수도 있습니다.

let i = 0;

for (i = 0; i < 3; i++) { // 기존에 정의된 변수 사용
  alert(i); // 0, 1, 2
}

alert(i); // 3, 반복문 밖에서 선언한 변수이므로 사용할 수 있음

구성 요소 생략하기

for문의 구성 요소를 생략하는 것도 가능합니다.
반복문이 시작될 때 아무것도 할 필요가 없으면 begin을 생략하는 것이 가능하죠.

예시입니다.

let i = 0; // i를 선언하고 값도 할당하였습니다.

for (; i < 3; i++) { // 'begin'이 필요하지 않기 때문에 생략하였습니다.
  alert( i ); // 0, 1, 2
}

step 역시 생략할 수 있습니다.

let i = 0;

for (; i < 3;) {
  alert( i++ );
}

위와 같이 for문을 구성하면 while(i < 3)과 동일해집니다.
모든 구성 요소를 생략할 수도 있는데, 이렇게 되면 무한 반복문이 만들어집니다.

for (;;) {
  // 끊임 없이 본문이 실행됩니다.
}

for문의 구성요소를 생략할 때 주의할 점은 두 개의 ; 세미콜론을 꼭 넣어주어야 한다는 점입니다. 하나라도 없으면 문법 에러가 발생합니다.