[Javascript] 자바스크립트 제어문 [조건문/선택문/반복문]

제어문이란 프로그램의 흐름을 제어할 수 있도록 도와주는 문장입니다.

해당 언어를 효율적으로 사용할 수 있도록 하는 문장이지요. 

 

제어문에는  조건문, 선택문, 반복문 이 있습니다.

조건문은 조건에 따라 특정 코드를 실행시킬 수 있는 제어문입니다.

선택문은 일치하는 경우의 값이 있을 경우에만 특정 코드를 실행시킬 수 있는 제어문입니다.

반복문은 코드를 지정한 횟수 만큼 반복해서 실행시킬 수 있는 제어문입니다.

 

조건문에는

• if 문,
• else 문,
• else if 문

 

선택문에는

• switch 문

 

반복문에는 

• while 문,
• do while문,
• for 문

 

이 있습니다. 

 

---

1. 조건문

조건문은 조건을 만족하는지의 여부에 따라 코드를 제어할 수 있는 문장입니다.

조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어합니다. 조건문의 종류에는 if문, else문, else if문이 있습니다.

 

 

• if문

if문은 조건식을 만족(true)할 경우에만 코드를 실행합니다. 

if(조건)이 참인 경우 if(조건식)을 쓴 바로 다음 문장만을 실행하지요. 

if(조건1)
   문장1
   문장2

예를 들어 위와 같이 작성했다면 조건1이 참인 경우 문장1을, 조건1이 거짓인 경우 문장2를 실행합니다.

바로 다음에 있는 문장만을 실행하지요.

 

만약 if(조건1)이 참인 경우에 문장1,문장2 모두를 실행하고 싶다면 중괄호{}를 사용해주면 됩니다.

if(조건식){
  자바스크립트 코드;
}

var num = 10;

if(num<100){  //true를 반환합니다.

   document.write("hello";

}

 

// "hello"가 출력됩니다.

 

 

• else문

else문은 조건식을 만족할(true) 경우와 만족하지 않을(false) 경우에 따라 실행되는 코드가 달라집니다. 

 

if(조건식){
  자바스크립트 코드1;
}else{
  자바스크립트 코드2;
}

<script>

  var num = prompt("당신이 좋아하는 숫자는?", "0");

  

  if(num % 2 == 0){  //짝수일 경우에 실행

    document.write("당신이 좋아하는 숫자는 짝수입니다.");

  } else {                 //홀수일 경우에 실행

    document.write("당신이 좋아하는 숫자는 홀수입니다.");

  }

 

</script>

 

 

• else if문

else if문은 두 가지 이상의 조건식과 정해 놓은 조건을 만족하지 않았을 때 실행되는 코드로 이루어져 있습니다.

 

if(조건식1){
  코드1;   //조건식1이 참인 경우 실행할 문장
}else if(조건식2){
  코드2;   //조건식1이 참이 아니고 조건식2가 참인 경우 실행할 문장
}else if(조건식3){ 
  코드3;  //조건식1,2가 참이 아니고 조건식3이 참인 경우 실행할 문장

}else{    //if의 조건이 참이 아닌 나머지 모두
  코드4;
}

 

if(조건1)

if(조건2)

의 경우 조건이 만족하는 수만큼 

 

if(조건1)

else if(조건2)

의 경우 값은 하나가 나옵니다.

else if는 아무리 많아도 그 중에 하나가 실행됩니다.

최소 개수는 동일하지만 최대 개수가 다릅니다.

 

var mon = prompt("현재는 몇 월입니까?","0");

 

if(mon >=9 && mon <= 11){     //9~11

  document.write("독서의 계절 가을이네요");

}else if(mon>=6 && mon <= 8){ //6~8

  document.write("여행하기 좋은 여름이네요");

}else if(mon>=3 && mon <=5){  //3~5

  document.write("꽃향기 가득한 봄이네요");

}else{   //나머지

  document.write("눈 내리는 겨울이네요");

}

 

 

• 중첩if문

조건문 안에 조건문이 있으면 중첩if문이라고 합니다. 

 

if(조건식1){
  if(조건식2){
     자바스크립트 코드;
  }
}

 

var id = "hello";

var pw = "1234";

 

var user_id = prompt("아이디는?","");

var user_pw = prompt("비밀번호는?","");

 

if(id==user_id) {

  if(pw==user_pw) {

    document.write(user_id+"님 반갑습니다.");

  } else {

    alert("비밀번호가 일치하지 않습니다.");

    location.reload( );  //브라우저 새로고침

  }

} else {

  alert("아이디가 일치하지 않습니다.");

  location.reload( );

}

 

 

---

2. 선택문

선택문은 변수에 일치하는 경우의 값에 따라 코드를 제어할 수 있는 문장입니다.

 

 

• switch문

선택문인 switch문은 변수에 저장된 값과 switch문에 있는 경우(case)의 값을 검사하여 변수와 경우의 값에서 일치하는 값이 있을 때 그에 해당하는 코드를 실행합니다. if문과 용도는 비슷하지만 if문은 만족하는 데이터가 여러 개일 경우에 주로 사용하고, switch문은 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 코드를 실행시킬 때 사용합니다.

 

var 변수 = 초기값
switch(변수){
  case 값1: 코드1;
  break;
  case 값2: 코드2;
  break;
  case 값3: 코드3;
  break; 
  case 값4: 코드4;  
  break;

  default: 코드;
}

switch문 예제

---

 

 

3. 반복문

반복문은 특정 코드를 여러번 반복해서 실행할 수 있도록 하는 제어문입니다. 반복문을 이용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있습니다. 반복문에는 while문과 do while문, for문이 있습니다. 가장 기본적으로 많이 쓰는 반복문은 for문 입니다. 

반복문들은 반드시 적절한 조건을 제시해주어야 합니다. 조건이 없으면 그 반복문을 무한으로 반복하게 되겠지요. 

반복문 : 일정한 규칙을 가지고 있는 문장을 직접 작성하지 않고 여러 번 실행시키는 문장

 

• while문

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

while문의 실행 순서는 ①조건식을 검사하고, 만족하면 ②중괄호 안에 있는 코드와 증감식을 실행합니다. 그리고 ③다시 조건식을 검사합니다.

(활용되는 자바스크립트 코드 중에서 while문을 발견하는 것은 생각보다 드뭅니다. 하지만 while문을 쓰며 언어의 문법을 배운다는 측면에서 의미가 있습니다.)

while(조건){
 조건이 참인 동안 반복할 문장 (거짓이면 반복하지 않습니다.)
}

var 변수 = 초기값;
while(①③조건식){
  ②
  자바스크립트 코드;  //조건이 참인 동안 반복할 문장
  증감식;
}

var i = 1;  //초기값, 얼마부터

while(i<=30){ //최종값, 얼마까지

   if(i%2==0 && i%6==0) {

   document.write(i,"<br/>");

   }

   i++;

}

결과화면)

