Control flow statement

Before start

Control flow는 흐름을 제어한다는 뜻이다. 이 때 흐름은 코드의 실행 흐름을 이야기한다. 즉, control flow statement는 코드의 실행 흐름을 제어하는 statement(문)를 말한다.

 

+) statement는 한번에 실행되는 코드의 단위를 말한다. 

+) expression은 값을 생성하는 statement를 말한다. 즉 statement라는 큰 범위 안에 expression이 속해있는 것이다. 

Conditional Statement

코드 실행의 흐름을 제어하는 방법 중 하나는 조건문을 이용하는 것이다. 내가 작성한 조건에서 true값을 생성하면 코드를 실행하고, false값을 생성하면 코드를 실행하지 않게 함으로써 코드의 실행 흐름을 제어할 수 있다.

if( condition ) { ... }

가장 흔한 조건문의 형태이다. condition에는 expression을 작성하고, 이 expression에 logical operator가 자주 사용되는 것을 이전 챕터에서 살펴보았다. condition에서 생성되는 값이 true이면 { bracket } 안에 작성된 코드를 실행한다.

else if(another condition) {...} 또는 else {...}와 결합하여 사용할 수도 있다. 

switch( expr ) { case... case... }

expr에서 생성되는 값이 case와 matching 되는지를 평가하고, matching되는 case를 찾으면, 그 case에 작성된 statement와 그 case 이후에 작성된 모든 case의 statement를 실행한다. 만약 해당하는 case에 작성된 statement 만을 실행시키고 싶다면 다음과 같이 모든 statement의 마지막 line에 break를 작성해야 한다. default를 작성하면 어떤 case에도 해당하지 않을 때 실행할 코드를 정할 수 있다. 

 

+) switch 문을 함수 내부에서 작성한다면, break를 사용하지 않고 return 키워드를 사용할 수 있다(함수 실행 중 return을 만나면, 나머지 함수 코드를 실행하지 않은 채 함수를 종료하기 때문). 

let fruit = 'apple'; 

switch(fruit) {
  case 'lemon' :
    console.log('🍋') ;
    break; 

  case 'apple' :
    console.log('🍎'); 
    break; // 만약 break를 작성하지 않는다면, 🍎가 console에 출력된 후에 🥝도 출력된다. 

  case 'kiwi' :  
   console.log('🥝'); 
    break; 

  default : 
    console.log('not fruit'); 
    break;
}

Ternary operator | ?

먼저 Ternary operator 라는 말은 세 개의 피연산자를 필요로 하는 연산자라는 뜻이다. JS에서 세 개의 피연산자를 필요로하는 연산자는 '?' 연산자 뿐이라, ternary operator라고 부르는 경우가 많은 것 같다. 이 Ternary operator의 진짜 이름은 conditional operator이다. 조건문 연산자라는 뜻이다. 

 

condition ? exprIfTrue : exprIfFalse

 

condition의 평가 결과가 truthy 하면 expreIfTrue에서 생성되는 값을, falsy하면 exprIfFalse에서 생성되는 값을 반환한다. 

 

let greeting = function(person) {
    let name = person ? person.name : `stranger`;
    return `hello, ${name}`;
}

console.log(greeting({name: `Alice`}));  // "hello, Alice"
console.log(greeting(null));             // "hello, stranger"

 

greeting은 person이라는 인자를 받는 함수를 저장하고 있는데, 전달받은 값이 truthy하면 person의 name이라는 값을 name 변수에 저장하고, 전달받은 값이 falsy하면 staranger라는 문자열을 name에 저장한다. 

Loop Statement

코드의 실행 흐름을 제어하는 두 번째 방법에는 반복문을 이용하는 것이 있다. 반복문은 같은 코드를 여러번 실행하고 싶을 때 작성한다. 

for( declaration; condition; increment or decrement ) { ... }

가장 흔한 반복문의 형태는 for문을 이용하는 것이다. for statement는 condition이 truthy하면 { ... } 안의 코드를 실행한다. for statement를 작성하면 어떤 일이 일어날까?

 

1. declaration statement 실행 // 한 번만 실행
2. condition 확인 // 2, 3을 반복 실행
3. truthy 하면 {...} 실행, falsy하면 중지
   • {...} 실행 뒤 increment or decrement 실행

while( condition ) { ... }  & do{ ... } while( condition )

while(condition) {...}은 조건이 truthy할 때 코드를 반복적으로 실행하고, do{...} while(condition)은 코드를 실행한 뒤에 조건을 확인하고, 조건이 truthy 하면 코드를 반복 실행한다. 만약 condition이 falsy하면 while statement의 경우에는 아무것도 실행하지 않고 반복문을 종료하지만, do-while의 경우 일단 코드를 한번 실행한 뒤에, condition을 확인하고 반복문을 종료한다.