[JavaScript]제어문

제어문이란 프로그램의 흐름을 제어하는 코드로 조건문(분기문), 선택문, 반복문, 보조제어문이 있다.

 

조건문(분기문)

먼저 조건문은 if, else if, else으로 이뤄져 있는데, 특정 조건에 부합하는지 확인하여 실행하는 코드이며 상황에 따라 else if나 else는 생략도 가능하다.

if와 else if문은 ( ) 안에 조건식을 쓰고 { } 안에 실행문을 쓰며, else문은 ( ) 없이 바로 { }를 적는 형식이며, 이 구문의 조건식에는 비교 연산자나 논리 연산자가 들어갈 수 있다. 아래는 ID와 PW를 입력받아 로그인이 되는지 확인하는 if ~ else문이다. prompt( ); 는 페이지 실행 시 입력 창을 띄워준다.

var ID = "admin", PW = "1234";   //입력값과 비교할 기본 ID, PW 설정

var inputID = prompt("로그인 할 ID를 입력하세요");
var inputPW = prompt("로그인 할 PW를 입력하세요");

if(ID == inputID) {
	if(PW == inputPW) {
		alert(inputID + "님 로그인 성공");   //입력값과 기본 ID, PW가 같을 경우
	}
	else if {
		alert("비밀번호 오류");   //입력값과 기본 ID는 같고 PW는 다를 경우
	}
}
else {
	alert("아이디 없음");   //입력값과 기본 ID가 다를 경우
}

위 코드처럼 작성하고 런하면 웹 페이지에 바로 입력창(prompt)이 뜬다. 입력창에 id와 pw를 입력하면 기본 값인 "admin", "1234"와 비교한 뒤, 조건에 부합하는 구문이 실행되어 경고창(alert)이 뜨게 된다.

 

선택문

선택문은 switch-case문을 말하고, 변수를 하나 설정해서 그에 일치하는 값이 있을 때 해당 케이스를 실행한다. 모든 케이스에는 break문이 붙어, 일치하는 케이스가 실행되고 나면 break문으로 switch-case문을 빠져나온다. 만약 break문을 적지 않으면, 뒤의 break문이나 default문을 만날 때까지 코드를 모두 실행한다. default문은 조건문의 else와 같은 역할을 하기 때문에 마지막에 적는다.

switch-case문은 ( ) 안에 변수명을 쓰고 { } 안에 case들과 default문을 쓴다. case 뒤에는 변수 데이터 외에 연산자 등은 사용할 수 없다. 아래는 사용자(클라이언트)로부터 페이지를 입력받고 해당 페이지를 여는 switch-case문이다. location.href=" " 안에 주소나 경로를 적으면 해당 페이지로 이동할 수 있다.

var site = prompt("이동하고 싶은 페이지를 입력하세요");   //페이지 입력창

switch(site) {
case "네이버" :
case "naver" :
case "NAVER" :
	location.href="https://www.naver.com";   //위의 case일 경우 네이버 페이지로 이동
	break;
case "다음" :
case "daum" :
case "DAUM" :
	location.href="https://www.daum.net";   //위의 case일 경우 다음 페이지로 이동
	break;
case "구글" :
case "google" :
case "GOOGLE" :
	location.href="https://www.google.co.kr";   //위의 case일 경우 구글 페이지로 이동
	break;
default :
	alert("지원하지 않는 페이지입니다");   //위의 case들에 부합하지 않을 경우
}

같은 결과를 도출하는 case 끼리는 break문이 필요 없기 때문에 위와 같이 실행문을 생략하고 case들을 붙여 적을 수 있다. 이렇게 적고 런을 하면 입력 창이 뜨고, 그 입력 창에 네이버나 naver, NAVER를 치면 네이버로 이동된다.

 

반복문

그리고 반복문은 for문과 while문, do ~ while문을 통틀어 말한다. 조건에 맞는 코드를 반복해서 실행하는 것으로, 정해진 횟수만큼이나 특정 결과가 나올 때까지, 또는 무한으로 반복할 수 있다. 참고로 반복문 코드가 너무 길어지면 조건문보다 오래 걸릴 수도 있다.

