JS 제어문

🔹제어문

- 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용.

- 코드의 실행 흐름을 인위적으로 제어 가능

 

🔹블록문

- 0개 이상의 문을 중괄호로 묶은 것. 코드블록 or 블록문

 

 

🔹스코프

- 유효범위 블록

-참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을  다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 

  찾아내기 위한 규칙

- 함수 스코프 = var

- 블록 스코프 = let, const

<script>
    let n1 = 10;
    {//블록시작{
      console.log (n1,'n1');//10 콘촐창 출력
      n1 = 20;
    }//블록 종료 } 
    console.log(n1,'n1은 블록을 기준으로 전역변수에 해당');// 20 콘솔창 출력
    //블록 안의 n1은 재선언된것이 아니라 재할당 된 값으로 전역변수 n1에 값 할당.

    let n2 = 20 ;
    {
      //  console.log(n2, 'n2은 블록을 기준으로 지역변수');//20 콘솔창 출력
      let n2 = 30;
      //n2라는 변수를 괄호 안에 선언
      console.log(n2, 'n2은 블록을 기준으로 지역변수');//30 콘솔창 출력
    }
    console.log(n2, 'n2의 결과값은?');//20 콘솔창 출력
    //블록안의 n2는 블록안에서 선언된 것이라 전역변수에 영향 안끼치고 휘발.
    
    // vs
    var n3 = 20 ;
    {
      console.log(n3, 'n3은 var함수를 기준으로 지역변수');//20 콘솔창 출력
      var n3 = 30;// 30으로 n3값 재선언.
      console.log(n3, 'n3은 함수를 기준으로 지역변수'); //30 콘솔창 출력
    }
    console.log(n3, 'n3의 결과값은?');// 30 콘솔창 출력
    //var는 함수스코프라 휘발되지 않고 전역변수 값 초기화, 재선언

    var n4 =30;
    function fn(){
      n4 = 20;
    }//함수 일 때만 유효범위(중괄호 안) 지정 
    fn();
    console.log(n4, 'n4의 결과값은?');
  </script>

 

🔹조건문

◾ if문 

- 주어진 조건식의 평가결과에 따라 코드블럭의 실행을 결정

<script type="text/javascript">
     
    if (조건식) {
        // 조건식이 참이면 이 코드 블록이 실행된다.
    } else {
        // 조건식이 거짓이면 이 코드 블록이 실행된다.
    }

    if (조건식1) {
        // 조건식1이 참이면 이 코드 블록이 실행된다.
    } else if (조건식2) {
        // 조건식2이 참이면 이 코드 블록이 실행된다.
    } else {
        // 조건식1, 2가 거짓이면 이 코드 블록이 실행된다.
    }

</script>

◾ switch문

- 주어진 조건식의 평가결과에 따라 코드블럭의 실행을 결정

- 불리언 값으로 평가될 수 있는 표현식==스위치는 값으로 비교

<script type="text/javascript">
     
    switch (값) {
       case 표현식1:
            //switch 문의 표현식과 표현식1이 일치하면 실행될 문;
            break;
       case 표현식2:
            //switch 문의 표현식과 표현식2가 일치하면 실행될 문;
            break;
       default:
            //switch 문의 표현식과 일치하는 표현식을 갖는 case 문이 없을 때 실행될 문;
    }

</script>

  	let exsubScore = 83;
    console.log(parseInt(exsubScore/10));
    switch (parseInt(exsubScore/10)) {
      case 10:
        console.log('해당과목의 학점은 A입니다');
        break;
      case 9:
        console.log('해당과목의 학점은 A입니다');
        break;
      case 8:
        console.log('해당과목의 학점은 B입니다');
        break;
      case 7:
        console.log('해당과목의 학점은 C입니다');
        break;
      case 6:
        console.log('해당과목의 학점은 D입니다');
        break;
    
      default:
      console.log('해당과목의 학점은 F입니다');
        break;
    }

 

 

🔹반복문

- 주어진 조건식의 평가 결과가 거짓이 될 때 까지 코드블럭 반복 실행

◾ for 반복문

<script type="text/javascript">
     
    for (초기화식; 조건식; 증감식) {
       //조건식이 참인 경우 반복 실행될 문;
    }

    for (var i = 0; i < 2; i++) {
            console.log(i);
    }

</script>

순서= 선언값, T/F확인, 콘솔출력, 증감식

◾ while, do while 반복문

<script type="text/javascript">
     
    while (조건식) {
       //조건식이 참인 경우 반복 실행될 문;
    }

    var i = 1;

    while (i < 5) {
       console.log(i);
	i++;
    }
    
   //콘솔창에 1,2,3,4 출력.
   //5가 되면 false가 되기 때문에 실행 안됨.

</script>


<script type="text/javascript">
     
    do {
        // 무조건 한번 실행 
    } while (조건식);

    var i = 5;

    do {
       console.log(i);
	i++;
    } while (i < 5);

</script>
// 단순 whlie문은 5만 찍히고 실행되지 않음
// do while문은 거짓값이라도 일단 한번은 돌려 출력

 

◾ break

- 레이블문, 반복문, switch문의 코드 블럭을 탈출

<script type="text/javascript">
    var string = 'ksmart';
    var index;
   // 문자열은 유사배열이므로 for 문으로 순회
    for (var i = 0; i < string.length; i++) {
         // 문자열의 개별 문자가 'r'이면
         if (string[i] === 'r') {
              index = i;
              break; // 반복문을 탈출한다.
         }
    }
    console.log(index);
</script>

</script>
	
	<h1>break</h1>
	- 해당 키워드를 만날 경우 반복이 중지된다.
	<script type="text/javascript">
		/* 인접하고 있는 블록을 빠져나온다.
		{
			break;
		}
		for(반복문 키워드) 가장 가까운 for(반복문 키워드)문의 블록을 빠져나온다.
		*/
		for (let cnt1=0; cnt1<5; cnt1++){
			console.log(cnt1);
			if(cnt1 == 1) break;
		}

	</script>

◾ continue

- 반복문(for, for…in, for…of, while, do…while)의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 이동

<script type="text/javascript">
		/* 인접하고 있는 블록을 빠져나온다.
		for
		continue -> 아래에 위치한 코드는 실행x , 증감식으로 간다.
		*/
		for(let i=0; i<5; i+=1){
			//1인경우 continue
			if(i==1) continue;
			console.log(i,'for continue');
		}
</script>

결과값

→ i=1 이 되면 콘솔창으로 내려가는게 아니라 바로 증감식으로 이동해 1값은 찍히지 않는다.