모던 자바스크립트 Deep Dive - 8장 제어문

📌 목차

- 제어문
- 블록문
- 조건문
- 반복문
- break문
- continue문

 

 

---

 💡 제어문

제어문(control flow statement)은 조건에 따라 코드 블록을 실행하거나 반복 실행할 경우 사용한다.

일반적인 코드는 위에서 아래적로 순차적으로 실행하지만, 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다.

 

//제어문
var x = 1;
if (x < 3) {
  x++;
}

---

 💡 블록문

블록문(block statement)은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부른다.

블록문은 하나의 실행 단위로 취급하며, 단독으로 사용하기도 하나 일반적으로 제어문이나 함수를 정의할 경우 사용한다.

 

문의 끝에는 세미콜론을 붙이는 것이 일반적이지만 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다. 

 

//블록문
{
  var foo = 10;
}

 

---

 💡 조건문

조건문(conditional statement)은 주어진 조건식의 평가 결과에 따라서 코드블록의 실행을 결정한다.

조건식은 불리언 값으로 평가될 수 있는 표현식이다.

 

 

1. if...else 문

var a = 10;
var b = 20;
var result;

// if 문
if (b > a) {
  result = 'b가 a보다 크다';
}
console.log(result); // b가 a보다 크다

// if...else 문
if (b > a) {
  result = 'b가 a보다 크다';
} else {
  result = 'b가 a보다 작다';
}
console.log(result); // b가 a보다 크다

// if...else if 문
if (b > a) {
  result = 'b가 a보다 크다';
} else if (b < a) {
  result = 'b가 a보다 작다';
} else {
  result = 'b와 a가 같다';
}
console.log(result); // b가 a보다 크다

 

 

 

2. switch문

switch문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case문으로 실행 흐름을 옮긴다.

switch문의 표현식과 일치하는 case문이 없다면 실행 순서는 default문으로 이동한다.

 

var score = 5;
var result;

switch (score) {
  case 1: score = '정말 못했어요'; break;
  case 2: score = '못했어요'; break;
  case 3: score = '보통이에요'; break;
  case 4: score = '잘했어요'; break;
  case 5: score = '정말 잘했어요'; break;
  default: score = '없는 점수입니다'; break;
}

console.log(score); // 정말 잘했어요

---

 💡 반복문

반복문(loop statement)은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다.

그 이후에 조건식을 다시 평가하여 여전히 참인 경우에는 다시 코드 블록을 실행한다.

 

 

1. for문

//for (변수 선언문 또는 할당문; 조건식; 증감식;)
for (var i = 0; i < 2; i++) {
  console.log(i);
}
// 0
// 1

 

2. while문

while문은 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속 반복 실행한다.

for문은 반복 횟수가 명확할 경우 주로 사용하고 while문은 반복횟수가 불명확할 경우 주로 사용한다.

 

var count = 0;

while (count < 2) {
  console.log(count);
  count++;
}
//0
//1

 

3. do...while문

do...while문은 코드 블록을 먼저 실행하고 조건식을 평가한다.

var count = 0;

do {
  console.log(count);
  count++;
} while (count < 2);
//0
//1

---

 💡 break문

앞서 설명한 switch문에서 보면 break문을 사용하면 코드 블록을 탈출한다.

정확히 얘기하면 코드 블록을 탈출하는 것이 아닌 레이블문, 반복문의 코드 블록을 탈출하는 것이다.

 

var count = 0;

// 무한 루프일 경우
while (true) {
  console.log(count);
  count++;
  // count가 3이면 코드 블록을 탈출한다.
  if (count === 3) break;
}
//0
//1
//2

 

---

 💡 continue문

continue문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다.

 

var array = [10, 3, 5, 9, 23, 11]

for (var i = 0; i < array.length; i++) {
  if (array[i] > 9) continue; 
  console.log(array[i])
}
//3
//5
//9

array라는 배열에서 9보다 큰 수가 나올 경우에는 continue문을 사용하여 9보다 큰 수들은 log를 찍지 못하고 반복문의 증감식으로 실행의 흐름이 이동되어서 결과는 3, 5, 9가 나온다.