---

제어문(Control Flow Statement)이란?

프로그램의 흐름을 제어하는 실행문

개발자가 작성한 코드는 기본적으로 한줄씩 실행된다.

이 과정에 코드의 흐름을 제어하기 위해 제어문을 사용한다.

제어문에서 자주 쓰이는 연산자

제어문은 기본적으로 특정한 조건을 만족했을 때 실행된다.

이 조건을 정의하기 위해 논리 연산자(Logical Operator)가 자주 사용 된다.

제어문에서 자주 사용되는 논리 연산자의 종류에 대해서 알아보겠다.

• && (그리고) : 모든 조건이 true

let num = 4;

if (num > 1 && num === 5) {
  console.log(num); // 출력 X
}

• || (또는) : 조건이 하나라도 true

let num = 4;

if (num > 1 || num === 5) {
  console.log(num); // 4
}

• ! (부정) : 조건의 부정

let num = 4;

if (!(num > 1 && num === 5)) {
  console.log(num); // 4
}

• !! (부정) : 조건을 부정하여 boolean값으로 변환

let num = 4;

if (!!num) {
  console.log(num); // 4
}

---

제어문(Conditional Statement)의 종류

If 조건문 (If Conditional Statement)

If 조건문은 정의한 조건이 true인지 false인지에 따라 달라지는 계산이나 상황을 수행한다.

If 조건문의 기본 형식에 대해서 알아보겠다.

• if (조건) { 조건이 true이면 실행 };

let fruit = 'apple';

if (fruit === 'apple') {
  console.log('this is apple');
}
// this is apple

• if (조건) { 조건이 true면 실행 } else { 조건이 false면 실행 };

let fruit = 'orange';

if (fruit === 'apple') {
  console.log('this is apple');
} else {
  console.log('this is orange');
}
// this is orange

• if (조건1) { 조건1이 true면 실행 } else if (조건2) { 조건2가 true면 실행 } else { 조건1, 조건2 둘다 false면 실행}

let fruit = 'lemon';

if (fruit === 'apple') {
  console.log('this is apple');
} else if (fruit === 'orange') {
  console.log('this is orange');
} else {
  console.log('this is lemon');
}
// this is lemon

삼항 조건 연산자 (Ternary Operator)

삼항 연산자는 세 개의 피연산자를 취할 수 있는 유일한 연산자이다.

맨 앞에 조건문 들어가고, 그 뒤로 물음표(?)와 조건이 true라면 실행할 식이 물음표 뒤로 들어간다.

그 뒤 바로 뒤로 콜론(:)이 들어가며 조건이 false라면 실행할 식이 마지막에 들어간다.

보통 if 명령문의 단축 형태로 사용된다.

let fruit = 'apple';
fruit === 'apple' ? console.log('apple') : console.log('not apple'); // apple

let text = fruit === 'apple' ? 'this is apple' : 'this is not apple'; // this is apple
console.log(text);

Switch 조건문 (Switch Conditional Statement)

switch문은 표현식을 평가하여 표현식의 값을 case 절과 일치시키고 해당 케이스와 관련된 명령문과 일치하는 케이스 뒤에 오는 케이스의 명령문을 실행한다.

switch 조건문은 if 조건문보다 정해진 범위안의 값에 대해 특정한 일을 해야 하는 경우 효율적이다.

즉 특정 범위 값의 일을 수행할 때는 if문보다는 switch문을 사용하는 것이 가독성이 좋다.

// 정해진 범위안의 값에 대해 특정한 일을 해야 하는 경우
// 0: 월요일, 1: 화요일... 6: 일요일
let day = 6
let dayName;

// if
if (day === 0) {
  dayName = '월요일'
} else if (day === 1) {
  dayName = '화요일'
} else if (day === 2) {
  dayName = '수요일'
} else if (day === 3) {
  dayName = '목요일'
} else if (day === 4) {
  dayName = '금요일'
} else if (day === 5) {
  dayName = '토요일'
} else if (day === 6) {
  dayName = '일요일'
}
console.log(dayName); // 일요일

// switch
switch (day) {
  case 0:
    dayName = '월요일';
    break;
  case 1:
    dayName = '화요일';
    break;
  case 2:
    dayName = '수요일';
    break;
  case 3:
    dayName = '목요일';
    break;
  case 4:
    dayName = '금요일';
    break;
  case 5:
    dayName = '토요일';
    break;
  case 6:
    dayName = '일요일';
    break;
}
console.log(dayName); // 일요일

