03. JavaScript - 제어문

박지윤·2023년 9월 3일
JavaScript
0

JavaScript

목록 보기
3/13

제어문

제어문이란 프로그램의 실행순서를 결정하는 명령문을 말한다. 제어문을 통해 조건에 따라 실행 순서를 바꾸거나, 특정 부분을 반복하는 등 프로그램의 실행 흐름을 조절할 수 있다.

제어문의 종류로는 조건문, 선택문, 반복문이 있다.

1. 조건문

조건문은 조건식의 참 거짓에 따라 실행문을 제어하는 명령문이다. 조건문의 종류로는 if문, else문, else if문이 있다.

1) if문

let num1 = 10;
let num2 = 20;

if(num1 > 5){
  console.log(num1); // 10 true이므로 num1 출력
}

if(num2 < 15){
  console.log(num2) //false이므로 num2 출력 x 
}

if문은 소괄호() 안의 조건이 true일 경우 중괄호{} 안의 자바스크립트 소스를 실행하고, 조건이 false일 경우 중괄호 안의 자바 스크립트 소스를 무시하는 명령문이다.

2) else문

let num1 = 10;
let num2 = 20;

if(num1 > num2){
  console.log(num1);
}else{
  console.log(num2); 
}

// 20 
//num1 > num2는 false 이므로 else문에 있는 스크립트 소스 실행

else문은 if문의 조건이 true일 경우 if문 중괄호 안의 자바스크립트 소스를 실행하고,
조건이 false일 경우 else문 중괄호 안의 자바스크립트 소스를 실행하는 명령문이다.

3) else if문

var num = 75; 

if(num >= 90){
  console.log("A");
}else if(num >= 80){
  console.log("B");
}else if(num >= 70){
  console.log("C");   
}else{
  console.log("F");
}

// C출력



2. 선택문

선택문은 조건값과 case 값이 일치할 경우 그에 해당하는 실행문을 실행하는 명령문이다.

선택문의 예로는 switch문이 있다.

1) switch문

/*syntax 
switch (조건문) {
  case 값1 : 조건 값과 case 값1이 일치할 때의 실행문;
     break; 
  case 값2 : 조건 값과 case 값2이 일치할 때의 실행문;
     break;      
  case 값3 : 조건 값과 case 값3이 일치할 때의 실행문;
     break; 
     .
     .
     .
  default: 조건 값과 일치하는 case 값이 없을 경우의 실행문;
     break;
}*/

let num = prompt("1부터 4까지 좋아하는 숫자는? ", "1");
let eng;

switch (num){
  case "1" : eng = "one";
  	break;
  case "2" : eng = "two";
    break;
  case "3" : eng = "three";
    break;
  case "4": eng = "four";
    break;
  default : eng = "none";  // 기본값, 조건 값이 충족되지 않을 경우 실행 
    break;
}

// 만약 사용자가 1을 입력할 경우 one 출력
// 사용자가 입력 범위(1 ~ 4) 밖의 수를 입력할 경우 아무 것도 출력되지 않음.

주어진 조건 값에 따라 프로그램이 다른 명령을 수행하도록 하는 조건문이다. 실행문을 실행한 뒤 switch문을 빠져나갈 수 있도록 반드시 break 명령어를 포함해야 한다.


3. 반복문

반복문은 일련의 실행문을 원하는 횟수만큼 반복하고 싶을 때 사용하는 명령문이다.
반복문의 종류로는 for문, while문, do while문이 있다.

1) for문

 //syntax : for(초기값, 조건식, 증감식){실행문}

 //0부터 9까지 출력
for (i=0; i<10; i++){
	console.log(i);
}

// 구구단 2단 출력 

let dan = 2;  
let result = 0;  // 곱한 값 저장 

for (let i = 1; i < 10; i++) {
  result = dan * i;
  console.log(dan + " X " + i + "=" + result + "</br>");
} // 2 X 1 = 2 ~ 2 X 9 = 18까지 차례대로 출력

for문은 중괄호 안의 조건식이 false가 될 때까지 실행문을 수행하는 명령문이다. 반복문 중 가장 빠르며, 모든 자료형에 대해 사용이 가능하다는 장점이 있다.

2) 중첩 for문

// 2단 ~ 9단까지 출력 
let result = 0;

    for(let i=2; i<10; i++){
      document.write("<h1>"+i+ "단</h1>");
      for(let j=1; j<10; j++){
        result = i * j;
        document.write(i + " X " + j + "=" + result + "<br>");
      }
    }

3) for in문

//syntax: for (변수 in 객체) {실행문}
//key값: 변수명   value값: 객체명[변수명]
const obj = {
  a: 1,
  b: 2,
  c: 3
}

for (let i in obj){
  console.log(i, obj[i]); //a 1, b 2, c3
}

for in문은 객체의 열거 가능한 속성에 대해 반복하는 명령문이다. 순서가 보장되지 않기 때문에 array(배열)에서는 사용을 권장하지 않고 있다.

4) for of문

//syntax: for(변수 of 반복 가능한 객체명) {실행문}
let str = "Hello";
const arr = ["1번", "2번", "3번"];

for (let i of str){
  console.log(i + " "); // H e l l o
}

for (const element of arr){
  console.log(element);  // 1번2번3번
  console.log(arr); //1번,2번,3번 -> arr 길이만큼 반복
}

for of문은 반복 가능한 객체(array, string, set, map 등 )에서 사용할 수 있는 반복문이다. for in문이나 for each문보다 빠르다는 장점이 있다.

5) for each문

//syntax: 배열명.forEach(function(value, index, array){});
const numbers = [200, 100, 50, 3, 10];

