모던 자바스크립트 Deep Dive_제어문

최현호·2022년 8월 17일

JavaScript 모던자바스크립트

JavaScript

목록 보기

33/38

08_제어문

제어문은

조건에 따라 코드 블록을 실행 하거나(조건문)
반복 실행(반복문) 할 때 사용

코드는 위에서 아래로 순차적으로 실행하는데,

제어문을 사용하면 코드 실행 흐름을 인위적으로 제어할 수 있다. 하지만 직관적인 코드의 흐름을 혼란스럽게 만들어서 코드의 가독성을 해치는 단점이 있다.
forEach, map, filter, reduce 같은 함수형 프로그래밍 기법에서는 제어문의 사용을 억제하여 복잡성을 해결하고자 노력한다.

8.1 블록문

0개 이상의 문을 중괄호 {} 로 묶은 것으로 코드 블록 이라고 부르기도 한다.

자바스크립트에서는 블록문을 하나의 실행단위 로 취급한다.

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

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

// 함수 선언문
function sum(a, b) {
  return a + b;
}

8.2 조건문

주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정 한다.

자바스크립트는 if-else 문과 switch 두가지 조건문을 제공한다.

8.2.1 if-else 문

주어진 조건식에 따른 참과 거짓(true / false) 으로 평가
조건식의 개수에 따라 코드 블록을 늘리고 else if 문을 사용
대부분의 if-else 문은 삼항 조건 연산자로 바꾸어 사용 할 수 있다.

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

if (조건식1) {
  // 조건식1이 참이면 이 코드 블록이 실행
} else if (조건식2) {
  // 조건식2이 참이면 이 코드 블록이 실행
} else {
  // 조건식1, 2 모두 거짓이면 이 코드 블록이 실행
}

8.2.2 switch 문

주어진 표현식을 평가하여 그 값과 일치하는 표현식을 가지는 case 문으로 실행
case 문은

상황(case) 을 의미하는 표현식을 저장하고
콜론(:) 으로 끝난다.
그 뒤에 실행할 문들을 위치시킨다.

switch 문의 표현식과 일치하는 case 문이 없다면
-> default 문으로 이동
-> default 문에서 break 문을 생략하는 것이 일반적

switch(표현식) {
  case 표현식1: 
    표현식과 표현식1이 일치하면 실행될 문;
    break;
  case 표현식2: 
    표현식과 표현식2이 일치하면 실행될 문;
    break;
  case 표현식3: 
    표현식과 표현식3이 일치하면 실행될 문;
    break;
  default: 표현식과 일치하는 case문이 없을 때 실행될 문;
}

풀 스루(fall through) ?
switch 문을 탈출하지 않고 switch 문이 끝날 때 까지
모든 case 문과 default 문을 실행되는 것을 말한다.

풀 스루 예시

// 월을 영어로 변환한다. (4 -> 'April')
var month = 4;
var monthName;

switch(month) {
    case 1: monthNAme = 'January';
    case 2: monthNAme = 'February';
    case 3: monthNAme = 'March';
    case 4: monthNAme = 'April';
    case 5: monthNAme = 'May';
    case 6: monthNAme = 'June';
    case 7: monthNAme = 'July';
    case 8: monthNAme = 'August';
    case 9: monthNAme = 'September';
    case 10: monthNAme = 'October';
    case 11: monthNAme = 'November';
    case 12: monthNAme = 'December';
    default: monthName = "Invalid month"
}
console.log(monthName);  // Invaild month

8.3 반복문

반복문은

조건식의 평가 결과가 참인 경우 코드 블록을 실행
자바스크립트는 for, while, do-while 문을 제공

8.3.1 for 문

조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행

for 문의 변수 선언문, 조건식, 증감식은 모두 옵션이므로 반드시 사용할 필요는 없다.

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

8.3.2 while 문

주어진 조건식의 평가 결과가 참이면 코드 블록을 계속 실행하며 반복

for 문은 반복 횟수가 명확할 때 주로 사용

while 문은 반복 회수가 불명확할 때 주로 사용

while(조건식) {
  // 조건식이 참일 때 실행할 문;
}

// 무한 루프
while(true) {
  // ...
}

무한 루프를 탈출하기 위해서는
-> 코드 블록 내의 if 문으로 탈출 조건을 만들고, break 문으로 코드 블록을 탈출

8.3.3 do-while 문

코드 블록을 먼저 실행하고 조건식을 평가

따라서 코드 블록은 무조건 한 번 이상 실행

do {
  //  ...
} while (조건식);

8.3.4 break 문

주 사용은 반복문 또는 switch 문의 코드 블록을 탈출 할 때 사용

8.3.5 continue 문

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

break 문처럼 반복문을 탈출하지는 않는다.

var string = 'Hello world';
var search = 'l';
var count = 0;

// 문자열은 유사 배열이므로 for 문으로 순회할 수 있다.
for(var i = 0; i < string.length; i++) {
  // 'l' 이 아니면 현 지점에서 실행을 중단하고 반복문의 증감식으로 이동한다.
  if(string[i] !== search) continue;
  count++;
}
console.log(count); // 3

// 참고로 String.prototype.match 메서드를 사용해도 같은 동작을 한다.
const regexp = new RegExp(search, 'g');
console.log(string.match(regexp).length);  // 3