[JS] 조건문과 반복문

조건문과 반복문

 

1. 조건문

a. if문

<button onclick="ifTest();">if버튼</button>
<script>
  // 실습 예제
// 당신의 성별은 무엇입니까? 라고 묻는 알람창이 뜨고 그 알람창에는 값을 입력할 수 있는 필드가 있음
// 필드에는 '남자/여자'라는 값이 자동으로 들어가 있는 상태
// 남자라고 입력하면 "XY입니다", 여자라고 입력하면 "XX입니다", 둘다 아니면 "잘못 입력했습니다"
// 라는 문구가 알람창으로 뜨게 하기
 function ifTest(){  
    var gender = prompt('당신의 성별은 무엇입니까?','남자/여자');
    
        if(gender == '남자'){
            console.log("XY입니다")
        }else if(gender == '여자'){     
            console.log("XX입니다")
        }else{
            console.log("잘못 입력했습니다")
        }
// 당신의 성별은 무엇입니까? 라고 묻는 알람창이 뜨고 그 알람창에는 값을 입력할 수 있는 필드가 있음
// 필드에는 '남자/여자'라는 값이 자동으로 들어가 있는 상태  
//    -> var gender = prompt('당신의 성별은 무엇입니까?', '남자/여자');
   }
</script>

 

b. switch

<button onclick="switchTest();">switch문</button>
    <script>
        function switchTest(){ 
            var month = Number(prompt("현재는 몇 훨입니까?")); // prompt가 문자열 반환이라 문자를 숫자로 바꿔줘야함.
            console.log(typeof(month));  // 디버깅용 타입확인. 숫자인 것 같은데 비교가 안되는 상황이 자주 발생하니
            var day;
            switch(month){
                case 1: case 3: case 5: case 7: case 8: case 10: case 12:
                    day = 31; break;
                case 4: case 6: case 9: case 11:
                    day = 30; break;
                case 2:
                    day = 28;
                }
                alert(month + "월은 " + day + "일까지입니다.");
            }
            
    // '현재는 몇 휠입니까? '라고 묻는 알람창이 뜨고 그 알람창에는 값을 입력할 수 있는 필드가 있음
    // 입력을 하고 나면 'M월은 N일까지입니다' 라는 결과가 알람창에 뜨게 하기

    </script>

 

2. 반복문

a. for문

<h4>for</h4>
  <button onclick="forTest();">for문</button>
  <script>
      function forTest(){
          var result = '';
          for(var i = 1; i<=10; i++){
              result += i + ' ';
          }
          alert(result);  // 1 2 3 4 5 6 7 8 9 10출력
      }
  </script>

 

b. while문

<h4>while문</h4>
    <button onclick="whileTest();">while문</button>
    <script>
		function whileTest(){
			var result = '';
			var i = 1; 
			while(i<=10){
				result += i + ' ';
				i++;
			}
			alert(result);   // 1 2 3 4 5 6 7 8 9 10
		}
    </script>

 

c. for in문

객체의 프로퍼티 키 열거 전용

자바 foreach랑 비슷

for in문에서 배열을 가지고 사용할 때, 앞에 있는 변수(i)에 담기는 값은 배열의 인덱스가 담김 for in문에서 객체를 가지고 사용할 때, 앞에 있는 변수(i)에 담기는 값은 객체의 키가 담기게 됨

<button onclick="forInTest();">for in문</button>    <!-- 자바 foreach랑 비슷함 -->
    <script>
        function forInTest(){
            var result = '';
            var array = ['A', 'B', 'C', 'D', 'E'];

            for(var i in array){    // i의 디폴트값 0
                // for in문에서 배열을 가지고 사용할 때, 앞에 있는 변수(i)에 담기는 값은 배열의 인덱스가 담김
                console.log(i);     // 01234 <- 배열의 인덱스
                result += array[i] + ' ';
            }
            alert(result);          // A B C D E 

           /* 
            // 자바에서 이런식으로 사용
            for(Emp e : list){
                System.out.prinln(e);   
            }

            */
        }
    </script>

 

forEach()문

배열 순회 전용 메서드

forEach(function(item, index, arr){ ... })

item : 배열의 각 대상을 의미

index : 배열의 순서를 의미 (현재 몇번째 반복문이 돌고있는지)

arr : forEach 반복문에 사용되는 배열을 의미

 

자바스크립트 반복문 종류

1. for : 고전적인 for문

2. for in : 객체의 프로퍼티 키 열거 전용

3. for of : 이터러블 순회 전용

4. forEach(): 배열 순회 전용 메서드

5. while : 고전적인 while문

6. do while : 고전적인 do...while문

7. Object 객체 메서드: 객체 순회 전용

8. Array.prototye 메서드 : 배열 전용

https://curryyou.tistory.com/202