상품 목록에서 상품을 차례대로 출력하거나 숫자를 1에서 10까지 하나씩 증가시키면서 동일한 코드를 반복 실행해야 하는 경우 반복문을 사용한다.
while
while 문의 문법은 다음과 같다.
while (condition) {
// 코드
// '반복문 본문(body)'이라 불림
}조건이 truthy 이면 반복문 본문의 코드가 실행된다.
아래 반복문은 조건을 만족할 동안 i를 출력한다.
let i = 0;
while (i < 3) { // 0, 1, 2가 출력
alert( i );
i++;
}i++ 가 없었다면 이론적으로 반복문이 영원히 지속되는 무한 루프에 빠지게 될 것이다. 그러나 브라우저와 서버 사이드 자바스크립트는 무한 반복을 멈추게 해 주는 수단을 제공해주고 있어서, 무한 반복 프로세스를 죽일 수 있다.
반복문 조건에는 비교뿐만 아니라 모든 종류의 표현식, 변수가 올 수 있다. 조건은 while 에 의해 평가되고, 평가 후에는 불린값으로 변경된다.
따라서 아래 예시도 가능하다.
let i = 3;
while (i) { // i가 0이 되면 조건이 falsy가 되므로 반복문 종료
alert( i );
i--;
}do while
condition을 반복문 본문 아래로 옮길 수 있다. 본문을 우선 실행하고, 조건을 확인한 후 조건이 truthy 인 동안 본문이 계속 실행된다.
do {
// 반복문 본문
} while (condition);조건이 truthy 인지 아닌지에 상관없이 최소한 한 번은 본문을 실행하고 싶을 때만 사용해야 한다.
for
for 반복문은 while 반복문보다는 복잡하지만 가장 많이 쓰이는 반복문이다.
for (begin; condition; step) {
// ... 반복문 본문 ...
}아래 반복문을 실행하면 i가 0에서 시작해 3이 될 때까지(3은 포함하지 않는다) alert(i) 가 호출된다.
for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력됩니다.
alert(i);
}인라인 변수 선언
변수 i를 반복문 안에서 선언하는 방식을 ‘인라인' 변수 선언이라고 한다. 인라인 변수는 반복문 안에서만 접근할 수 있다.
인라인 변수 선언 대신 정의되어있는 변수를 사용할 수도 있다.
let i = 0;
for (i = 0; i < 3; i++) { // 기존에 정의된 변수 사용
alert(i); // 0, 1, 2
}
alert(i); // 3, 반복문 밖에서 선언한 변수이므로 사용할 수 있음구성 요소 생략
for 문의 구성 요소를 생략하는 것도 가능하다. 단, 구성 요소를 생략하더라도 두 개의 세미콜론을 꼭 넣어주어야 한다.
begin 생략
반복문이 시작될 때 아무것도 할 필요가 없으면 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 (;;) {
// 끊임 없이 본문이 실행됩니다.
}반복문 빠져나오기 - break
원하는 때에 반복문을 빠져나오기 위해 사용한다.
아래 예시의 반복문은 사용자가 입력한 숫자를 계속 더하는데, 사용자가 아무 값도 입력하지 않고 ‘확인’을 누르거나 ‘취소'를 누르면 반복문을 종료한다.
let sum = 0;
while (true) {
let value = +prompt("숫자를 입력하세요.", '');
if (!value) break; // (*)
sum += value;
}
alert( '합계: ' + sum );(*) 라인의 break 는 사용자가 아무것도 입력하지 않고 ‘확인'을 누르거나 ‘취소'를 누르면 반복문이 즉시 중단되고 제어 흐름이 반복문 아래 첫 번째 출로 이동한다.
본문 가운데에서 조건을 확인해야 하는 경우 무한 반복문 + break 조합을 사용하는 것이 좋다.
다음 반복으로 넘어가기 - continue
break 의 가벼운 버전으로, 전체 반복문을 멈추는 것이 아닌 현재 실행 중인 단계를 멈추고 다음 단계를 강제로 실행시키도록 한다.
아래 반복문은 continue 를 사용해 홀수만을 출력한다.
for (let i = 0; i < 10; i++) {
// 조건이 참이라면 남아있는 본문은 실행되지 않습니다.
if (i % 2 == 0) continue;
alert(i); // 1, 3, 5, 7, 9가 차례대로 출력됨
}continue 는 중첩을 줄이는 데 도움이 된다. continue 를 사용하지 않은 코드와 비교했을 때 위 코드에서 중첩을 한 단계 줄일 수 있다는 장점이 있다.
for (let i = 0; i < 10; i++) {
if (i % 2) {
alert( i );
}
}(i > 5) ? alert(i) : *continue* ;
break, continue 와 레이블
여러 개의 중첩 반복문을 한 번에 빠져나와야 하는 경우가 종종 생긴다. 이 때 반복문 앞에 콜론과 함께 쓰이는 식별자인 레이블을 사용한다.
outer: for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
let input = prompt(`(${i},${j})의 값`, '');
// 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면
// 두 반복문 모두를 빠져나온다.
if (!input) break outer; // (*)
// input 이 null 이 아니라면 !를 취했을 때 false 이므로
// 반복문을 계속 진행한다.
}
}
alert('완료!');레이블은 별도의 줄에 써 주는 것도 가능하다.
outer:
for (let i = 0; i < 3; i++) { ... }break 와 continue 는 반복문 안에서만 사용할 수 있고, 레이블은 반드시 break 나 continue 지시자 위에 있어야 한다.
while ) 전위형 증가 연산자 vs 후위형 증가 연산자
-
전위형 증가 연산자를 사용한 경우 → 1, 2, 3, 4 출력
let i = 0; while (++i < 5) alert( i );i를 먼저 증가시키고 새로운 값을 반환하므로
1 < 5 비교후 1 출력
2 < 5 비교후 2 출력 ..
4 < 5 비교후 4 출력
5 < 5 비교 실패 → 반복문 종료
-
후위형 증가 연산자를 사용한 경우 → 1, 2, 3, 4, 5 출력
let i = 0; while (i++ < 5) alert( i );i를 증가시키기는 하지만 기존 값을 반환하므로 비교에는 기존 값이 사용되고, alert 에는 새로운 값이 전달된다.
0 < 5 비교후 1 출력
1 < 5 비교후 2 출력
2 < 5 비교후 3 출력
3 < 5 비교후 4 출력
4 < 5 비교후 5 출력
5 < 5 비교 실패 → 반복문 종료
for ) 전위형 vs 후위형
for 문의 경우 전위형과 후위형 증가 연산자를 사용했을 때 동일한 결과가 반환된다.
for (let i = 0; i < 5; ++i) alert( i );
for (let i = 0; i < 5; i++) alert( i );for 문의 알고리즘은 다음과 같기 때문이다.
- i = 0에서 시작.
- i < 5 비교 후 i 출력
- ++i 또는 i++ 실행 → i가 1 증가한다.
증가 연산 실행 순서와 관계없이 i가 1증가한 후에 다음 단계가 진행되므로 둘 사이 차이가 없다.
