본문 바로가기
생활코딩 학습일기(Web 기초)

13) javascript의 제어문

by cuziam 2022. 8. 31.

제어문이 무엇일까? 다른 언어를 경험해봤다면 당연히 아는 개념일 것이고, 아니어도 단어 자체에 뜻이 있으므로 감을 잡을 수 있을 것이다. 제어문(Control flow statement)은 코드 블록을 조건에 따라 실행하거나, 반복적으로 실행해야 할 때 사용하는 실행문을 말한다. 즉 프로그램의 실행 흐름을 제어한다.

 

제어문은 프로그래밍 언어라면 대부분 갖고 있는 문장이다. 생각해보면 당연하다. 우리는 컴퓨터에게 일을 시켜야 한다. 우리가 커다란 프로그램을 처음부터 실행 순서대로 일일이 작성할 수 있는 능력이 있을까? 같은 일을 여러 번 시켜야 하는 경우에는 같은 코드를 일일이 반복해서 작성해야 할까? 1억번의 같은 일을 시켜야 하면, 1억번의 같은 코드를 작성해야 할까? 다행히 그럴 수도 없고, 그럴 일도 없다. 제어문이 있기 때문이다.

 

제어문에는 조건문, 반복문, continue break이 있다.


 

목차

  1. 코드블록
  2. 조건문: if …else와 switch
  3. 반복문: for와 while 그리고 break
  4. continue문

코드 블록

어떤 코드를 이런 흐름으로 실행해라명령을 하려면 처음에 무엇부터 해야 할까? 당연히 처음엔 실행시키고자 하는 코드 영역을 정해줘야 한다. 이를 위해 사용하는 것이 코드 블록이다. 코드 블록은 블록문(block statement) 혹은 복합문(compound statement)이라고 부르기도 한다.

 

임의로 아무렇게나 만들어본 코드블록.

 

코드 블록은 0개 이상의 문들을 서로 합쳐 중괄호로 묶은 것을 말한다. 이 코드 블록은 프로그램 실행 시 하나의 실행단위가 된다. 블록문은 단독 사용이 가능하긴 하지만, 대개 제어문이나 함수를 정의할 때 사용한다.


조건문

조건문(Conditional statement)은 주어진 조건식(Conditional expression)에 따라 코드 블록의 실행을 결정하는 실행문이다. javascript에서 조건문은 ifelse를 사용한 것과, switch를 사용한 것 2가지로 나뉜다.

 

Ifelse를 사용한 조건문

If… else 문은 주어진 조건식의 평가 결과가, 논리 참(true)인가 논리 거짓(false)이냐에 따라 실행할 코드 블록을 결정한다.

If …else 조건문에서 if는 반드시 있어야 하며, else else if는 때에 따라 사용하는 옵션이다.

 

 

if ,,,else문을 사용한 예시

  • 첫 번째 예시에선 if만을 사용하였다. If의 조건식에서 x<y는 true이므로 그대로 아래의 코드블록이 실행된다. 따라서 “x is smaller than y”가 출력된다.
  • 두 번째 예시에선 if와 else를 사용하였다. else문은 조건식이 false일 때 실행된다. 조건식이 false이므로 “x is not smaller than y”가 출력된다.
  • 세 번째 예시에선 if, else if, else를 사용하였다. else if는 else와 동일하게 조건식을 검사한 후, true일 경우 해당 블록을 실행한다. else if는 여러 번 사용할 수 있지만, if와 else는 한 번 밖에 사용하지 못함에 유의한다. else문은 if와 else if의 조건식이 모두 false일 때 실행된다.

 

switch

switch문은 주어진 표현식을 평가하고, 그 값과 일치하는 표현식을 갖는 case문을 실행하는 제어문이다. 일치하는 case문이 없는 경우에는 default문으로 이동한다. default는 옵션이다. 백문이 불여일견. 일단 예시를 보자.

switch문 예시. 이 코드는 폴 스루가 발생하였다.

 

case문은 위와 같이 생겼다. 첫 번째 예시코드를 보면 switch의 표현식에는 x가 들어가 있다. x=45이므로 45의 값과 일치하는 case문을 실행한다. 따라서 “number 45”가 출력된다. 근데 잘 보면 희한하게 “number 50” “default”라는 문자열도 출력된 것을 알 수 있다. 두 번째 예시에서도 “This is C”뿐만 아니라 “default”라는 문자열이 같이 출력됐다. 왜 그럴까?

