티스토리 뷰

Programming/JavaScript, jQuery

[javascript 7강] 반복문(제어문)

국브 2019. 2. 11. 00:00

 [javascript 7강] 반복문(제어문)



이번글에서는 javascript 제어문중에 반복문에 대해서 알아보겠습니다.

모든 프로그래밍언어에서는 반복문이 있고 비슷하며

개발에 있어 많이 사용하는 문법입니다.

그러니 꼭! 마스터 하시길 권합니다.

반복문에 들어가기전 javascript 기본강의를 링크해 두겠습니다.

모르는 부분이 있으시다면 아래의 링크로 들어가 살펴보세요!


 이전 글 링크 


2019/02/07 - [Programming/JavaScript, jQuery] - [javascript 1강] 자바스크립트 개요 및 개발환경설정


2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 2강] 입출력 및 기본문법


2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 3강] 변수와 자료형


2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 5강] 배열


2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 4강] 연산자


2019/02/11 - [Programming/JavaScript, jQuery] - [javascript 6강] 조건문(제어문)




 for 문


반복문중에 가장많이 사용하는 문법입니다.

반복문은 하나의 값을 반복적으로 사칙연산하거나..

list 의 값중 중간부분을 삭제 및 추가 하기위해 사용되며..

또다른 많은 부분에서 사용됩니다.

그중 for 문을 많이 사용하며.. 사용법이 쉽습니다.


 사용방법 및 문법 


for(초기값; 조건식; 변환식){


조건식이 true 인 경우 실행


}

 


 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            for(var i=1; i<10; i++){
                
                console.log("3X" + i + "=" + i*3);
                
            }
 
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


for 문의 괄호 안에 조건식을 풀어보면.. 

변수 i =1 이고 i 가 10보다 작을때까지 반복문은 실행되며 i 는 1씩 증가하는 for 문입니다.

for 문의 실행문에서는 console.log("3X" + i + "=" + i*3); 반복적으로 실행됩니다.

i 가 10보다 작을때 까지.. 즉 총 9번 실행되는 것입니다.

9번 실행되며 출력된 결과는 위의 이미지와 같습니다.





 for in 문


자바스크립트에서는 for in 문이라고 하며..

가끔씩은 향상된 for 문이라고도 합니다.

기본 for 문을 사용하기 변하게 향상된 버전입니다.


 사용방법 및 문법 


for(초기값 in 배열) {


배열의 인텍스 0 부터 순차적으로 접근


}

 


 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            var list = [1,2,3,4];
        
            for(index in list){
                
                console.log(list[index]);
                
            }
 
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 


 

변수 list 트에 1,2,3,4 의 값을 갖고있는 list 객체를 만들어 주었습니다.

다음 for 문 for(index in list) 이라고 만들어 주었습니다. 뜻을 풀어 적으면..

변수 list 의 길이만큼 for 문이 반복적으로 실행되며.. 실행될때 index 라는 변수를 통해 list 의 인덱스 값을 알수 있습니다.

console.log(list[index]); 에서 list[0], list[1], list[2], list[3] 순차적으로 접근할것입니다.

그래서 1, 2, 3, 4 라고 출력되는것을 확인할수 있습니다.




 while, do while 문


while 문은 for 문과 기능면에서는 똑같은 반복문입니다.

for 문과 다른점은 조건식만 들어간다는 점이며..

무한반복문을 만들때 쉽게만들수 있으며.. 조건식에 true 의 값을 넣어주면 무한반복문이 됩니다.


do while 문은 다른 반복문들과 다르게 최초 한번은 무조껀 실행을 합니다.

한번 실행후 조건식을 반나 실행여부를 물어봅니다.


 사용방법 및 문법 


1. while 문


while(조건식) {


조건식이 true 인 경우 반복 실행


} 


2. do while 문


do { 

최초 한번 실행후.. 조건식이 true 이면 실행

} while (조건식)



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            var i = 1;
        
            while(i < 10){
                console.log("3X" + i + "=" + i*3);
                i++;
            }
            
            do{
                console.log("do 반복문 실행");
            }while(i < 10)
 
                
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


while 반복문을 통해 위에서 for 문으로 3단을 구현한 것과 동일한 기능을 구현하였습니다.

i 라는 변수를 미리 만들고 1을 할당해 주었고..

while 문의 조건문에 i<10 라고 적어 주었습니다.

그다음 while 문의 실행문에 console.log("3X" + i + "=" + i*3); 넣어 위와같이 출력될수 있도록 만들어주었고..

i라는 변수의 값을 1씩 증가 시킬수 있도록 i++; 적어주었습니다.

그결과 9번의 반복문이 실행되어 구구단의 3단의 출력결과를 얻을수 있습니다.


다음 do while 문을 통해 또다시 반복문을 돌려보았습니다.

실행문에는 console.log("do 반복문 실행"); 넣어주었고.

while 문에는 i<10 이라는 조건문을 적어주었습니다.

그결과 1번만 실행된것을 확인할수 있습니다.

do 문으로 인해 무조껀 한번 실행되고.. 다음 while 의 조건문 i<10 만나 조건이 false 이기때문에 조건문을 나오게 됩니다.

(위의 while 문으로 인해 i의 값은 10입니다. 그렇기 때문에 i<10 의 조건문은 false 입니다.) 





 continue, break


countinue 는 반복문에서 사용됩니다. 

반복문에서 countinue 를 만나면 countinue 이하의 내용은 실행하지 않고 다음 반복문을 실행합니다.


break 는 반복문에서 사용되며..

반복문에서 break 를 만나면 반복문을 빠져 나옵니다.


둘의 개념이 많이 햇갈리기때문에 꼭! 비교해서 알아두세요.


 사용방법 및 문법 


continue, break는 반복문 실행구문에 넣어 사용.

 


 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            //3의 배수를 찾아 9번쨰 까지만 만들어 출력
            for(var i = 1; i < 100; i++){
                
                if(i%3 != 0){
                    continue;
                } 
                
                console.log(i);
                
                if(i == 27){
                    break;
                }
            }
 
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 



for 문과 if 문을 활용하여 continue 와 break 를 사용해보았습니다.

for 문의 변수 i 를 1로 할당하고.. 조건문은 i<100 이라고 주었습니다. 즉 99번 돌아가는 반복문 입니다. 

그리고 i는 1씩 증가 하도록 i++ 이라고 작성해 주었습니다. 

그다음 for 문의 실행문에 두개의 조건문과 출력문을 적어주었습니다.

if(i%3 != 0) 이라는 조건문이 true 이면 continue 를 실행하도록 조건문을 넣어주고..

(즉 3의 배수가 아니면 continue 가 실행됨.)

그밑에 console.log(i); 현재 i의 값을 출력하도록 출력물을 적어주고..

if(i == 27) 이라는 조건문이 true 이면 break 를 실행하도록 조건문을 넣어주었습니다.

(즉 i 가 27이면 반복문은 정지됩니다.)

그결과 위와같이 구구단 3단의 값만 출력하고 정지하는 반복문을 만들수 있습니다.




 글을 마치며..


이번글을 통해 javascript 반복문에 대해서 알아보았습니다.

반복문은 많이 사용되기때문에 이해가 안되시면 다시한번 보시길 권합니다.

모두 수고하세요!


도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 



저작자표시 비영리 변경금지

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[javascript 9강] 함수 심화  (0) 2019.02.12
[javascript 8강] 함수  (0) 2019.02.12
[javascript 6강] 조건문(제어문)  (0) 2019.02.11
[javascript 5강] 배열  (0) 2019.02.10
[javascript 4강] 연산자  (0) 2019.02.10
댓글