자바스크립트 중 실제 프로그램에서 소스를 실행하는 순서가 처리한 결과값에 따라 달라지거나 특정 부분의 소스를 건너뛰고 실행하고 반복하는 등 실행 흐름을 조절하는 '제어문'에 대해 정리해 본다.

---

제어문(Conditional statement)

소스가 특정 조건(condition)에 부합(true)일 경우에 작동하도록 프로그램의 흐름을 제어하는 자바스크립 안의 문법이라고 할 수 있다.

:: if

조건 부합 여부만 확인하여 부합할 경우 실행할 명령만 정리할 때 사용한다.

<script>
  if(condition) {
  	~logic~
  }
</script>

:: if・・・else

조건이 부합했을 경우와 부합하지 않을 경우(false) 역시 구분하여 특정 소스를 실행해야 한다면 If・・・else문을 사용한다. if문과 else문의 명령이 한 줄인 경우 중괄호 생략이 가능하다.

<script>
  if(condition) {
	  ~logic1~
  } else {
	  ~logic2~
  }
</script>

<script>
  if(condition1) {
	  ~logic1~
  } else if (condition2) {    // 조건이 다양할 경우 흐름을 제어하기 위해 여러 조건 레이어 
	  ~logic2~
  } else {
	  ~logic3~
  }
</script>

:: 조건 연산자(Ternary Operator)

조건이 하나이고 true와 false일 때 실행할 명령도 하나뿐인 간단한 조건문이라면 '?'기호와 ':'기호로 이루어진 조건 연산자를 활용하여 간단하게 표기가 가능하다.

<script>
  condition ? true value : false value 
<script>

:: switch

프로그램에서 여러가지 조건과 값을 지정하여 비교하고 실행해야 하는 경우, If・・・else문 보다 소스 작성의 편의성과 가시성을 위해 사용한다.

<script>
  switch ('variable') {      // 값을 확인할 변수 작성
    case 'variable value1' : ~logic~    // 변수의 값(조건)과 그에 따른 실행 명령
      break;                              // 명령 실행 후 완전히 switch문에서 빠져나옴 
    case 'variable value2' : ~logic~
      break;
    case 'variable value3' : ~logic~
      break;
    case 'variable value4' : {
    	~logic~
    	~logic~
    }            // 실행 명령이 둘 이상일 경우 중괄호로 묶음 
        break;
    default : ~logic~    // 변수의 값이 전부 일치하지 않을 때 실행할 명령
}
</script>

---

반복문(Loop Statement)

어떤 동작을 여러번 실행하는 데 사용한다. 반복문을 사용하면 여러 명령을 늘어 놓지 않고 간단하게 작성할 수 있고 작성한 소스의 양이 줄어 들어 실행 속도가 빨라지는 장점이 있다.

:: for

일정하게 값이 커지면서 명령을 반복 실행 할 때 사용하면 편리하다.

for문 기본형

<script>
  for(begin; condition; step;) {
	  ~logic~
  }
</script>

example)

<script>
  let sum = 0;          // 변수 sum의 값 0 할당

  for (let i=1; i<11; i++) {   // 카운터 변수 i가 1부터 10까지 1씩 증가하며 반복 
    sum += i      // sum = sum + i
  }
  
  document.write(`1부터 10까지 더하면 ${sum}이다.`);  // 반복이 끝난 후 출력될 내용
</script>

출력값 => 1부터 10까지 더하면 55이다. 

for문 중첩

하나의 for문 안에 다른 for문을 넣어 사용한다.

example)

<script>
  for(let i=0; i<3; i++) {
    for(let j=0; j<10; j++) {
      document.write('8');
    }
  }
  document.write('<br>');
</script>

출력값 =>
8888888888
8888888888
8888888888

위의 코드의 실행 순서는 다음과 같다.

1️⃣ 카운터 변수 i를 가진 for문 실행
2️⃣ 카운터 변수 j를 가진 for문 10번 반복
3️⃣ for문에서 빠져나와 <br>로 줄바꿈
4️⃣ 카운터 변수 i가 2가 될 때까지 1️⃣~3️⃣ 반복

:: while

for문은 카운터 변숙를 기준으로 명령을 반복하기 때문에 횟수가 정해져 있는 반복 명령을 작성할 때 편리하다면, while의 경우 특정 조건을 만족하는 동안에 반복하는 명령을 작성할 때 편리하다.

while문 기본형

아래와 같은 코드는 카운터 변수 i가 0에서 9가 될 때까지 코드를 10번 반복 실행한다. 코드는 실행 조건을 먼저 확인하고 부합할 경우 실행한다.

<script>
  let i = 0;
  while(i < 10) {
  	~logic~
    i += 1;
  }
</script>

do・・・while문

while과 동일한 반복문의 형태이지만 코드를 먼저 실행한 후 조건을 확인한다는 점에서 while문과 차이가 있다. 즉, do・・・while문은 조건의 결과값이 false라도 최소 한 번은 코드를 실행한다는 것이다.

<script>
  let i = 0;
  do {
  	~logic~
    i += 1;
  } while(i < 10);
</script>

---

점프문(Jump Statement)

현재 실행하고 있는 코드를 잠시 멈추는 것으로 break와 continue가 있다. break는 현재 진행 중인 반복문을 완전히 빠져나가 중단하는 것이고, continue는 반복문의 특정지점에서 실행을 중단하고 다른 특정 지점으로 실행 위치를 이동시킨다는 점에서 차이가 있다.

:: break

break는 아래와 같이 반복문이 처음 실행한 후 바로 break를 만나서 반복문을 종료 시킨 것이다.

<script>
  for(i=0; i<5; i++) {
    document.write('8');
    break;
  }
</script>

출력값 => 8

:: continue

continue는 주어진 조건에 맞는 값을 만났을 때 실행하던 반복문을 건너뛰고 다시 반복문의 맨 앞으로 돌아가 반복문을 재실행 하는 것이다.

<script>
  for(i=0; i<10; i++) {
    if(i % 2 === 1) {   // i를 2로 나눈 나머지가 1일 경우 = i가 홀수인 경우 실행
      continue;
    }
    document.write(i+'<br>'); // i가 짝수일 경우 실행
  }
</script>

출력값 =>
2
4
6
8
10