자바 스크립트(JavaScript) 기초 문법 - 제어문(반복문)

자바 스크립트(JavaScript) 기초 문법

제어문

제어문은 프로그램의 흐름을 제어하는 문장이다. 제어문에는 조건문, 반복문이 있다.

 

반복문

코드를 지정한 횟수만큼 반복해서 실행시킬 수 있다.

 

1) while문

while문은 조건식을 만족할 때까지 코드를 여러 회 반복하여 실행할 수 있다.

 

<script>
while(조건식){
	조건식이 참일동안만 반복;
    증감식;
}

var i=1;
while(i<11){
	document.write(i);//1~10까지 출력
	i++;
}
</script>

 

조건식을 검사하고 만족하면 중괄호에 있는 코드와 증감식을 실행하고, 다시 조건식을 검사해 조건식을 만족할 동안 while문의 코드가 반복 실행된다.

 

2) do while문

while문은 조건식의 만족 여부를 먼저 검사한 후 중괄호에 있는 코드의 실행 여부를 결정했다. 하지만 do while문은 반드시 한 번은 코드를 실행하고 조건식을 검사한다.

 

<scirpt>

do{
	처음에 한번은 반드시 실행;
	조건식이 참일동안만 반복;
    증감식;
}while(조건식)

var i=10;

do{//반드시 한번은 실행
	document.write("i");
    i--;
}while(i<=5)

</script>

 

위의 코드를 보면 i=10으로 while의 조건식에는 맞지 않지만, do 문장이 반드시 한번 실행되기 때문에 10이 출력된다.

 

3) for문

for문은 조건식을 만족할 때까지 특정 코드를 반복하여 실행한다.

 

<script>
for(초깃값; 조건식; 증감식){
	자바스크립트 코드;
}

for(var i=1; i<=10 ; i++){
	document.write(i,"<br>");//1~10 출력
}
</script>

 

4) break문

반복문인 while문, for문에서 break문을 실행하면 조건식과 상관없이 강제로 반복문을 종료한다. (switch문에서도 사용) break문은 반복문을 강제로 종료할 때 사용한다.

 

<script>
for(var i=1; i<=10; i++){
	if(i==5) break;//i가 5이면 반복문 종료
    document.write(i,"<br/>");//1~4까지 출력
}
</script>

 

5) continue문

continue문은 반복문에서만 사용할 수 있다. 반복문 내에서 continue문을 만나면 아래 문장을 실행하지 않고 다음 반복을 위해서 반복문 처음으로 돌아가서 다음 반복을 계속한다.

 

<script>
for(var i=1;i<=10;i++){
	if(i%5==0) continue;//5의 배수이면 아래 코드 무시하고 다시반복
    document.write(i,"<br/>");//5,10빼고 출력
}
</script>

 

7) 중첩 for문

for문 안에 for문을 사용한 것을 중첩 for문이라고 한다.

 

<script>
for(var i=1; i<=3 ; i++){
	for(var j=1; j<=4; j++){
    	document.write(i+"행"+j+"열");
        //3행 4열 생성
    }
    document.write("<br/>");
}
</script>

 

8) for in 루프 반복문

for(변수 in 객체명)으로 객체명으로부터 속성을 하나씩 가져와 변수에 저장한 다음 반복한다.

 

<script>
var myCar={make:"BMW", model:"X5",year:2021};
//myCar객체를 생성, make, model, year속성을 정의

var result="";

/*
 *for in 루프 반복문 형식)
 *for(변수 in 객체명){//객체명으로 부터 속성을 하나씩 가져와서 변수에 저장한 다음 반복한다.
	 문장;
 }
 */
 
for(var x in myCar){//for in 루프 반복문
	//myCar객체로 부터 속성을 가져와서 x변수에 저장
	alert(x);//make, model, year 창이 뜸
	result+=myCar[x]+"<br/>";
}
document.write(result);// 속성 값 출력(BMW, X5, 2021)
</script>