switch문의 실행 방식

 

이유는 간단한데, switch문이 위의 그림처럼 실행되기 때문이다. 한 번 case문에 진입하면 다음 케이스의 것들도 차례대로 실행된다. 이렇게 프로그램이 switch문을 탈출하지 않고 switch문이 끝날 때까지 모든 case문과 default문을 실행하는 현상을 폴 스루(fall through)라고 한다.

switch문의 폴 스루를 방지하기 위해선 break를 사용하면 된다. break는 다른 제어문에서도 아주 유용하게 사용된다.

 

그럼 코드블록을 빠져나가기 위해선 어떻게 해야 할까? 이 때 사용하는 것이 break이다. break문은 break가 실행되는 코드블록을 탈출하게 해주는 제어문이다.

 

 

조건문은 if …elseswitch가 끝이다. 다음은 반복문이다. 반복문은 for문과 while문이 있다


반복문

for

for문은 조건식이 거짓으로 평가될 때 까지 코드블록을 반복해서 실행한다. 대개 다음과 같은 구조로 되어있다.

 

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

 

for문의 사용 예시

예시를 보면 초기에 x값이 설정되어 있고 이 x를 이용하여 반복의 정도를 결정하고 있다. 실행과정을 구체적으로 살펴보자.

  1. for문을 실행하면 var x=5가 실행된다. 즉 x에 5가 할당된다. 이 변수 선언문은 딱 한 번만 실행된다.
  2. 변수 선언문이 종료되고 조건식이 실행되어 참,거짓을 판단한다. 참인 경우 코드 블록이 실행된다.
  3. 코드 블록이 실행된 후 증감식인 x++이 실행된다. 즉 x는 6이 된다.
  4. 다시 조건식이 실행되고 참인 경우 코드 블록이 실행된다.
  5. 조건식이 거짓이 될 때까지 2,3의 과정을 반복한다.
  6. 조건식이 거짓이면 해당 for문을 빠져나오고 다음 코드를 실행한다.

for문을 사용할 때 특히 유의할 점은 무한루프에 빠지는 현상에 빠지는 일이다. 무한루프란 반복문이 코드블록을 무한히 실행하는 현상을 말한다. 무한루프가 생기는 경우 프로그램이 더 이상 for문의 다음 코드를 실행하지 못한다. 초보자든 숙련자든 쉽게 접하는 버그이다.

 

while

while문은 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행하는 제어문이다. for문은 반복 횟수를 명확할 때, while문은 반복 횟수가 불명확할 때 주로 사용한다. (개인적으로 반복문을 사용할 때 for문을 활용하는 경우가 훨씬 많은 것 같다.)

while문의 사용 예시, 현재 이 코드는 무한루프를 발생시키고 있다.

 

while문의 구조는 위와 같이 매우 단순하다. 조건문의 평가 결과가 참이면 코드 블록을 계속 실행하고, 거짓이면 코드블록을 실행하지 않고 종료한다. 만약에 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 형변환하여 참, 거짓을 구별한다.

 

문자열 타입은 불리언 타입으로 암묵적 형변환되어 true가 된다. 따라서 코드블록이 실행된다.

주의할 것이 두 가지가 있는데 하나는 암묵적 형변환이다. 앞선 글에서 논리연산자를 배울 때, 피연산자가 불리언 타입이 아닌 데이터들도 암묵적 형변환으로 인해서 불리언 타입으로 바뀐다고 했었는데 그 때와 동일하다. 그래서 예시와 “abc”는 불리언 타입이 아니지만 불리언 타입인 true가 된다.

 

다른 하나는 무한루프이다. for문과 동일하게, 조건식이 계속 참이라면 코드블럭이 계속 실행되므로 이를 막는 장치를 반드시 넣어야 한다.


continue문

continue문의 사용 예시

continue문은 반복문의 코드블럭에서 사용한다. continue를 만나면 코드블럭의 나머지 부분을 실행하지 않고 다시 조건식으로 돌아가서 조건식을 평가한다. 그리고 남은 루프가 계속 진행된다. 예시를 보면 i==2일 때 continue가 사용되었으므로, 이 때는 console.log()가 동작하지 않은 것을 알 수 있다.