6

12

18

24

30

무한루프 예)

while(a=5){  //5를 a에 저장할 수 있어서 계속 '참'! 그래서 무한반복됩니다.

  document.write("<P>이 문장을 반복합니다.</p>");

}

 

조건을 사용하는 방법은

• (1) 배열
• (2)숫자의 범위

를 이용하는 방법이 있습니다.

 

 

 

 

• do while문

 

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

do while문은 최소 한번은 실행이 될 수 있다는 점이 while문과 다릅니다. (그래서 실무에서 거의 쓰는 것을 목격할 일이 없습니다. 실행을 해보고 조건식 만족 여부를 볼일이...)

var 변수=초기값;

do{
   자바스크립트 코드;
   증감식;
}while(조건식)

var i = 10;

do{

   document.write("hello");

} while (i<3)

 

 

• for문

for문은 조건식을 만족할 때까지 특정 코드를 반복하여 실행합니다. 사용 방법은 while문과 같지만 시작값, 최종값, 증감량을 흩어서 쓰던 while문과는 다르게 흩어져 있던 값을 모아서 쓰는 점이 다릅니다. while문보다 사용하기 편해 사용 빈도가 높은 편입니다. 

 

for(초기값; 조건식; 증감식){
   자바스크립트 코드;  //반복할 문장
}

for(var i=1; i <= 10; i++){

   document.write("반복"+i, "<br>");

}

 

*for

1. 형식

for(시작값; 최종값; 증감식    ){    //증감식 뒤에는 세미콜론을 찍지 않습니다.
  반복할 문장
}


2. 시작값 선언시 변수 선언과 동시에 사용 가능

ex) 일반적인 사용 예
var a=1
     b=2

for(a=1; a<=10; a++){

   document.write("무궁화 꽃이 피었습니다.");

}

ex) for문의 사용 예

for(var a=1; a<=10; a++){}
for(a=1; a<=10; a++){}  //var 생략
for(a=1, b=2; a<=1-; a++){}  //여러 개의 변수 선언

 

 

**for문을 사용하여 1부터 10까지 의 합 구하기

 

이렇게 써도 되긴 하지만 초기값을 하나 써주는 것이 일반적입니다.

 

하나의 for문에서는 하나의 변수만 반복할 수 있습니다.

그래서 만약 아래와 같이 써준다면 문법적 오류가 납니다.

for(a=0, b=1; a<5, b<=10; a++, b++){
      a+=b;
}