JS 제어문 : 조건문, 반복문

 1. 조건문 : if - else 문

if (조건식) {
   조건식이 참이면 실행될 코드
} else {
   조건식이 거짓이면 실행될 코드
}

if - else 문에 사용되는 조건식은 불린 값이 반환되는 표현식이 사용되어 그 값에 따라 실행되는 코드가 달라진다.

조건식의 결과가 true 인 경우에는 if 문의 코드가, false 인 경우에는 else 문의 코드가 실행된다.

 

연산자 때와 마찬가지로 조건식이 true 또는 false 가 아닌 경우에는 boolean 타입으로 암묵적 형변환이 일어나 불린 값으로 강제 변환된다. 

문자열의 false
1️⃣ '' 빈문자열

문자열의 true
빈문자열 이외의 모든 값

숫자의 false
1️⃣ 0
2️⃣ NaN

숫자의 true
0과 NaN 이외의 모든 값

📌 강제 변환이 일어나도 값 자체의 데이터 타입이 변환된 것은 아니다. 조건식을 실행하기 위해 단 한 번만 사용되기 위하여 강제 변환된 것으로 원본 데이터에는 영향이 없다.

 

조건에 따라 else if, else 문은 옵션으로 사용되며, else if 문을 여러 번 사용하여 여러 조건식을 사용할 수도 있다.

 

📌 else if ?

else if 는 사실 하나의 키워드가 아닌 else 를 통한 if 문의 사용이다.

본래 다음과 같이 사용되었던 것을 편의상의 이유로 else if 문 사용이 가능해진 것이다. 

if (조건식) {

} else {
           if (조건식) {
           } else {
           }
}

if 문에서 실행될 코드의 내용이 복잡하지 않고, 값으로 반환되는 경우에는 삼항 조건 연산자로 바꿔 사용할 수도 있다.

<script>
	// if 문을 사용한 경우
	var num = 2;
    var result;
    
    if(x % 2) {
    	result = '홀수';
    } else {
    	result = '짝수';
    }
    
    // 삼항 연산자를 사용한 경우
    var num = 2;
    
    var result = x % 2 ? '홀수' : '짝수';
</script>

 

 

2. 조건문 : switch 문

switch (표현식) {
    case 표현식1 :
    switch 의 표현식과 case 의 표현식1이 일치하면 실행될 코드;
    break;
    case 표현식2 :
    switch 의 표현식과 case 의 표현식2이 일치하면 실행될 코드;
    break;
    default :
    switch 문의 표현식과 일치하는 case 가 없을 때 실행될 코드;
    (break 키워드는 default 문에서 생략 가능)
}

switch 문은 표현식을 평가하여 도출된 값과 일치하는 case 문의 표현식을 찾아 코드를 실행시키는 방식의 조건문이다.

값과 일치하는 case 문이 없는 경우에는 default 문을 실행하게 되는데, default 문은 선택 사항이기 때문에 사용하지 않아도 된다.

 

📌 if 문과 switch 문의 차이

if 문은 조건식이 불린 값으로 평가되어야 하지만, switch 문의 표현식은 불린 값보다는 문자열 또는 숫자 값으로 case 를 분리하여 코드를 실행하려 한다.

때문에 참 거짓으로 판단하는 경우가 아닐 때에 사용하기에 유용할 수 있다.

 

📌 break 키워드

break 키워드는 표현식에 따라 case 문의 코드를 실행하고 코드가 끝나면 코드 블록을 탈출할 수 있도록 하는 장치이다.

만약 break 키워드를 case 마다 작성해주지 않으면 fall through 현상이 나타나는데, 이는 표현식에 해당된 case 문의 코드를 실행하고도 다음 case 문의 코드 모두를 실행하게 되는 현상이다.

이러한 현상이 발생하게 되면, 예상하지 못한 결과를 만날 수 있기 때문에 default 문 이외에는 break 키워드를 작성해주는 것이 좋다.

default 문에도 break 문을 작성할 수는 있지만, 작성하지 않아도 되는 이유는 break 문이 없더라도 그 이후 실행할 코드가 없기 때문에 의도적으로 생략이 가능하다는 것이다.

의도적으로 break 문을 작성하지 않는 경우가 또 있는데, 여러 case 문의 표현식이 하나의 공통된 실행 코드를 갖게 되는 경우 각각의 break 문을 작성하지 않고, 단 한 번만 break 작성을 하는 경우가 있다. 

<script>
	var month = 4;
    var season;
    
    switch(month) {
    	case 3: case 4: case 5:
        	season = 'spring';
            break;
    	case 6: case 7: case 8:
        	season = 'summer';
            break;
    	case 9: case 10: case 11:
        	season = 'fall';
            break;
        default: 
        	season = 'winter';
    }
</script>

 

 

 

3. 반복문 : for 문

for (변수 선언문 또는 할당문; 조건식; 증감식) {
     조건식이 참인 경우 반복 실행될 코드;
}

for 문은 조건식이 false 일 때까지 코드 블록 내의 코드를 반복적으로 실행한다.

for 문의 실행 순서
1️⃣ 변수 선언문 또는 할당문 최초 1회 실행
2️⃣ 변수의 값이 조건식을 만족하는지 판단하고 false 를 반환하는 경우 해당 단계에서 끝
3️⃣ 조건식이 참인 경우 코드 블록 내의 코드 실행
4️⃣ 코드가 실행된 후 변수에 증감식 적용
5️⃣ 2️⃣의 조건식에서 false 를 반환할 때까지 2️⃣3️⃣4️⃣ 반복

for 문의 변수 선언문 또는 할당문, 조건식, 증감식은 생략이 가능한데, 이러한 경우에는 무한 루프가 되어 무한히 코드 내용을 반복하게 된다.

for (;;) {
  무한 루프
}

 

 

 

4. 반복문 : while 문

while(조건식) {
      조건식의 결과가 true 이면 실행될 코드;
}

while 문은 조건식의 결과에 따라 true 이면 블록 내의 코드를 실행하게 되고, false 이면 실행하지 않고 종료한다.

따라서 조건식에 쓰인 내용이 불린 값이 아닌 경우 불린 값으로 묵시적 형변환을 적용하게 된다.

 

while 문 또한 for 문과 같이 무한 루프가 되는 경우가 있다.

while(true) {

}

무한 루프를 작성할 때에는 반드시 코드 블록 내부에 탈출 조건을 만들어 무한 루프를 빠져 나올 수 있도록 해야 한다.

탈출 조건은 if 문 등으로 특정한 조건을 만족할 때에 break 문을 통하여 while 문을 빠져 나올 수 있도록 하는 것이다.

 

📌 for 문과 while 문의 차이

for 문은 반복할 횟수가 명확한 경우에 활용성이 좋고, while 문은 반복 횟수에 대한 불명확 시에 활용하기 적합하다.

 

📌 do - while 문

while 문과 비슷하게 사용되지만, 차이점은 do 문에 있다. 

do 의 코드 블록을 먼저 실행하고 조건식을 평가하기 때문에  while 의 조건식의 결과와 상관없이 최초 1회 실행된다는 특징을 가진다.