• switch문의 다중조건

// okay, good -> 좋음, bad -> 나쁨
let condition = 'okay';
let text;

switch (condition) {
  case 'okay':
  case 'good':
    text = '좋음';
    break;
  case 'bad':
    text = '나쁨';
    break;
}
console.log(text); // 좋음

• break문 : switch문에서 해당하는 조건을 만나면 switch문을 나가는 명령어

let day = 4
let dayName;

// break문을 사용하지 않으면 모든 조건식을 적용
// 즉 가장 마지막 조건이 적용
// no break switch
switch (day) {
  case 0:
    dayName = '월요일';
    break;
  case 1:
    dayName = '화요일';
    break;
  case 2:
    dayName = '수요일';
    break;
  case 3:
    dayName = '목요일';
    break;
  case 4:
    dayName = '금요일';
    break;
  case 5:
    dayName = '토요일';
    break;
  case 6:
    dayName = '일요일';
    break;
}
console.log(dayName); // 금요일

// break switch
switch (day) {
  case 0:
    dayName = '월요일';
  case 1:
    dayName = '화요일';    
  case 2:
    dayName = '수요일';    
  case 3:
    dayName = '목요일';    
  case 4:
    dayName = '금요일';    
  case 5:
    dayName = '토요일';    
  case 6:
    dayName = '일요일';    
}
console.log(dayName); // 일요일

• default문 : if문의 else와 같은역활, 모든 조건을 만족하지 않았을 때 default코드가 실행된다.

// okay, good -> 좋음, bad -> 나쁨
let condition = 'normal';
let text;

switch (condition) {
  case 'okay':
  case 'good':
    text = '좋음';
    break;
  case 'bad':
    text = '나쁨';
    break;	
  default:
    text = '모르겠음';
}
console.log(text); // 모르겠음

---

반복문(Loop Statement)의 종류

For 반복문 (For Loop Statement)

for문은 괄호로 감싸고 세미콜론으로 구분한 세 개의 선택식과, 반복을 수행할 문(주로 블럭문)으로 이루어져 있다.

for문은 크게 4가지 단계로 실행된다.

1. 변수선언문을 실행해 변수를 초기화

2. 조건식의 값이 참이면 { } 코드블럭을 수행

3. 증감식을 수행

4. 조건식이 거짓이 될떄까지 2번, 3번을 반복

for (let i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

for (let i = 0; i < 5; i = i + 2) {
  console.log(i); // 0 2 4
}

• 중첩 반복문 : 반복문을 2개이상 중첩해서 사용

for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    console.log(i, j);
    // 0 0
    // 0 1
    // 0 2
    // 1 0
    // 1 1
    //  :
    //  :
    // 2 2
  }
}

• 무한 루프 : for문의 조건이 항상 ture인 경우

for (let i = 0; ;i++) {
  console.log(i); // 0 1 2 3 4 .......
}

• 반복문의 흐름 제어 : 반복문 또한 조건문처럼 continue, break를 사용하여 흐름을 제어

for (let i = 0; i < 3; i++) {
  if (i === 1) {
    continue;
  }
  console.log(i); // 0 2
}

for (let i = 0; i < 3; i++) {
  if (i === 1) {
    break;
  }
  console.log(i); // 0
}

While 반복문 (While Loop Statement)

while문은 조건문이 true일 때 실행되는 반복문이다.

조건은 문장안이 실행되기 전에 참, 거짓을 판단한다.

• while(조건) { 조건이 true이면 실행될 문장 }; : for문처럼 변수선언문, 증감식이 없기 때문에 외부에서 따로 선언

let num = 5;
while (num > 0) {
  console.log(num); // 5 4 3 2 1
  num--;
}

let isActive = true;
let num = 0;
while (isActive) {
  console.log(num); // 0 1 2 3 4 5
  if (num === 5) {
    isActive = false;
  }
  num++;
}

• do while : 문장을 먼저 실행하고 이 후 조건식을 판단

let isActive = false;
let num = 0;

do {
  console.log(num); // 0
} while (isActive);
num++

---

참고 자료

제어 흐름과 오류 처리 - JavaScript | MDN
모던 자바스크립트 Deep Dive
모던 JavaScript 튜토리얼