numbers.forEach(function(value, index, array){
  console.log(index + 번째 요소: + value);
})

// 0번째 요소: 200 ... 4번째 요소: 10

for each문은 함수의 매개변수로 전달되는 함수인 콜백 함수를 활용하는 명령문이다. 여기서 value는 배열의 요소를 나타내는 매개변수, index는 각 요소의 순서를 나타내는 매개변수, array는 원본 배열 그 자체를 나타내는 매개변수이다.

value는 for each문을 사용하기 위해 꼭 있어야 할 필수적 매개변수이고, index와 array는 선택적 매개변수이다.

6) while문

//syntax: while(조건문) {실행문};

// 구구단 2단 출력 
let dan = 2;
let i = 1; // 변수 초기값 지정
let result = 0;

while (i < 10) {
  result = dan * i;
  console.log(dan + " X " + i + "=" + result + "</br>");
i++;
    }

while문도 for문과 마찬가지로 중괄호 안의 조건식이 false가 될 때까지 실행문을 수행하는 명령문이다. while문과 달리 중괄호 안에 조건문만 들어가기 때문에 미리 변수 선언 및 초기 값 지정을 해주어야 하고, 실행문 안에 증감식을 꼭 넣어주어야 한다.

만약, 증감식을 넣어주지 않을 경우 조건식이 계속해서 참이기 때문에 반복문이 멈추지 않는 무한루프 상태에 빠지게 된다.

7) do while문

// syntax: do{실행문}while(조건문);

//구구단 2단 출력
let dan = 2;
let i = 1; // 변수 초기값 지정
let result = 0;

do{
  result = dan * i;
  console.log(dan + " X " + i + "=" + result + "</br>"
} while(i < 10);

조건문에 충족해야만 실행문을 수행하는 while문과 달리, 실행문 뒤에 조건문으 확인하는 명령문으로, 조건문에 충족하지 않아도 한 번은 돌아간다는 특징을 가지고 있다.

4. 명령문 제어

명령문을 제어하는 명령어에는 continue와 break가 있다.

continue

for(i=0; i < 3; i++){
  console.log("hello");
  continue;
  console.log("world");  // 무시
  console.log("!");		// 무시
}

// hello만 3번 출력

  • 반복문 내부에서만 사용 가능한 명령

  • 반복문에서 현재 진행중인 루프를 건너 뛰고 다음 루프를 실행한다.

  • 반목문 코드 블록 중간에 있을 경우, continue 아래의 코드들은 모두 무시된다.

break

for(i=0; i < 3; i++){
  console.log("hello");
  break;  //i가 3이 될 때까지 반복하지 않고 끝냄
  console.log("world");  // 무시
  console.log("!");		// 무시
}

// hello만 1번 출력

  • 현재 코드 블록을 탈출하는 명령

  • 반복문의 조건이 만족되지 않아도 반복문을 끝낸다.

  • continue와 마찬가지로 break 아래의 코드들은 모두 무시된다.

5. 예제

1. 최대 최소 평균

<body>
  <script>
    let max = 0;
    let min = 1000;
    let avg = 0;
    let sum = 0;

    num = [1, 2, 3, 4];

    for (let i = 0; i < num.length; i++) {
      if(max < num[i]){
        max = num[i];
      }

      if(min > num[i]){
        min = num[i];
      }
      sum += num[i];
    }
    
    avg = sum / num.length;
    
    document.write("[리스트: "+ num + "]<br><br>")

    document.write("최대값: "+ max + "<br>")
    document.write("최소값: "+ min + "<br>")
    document.write("합계: "+ sum + "<br>")
    document.write("평균값: "+ avg + "<br>")
  </script>
</body>

2. prompt 구구단

<body>
  <script>
    let dan = prompt("구구단을 외자!" , "2");
    let result = 0;

    for (let i = 1; i < 10; i++) {
      result = dan * i;
      document.write(dan + " X " + i + "=" + result + "</br>");
    }
  </script>
</body>

3. 성년 & 미성년 구분

<body>
  <script>
    // 1번 방법: if문
    var age = prompt("나이를 입력하세요", "1");

    if (age >=20) {
      document.write("성년");
    } else{
      document.write("미성년");
    }
    
    // 2번 방법: 삼항 조건
    var age = prompt("나이를 입력하세요", "1");
    var result = age >= 20 ? "성년":"미성년";
    document.write(result);


    // 3번 방법: switch-case
    var age = prompt("나이를 입력하세요", "1");
    switch (age>=20){
      case true : result = "성년";
      break;

      case false : result = "미성년";
      break;
    }
    document.write(result);
    
  </script>
</body>

4. 문자 숫자 구분

<body>
  <script>
    // 1번 방법 if문
    var num = prompt("숫자나 문자를 입력하세요", "0");

    if (isNaN(num) == true) {
      document.write(num + "은 문자입니다.");
    }
    else {
      document.write(num + "은 숫자입니다.");
    }


    // 2번 방법: 삼항조건 연산자
    var num = prompt("숫자나 문자를 입력하세요", "0");

    var result = isNaN(num) == true ? num + "은 문자입니다." : num + "은 숫자입니다.";
    document.write(result);

    // 3번 방법: switch - case
    var num = prompt("숫자나 문자를 입력하세요", "0");
    switch (isNaN(num)) {
      case true: result = num + "은 문자입니다.";
        break;
      case false: result = num + "은 숫자입니다.";
        break;
    }
    document.write(result);

  </script>
</body>
profile
박지윤
프론트엔드 개발 및 실무 프로젝트 구현과정 수료
이전 포스트

02. JavaScript - 연산자

다음 포스트

04. JavaScript - 함수

0개의 댓글