[Javascript] while문, do while문

2021. 7. 27. 16:32Web/Javascirpt

728x90

while문

while문은 해당 조건에 부합할 경우 코드를 반복하여 실행하는 반복문으로 기본적인 형태는 아래와 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>while문</title>
</head>
<script>
    var 변수 = 초깃값;
    while(조건식) {
        반복할 코드;
        증감식;
    } 
</script>
<body>
</body>
</html>
 
cs

조건식이 참(ture) 인 경우, 반복할 코드를 증감식에 따라 반복하는데요.

반복은 거짓(false) 이 될 때까지 반복하게 됩니다.

 

예제를 살펴보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>while문</title>
</head>
<script>
    var i = 1// var 변수 = 초깃값
    while(i <= 5) { // 조건식
        document.write("반복문 while문" + i + ", "); // 반복할 코드
        i++// 증감식
    } 
</script>
<body>
</body>
</html>
 
cs

변수명은 i 로 설정하고 초깃값을 1 로 주었습니다.

i 가 5 보다 같거나 클 때라는 조건식을 주었고

반복할 코드로는 write 함수를 사용해 "반복문 while문" 과 변수 i, ", " 를 출력하도록 했습니다.

증감식으로는 1++; 로 1씩 증가하도록 했습니다.

 

결과는 이렇습니다.

반복을 통해 변수 i 에 초깃값 1부터 들어가 해당 조건식에 참인 경우일 때까지 반복하다

거짓 조건에 해당되면 멈추게 되어 "반복문 while문5" 에서 반복을 멈춘 형태가 되었습니다.

 

while문과 if문을 활용한 간단한 예제를 하나 더 알아보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>while문</title>
</head>
<script>
    var i = 1;
    while(i <= 10) {
        if(i % 2 == 1) {
            document.write(i, ", ");
        }
        i++;
    }
</script>
<body>
</body>
</html>
 
cs

 

변수 i 가 10 과 같거나 크기 전까지의 숫자 중 홀수를 뽑아내는 건데요.

변수 i 에 초깃값을 1로 설정하고

while 조건문에 조건식으로 i 는 10 과 같거나 클 때로 설정했습니다.

다음으로 if문이 들어가 나머지 연산자 % 로 나머지가 1인 경우인 조건을 달아

해당 조건에 참 인 경우 write 함수로 변수 i 와 ", " 를 출력하도록 했습니다.

결과는 이렇습니다.


do while문

do while문과 while문의 차이점은 조건문을 판단하기 전에

do 영역의 반복할 코드와 증감식을 처리한 뒤 while문으로 이동한다는 점입니다.

 

바로 예제로 넘어가겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>do while문</title>
</head>
<script>
    var i = 3;
    do {
        document.write("do while문" + i + ", ");
        i++;
    } while(i < 2)
</script>
<body>
</body>
</html>
 
cs

while문과 가장 큰 차이점은 변수를 선언한 뒤 do 라는 영역이 생긴 건데요.

먼저 변수 i 에 초깃값을 3 으로 설정하고

do 에서 반복할 코드로 write 함수를 이용해 "do while문" + 변수 i + ", " 를 출력하도록 했습니다.

그 뒤에 while문이 나오는데요.

while문의 조건식은 변수 i 가 2 보다 작을 때로 설정했습니다.

 

결과값을 먼저 볼까요?

 먼저 변수 i 에 3 이 할당됐기 때문에 do 에서 텍스트 "do while문" 과 함께 변수에 3이 들어가

"do while문3, " 이 출력되게 됩니다.

그 뒤의 while문의 조건이 변수 i 가 2 보다 작을 때 반복을 하라는 건데

i 에는 초깃값이 3 으로 설정됐으니 조건은 거짓에 해당되어 반복을 멈춘 겁니다.

 

만약 while문의 조건이 (i < 2) 대신 (i < 5) 라면 5 미만의 변수에 해당될 때까지 반복하게 됩니다.

'Web > Javascirpt' 카테고리의 다른 글

[Javascript] for문 break  (0) 2021.07.27
[Javascript] for문  (0) 2021.07.27
[Javascript] switch문  (0) 2021.07.22
[Javascript] else if문  (0) 2021.07.22
[Javascript] confirm 메소드  (0) 2021.07.22