for문은 횟수를 정해놓고 그 횟수만큼 반복하며, (초기식, 조건식, 증감식) 뒤에 { 반복코드 } 형식으로 적는다. for문도 if문처럼 다중으로 겹쳐 사용할 수 있는데, if문과 다르게 안쪽 for문 반복이 끝난 후에 바깥쪽 for문이 실행된다. 또한 반복문과 조건문을 같이 사용할 수도 있다. 아래는 html에서 만드는 테이블을 JS에서 다중 for문으로 만든 것이다.

var tag = "<table border='1'>";

for(var i=0; i<4; i++) {    //4행
	tag += "<tr>";
	
	for(var j=0; j<3; j++) {    //3열
		tag += "<td>" + "데이터" + "</td>";
	}
	tag += "</tr>";
}
tag += "</table>";

document.write(tag);

위와 같이 작성하고 런하면 아래 화면과 같이 테이블이 만들어진다.

이 테이블을 html로 똑같이 만들면 아래 코드와 같다.

<table border="1">
	<tr>
	<td>데이터</td><td>데이터</td><td>데이터</td>
	</tr>
	<tr>
	<td>데이터</td><td>데이터</td><td>데이터</td>
	</tr>
	<tr>
	<td>데이터</td><td>데이터</td><td>데이터</td>
	</tr>
	<tr>
	<td>데이터</td><td>데이터</td><td>데이터</td>
	</tr>
</table>

 

while문은 특정 결과가 나올 때까지 반복하는 방법으로, while문 위에 조건식, while문 안에 (조건식)과 { 반복코드; 증감식; } 순으로 적는다. 그리고 do ~ while문은 초기식을 먼저 적은 뒤, do { 반복코드; 증감식; } while(조건식); 의 형식으로 적으면 된다. while문과의 다른 점이라면 do ~ while문은 조건을 따지기 전에 무조건 한 번은 코드를 실행한다는 것이다.

더불어 무한루프는 횟수나 끝을 정해놓지 않고 반복하는 것이기 때문에, for(;;) 나, for(;true;), while(true) 형식으로 쓰면 된다. 아래는 무한루프와, while문과 do ~ while문을 이용해 1에서 10까지의 정수를 하나씩 나열한 것인데, 두 코드의 방식만 다를 뿐 결과는 똑같다.

//무한루프
for(;true;) {
	document.write("무한");
}

while(true) {
	document.write("무한");
}


//while문
var i = 1;
while(i<=10) {
	document.write(i + "<br>");    //1 2 3 4 5 6 7 8 9 10
	i++;
}

//do ~ while문
var j = 1;
do {
	document.write(j + "<br>");    //1 2 3 4 5 6 7 8 9 10
	j++;
} while(i<=10);

 

보조제어문

마지막으로 보조제어문인 break문과 continue문이 있다. break문은 switch-case에도 쓰인 것처럼 가장 가까운 반복문 하나를 탈출하는 코드이며, continue문은 아래쪽 코드를 실행하지 않고 다음 반복문 루프로 이동하는 코드다.

아래는 똑같이 1에서 10까지의 정수를 나열하여 7에만 break 또는 continue를 걸어놓은 것이다. 여기서 break문은 7에서 멈추겠다는 뜻이므로 1에서 6까지만 출력된다. 그리고 continue문은 7에서 아래 코드를 건너뛰고 다음 루프로 넘어간다는 뜻이기 때문에 7을 제외하고 10까지 모두 출력된다.

//break문
for(var i=1; i<=10; i++) {
	if(i%7 == 0) {
		break;
	}
	document.write(i + "<br>");   //1 2 3 4 5 6
}

//continue문
for(var i=1; i<=10; i++) {
	if(i%7 == 0) {
		continue;
	}
	document.write(i + "<br>");   //1 2 3 4 5 6 8 9 10
}