조건문(if~else), 선택문(case), 반복문(while, for) – 자바스크립트(Javascript)

자바스크립트 조건문, 선택문, 반복문

조건문은 특정한 조건식에서 참(true)과 거짓(false)을 구별해 각 조건에 맞는 코드를 실행하게 됩니다. 조건식은 앞서 살펴본 다양한 연산자들을 사용하여 조건식을 만들고 조건에 부합할 때와 그렇지 않을 때의 코드를 작성하여 실행하는 것을 의미합니다. 선택문과 반복문도 특정한 조건식에 기반하여 실행됩니다. 여기서 특정한 조건이란 무조건 반복 또는 일정한 조건에서 부합할 때에 반복 등 다양한 방법으로 코드를 실행시킬 수 있습니다. 자바스크립트에서 사용되는 조건문과 반복문에 대해 살펴봅니다.

---

조건문에서 가장 일반적으로 사용되는 if 문에 대해 살펴봅니다.

if (조건식) { 실행문 }

 

예를 들어 if ( 1 < 2 ) { document.write("1이 2보다 작다"); }에서 1<2 가 true이기 때문에 document.write를 실행하게 됩니다. if (0) { document.write("0을 출력"); }은 0가 false가 되며 document.write를 실행하지 않습니다. (0(zero), ""(blank), null, undefined는 false인 점을 알아둡니다.)

 

<script>

var name=prompt("이름을 입력하세요!","");

if (name) {document.write("당신의 이름은"+name+"입니다.");}

</script>

 

상기와 같이 코드를 작성했을 때 임의의 문자열을 입력하면 document.write를 실행하지만 빈칸을 입력하면 if(name)이 false가 되면 아무것도 출력되지 않는 것을 확인할 수 있습니다. 그렇다면 if ~ else 문을 사용하여 if 문이 false였을 때, 즉 조건을 만족하지 못할 때 실행할 코드를 작성해 봅니다.

 

<script>

var name=prompt("이름을 입력하세요!","");

if (name) {

document.write("당신의 이름은"+name+"입니다.");

}else{

document.write("이름을 입력하지 않았습니다.");

}

</script>

 

else문은 if문의 조건이 맞지 않을 때, 즉 공란이 입력되었을 때 실행되는 코드입니다. (if 문에 따른 실행문은 중괄호 { } 사이에 넣습니다.) 이제는 단일 조건이 아닌 다중 조건을 적용하는 else if 문을 사용해 봅니다.

 

<script>

var score=prompt("성적을 입력하세요!","");

if (score >= 90) {

document.write("우수한 성적입니다.");

}else if (score >= 80){

document.write("나쁘지 않은 성적입니다.");

}else{

document.write("좀 더 노력하세요.");

}

</script>

 

입력창에 90점 이상 일 때, 80점 이상일 때 그리고 80점 미만일 때 출력값이 달라지는 것을 확인합니다.

 

다중 조건문과 비슷하지만 좀 더 직관적인 스위치(switch) 문에 대해 살펴봅니다. switch(값)와 case(비교값)을 사용하여 switch와 case의 값이 일치할 때 특정 코드를 실행하게 합니다.

자바스크립트 조건문(switch 사용)

 

switch 사용 결과 확인

입력된 값과 case 조건에 맞는 문자열을 찾아 document.write를 실행하며 일치하는 문자열이 없다면 alert를 실행하게 됩니다.

 

이제 반복문 while, do~while, for 문에 대해 살펴봅니다. while 문은 특정한 조건이 만족되는 동안 지정된 구간을 반복하여 실행하게 됩니다. 1부터 10까지의 합을 구하는 while 반복문을 사용해 봅니다.

 

<script>

var sum=0, count=1;

while(count <= 10){

sum+=count;

document.write(count+"회 실행 값 = "+sum,"<br>");

count++;

}

</script>

 

자바스크립트 반복문(while)

while문의 조건식 count가 10보다 작으면 중괄호 { } 안의 코드를 실행하게 되는 것을 확인합니다. 그렇다면 do~while 반복문을 사용하여 동일한 결괏값을 출력토록 코드를 변경해 봅니다.

 

<script>

var sum=0, count=1;

do{

sum+=count;

document.write(count+"회 실행값 = "+sum,"<br>");

count++;

}while(count <= 10)

</script>

 

while 문은 조건식의 부합 여부를 먼저 검사 후 중괄호 { } 내의 코드를 실행하는 반면, do~while 문은 최초 1회 중괄호 { }내의 코드를 실행 후 조건식 부합 여부를 검사하게 됩니다. 이제 반복문 중 가장 직관적인 for 문에 대해 살펴봅니다.

 

<script>

var sum=0;

for(var count=1; count<=10; count+=2){

sum+=count;

if (count%3 == 0){

document.write("<p style='color:red'>"+'count='+count+' 실행값 = '+sum+"</p>");

} else {

document.write("<p style='color:blue'>"+'count='+count+' 실행값 = '+sum+"</p>");

}

}

</script>

 

자바스크립트 반복문(for)

for(초기값; 조건식; 증감식) 문법에 따라 count의 값이 2씩 증가하며, count의 값이 3의 배수면 빨간색, 그렇지 않으면 파란색으로 출력하게 합니다. 마지막으로 반복문을 강제 종료 시킬 수 있는 break문과 강제 종료는 아니지만 지정된 조건에서 코드를 실행하지 않고 반복문의 조건식을 바로 검사하는 continue문에 대해 살펴봅니다.

 

반복문과 조건문의 사용예

특정한 조건식에 부합하여 continue를 실행하게 되면 continue 이하 코드는 실행하지 않고 바로 for문의 조건식을 검사하게 됩니다.

 

continue, break 사용 결과

상기 코드의 실행 결과에서 어떠한 조건에 부합하여 continue와 break가 실행되는지 확인합니다.

 

---

아무리 쉬워 보이거나 이해가 어려운 코드라도 직접 코딩하며 실행하고 오류 또는 결과물을 확인해야만 코딩 공부에 도움이 됩니다. 다소 느리고 지루하더라도 직접 코드를 작성하며 학습을 진행하시길 권장합니다. (눈으로만 익힐 때와 직접 실행시켜보는 것에는 큰 차이가 있습니다.)