JavaScript 제어 흐름(Flow Control)

제어 흐름(Flow Control)

개발자가 코드를 작성하여 명령을 내리면 컴퓨터는 이를 수행한다.

그리고 컴퓨터는 특정 trigger로 시작하여 종료될때까지의 흐름을 상황별로 제어한다.

이렇게 명령형 프로그램의 개별 명령문, 명령 또는 함수 호출이 실행되거나 평가되는 순서를 제어 흐름이라고 한다.

 

제어 흐름에는 다음 다섯 가지의 종류가 존재한다.

• goto: 다른 구문에서 시작
• choice: 일부 조건이 충족되는 경우에만 일련의 명령문 실행 (if-else, switch)
• loop: 어떤 조건이 충족될 때까지 일련의 명령문을 0회 이상 실행 (Collection loop, General lopp)
• continue: 현재 실행 구문에서 떨어진 한 구문의 집합을 실행 (Loop continuation)
• break: 프로그램 실행을 중단 (Loop early exit, 함수 실행 정지)

표현식(Expression)과 문(Statement)

표현식이란 어떤 값으로 이행되는 임의의 유효한 코드 단위이다.

표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조하며 값으로 평가될 수 있는 문은 모두 표현식이다.

 

문이란 프로그램을 구성하는 기본 단위, 최소 실행 단위이다.

선언문, 할당문, 제어문, 반복문, 블럭문 등이 존재한다.

 

자바스크립트에서 제공하는 제어문

• choice: if...else, switch
• loop: break(Loop early exit), continue(Loop continuation)
• subroutine exit: return
• non-local control flow: try...catch, throw, generator, async

자바스크립트에서 제공하는 반복문

• loop
  • Conditional loop: while, do...while
  • General loop: for
  • Collection loop: for...in, for...of

조건문

조건문은 일부 조건이 충족되는 경우에만 일련의 명령문을 실행한다.

자바스크립트에서는 if...else, switch를 통해 조건문을 사용할 수 있다.

 

• if...else

논리조건의 참/거짓에 따라 명령문을 실행해야 할 경우 사용된다

논리조건이 참일 경우 if문이 실행되고 거짓일 경우 else문이 실행된다.

else if 를 통해 논리조건을 여러 개로 추가할 수도 있고, if 문 내에 다른 if문을 사용하여 중첩할 수도 있다.

function isOddEven(num) {
  if (num % 2 === 0) {
    console.log("Even");
  } else {
    console.log("Odd");
  }
}

isOddEven(3); // Odd
isOddEven(4); // Even

• switch

switch문은 switch에 명시된 표현식을 평가한 후 그 값과 case 라벨을 비교하여 일치하는 case의 명령문을 실행한다.

일치하는 case문이 없는 경우 default의 명령문이 실행되도록 할 수도 있다.

let a = 3;
switch (a) {
  case 1:
    console.log(1);
  case 2:
    console.log(2);
  case 3:
    console.log(3);
  default:
    console.log("default");
}

// output
// 3
// default

조건부 루프 (Conditional loop)

조건부 루프는 일부 조건이 변경될 때까지 루프를 반복하여 명령문을 실행한다.

조건은 시작할 때 평가될 수도 있고, 마지막에 평가될 수도 있다.

시작할 때 조건이 평가되는 경우 조건에 따라 본문은 실행되지 않고 생략될 수 있고,

마지막에 조건이 평가되는 경우 본문은 반드시 한 번 이상 실행된다.

 

• while

while문은 시작할 때 조건을 평가하는 조건부 루프로 조건이 true인 동안 루프를 반복한다.

종료될 수 있는 조건이 아닌 경우 while문이 무한히 실행되는 무한 루프에 빠질 수 있기 때문에 주의해야 한다.

let a = 1;
while (a < 3) {
  a++;
  console.log(a);
}

// output
// 2
// 3

• for

for문은 특정 부분의 코드가 반복적으로 수행될 수 있도록 하며, 언어별로 지원하는 형식이 있다.

자바스크립트에서 [초기화-조건식-증감문] 형식으로 사용할 수 있다.

 

[초기화-조건식-증감문]

초기화: loop 내에서 사용할 loop 변수를 초기화한다.

조건식: loop 내 코드 실행 전, 조건을 평가하여 loop를 지속할지 판단한다.

증감문: loop 내 코드 실행 후, 실행되는 문장이다.

예를 들어 for(let i = 0; i < 10; i++)은 i가 0부터 10보다 작을 때까지 i를 키워가며 for문이 실행된다.

loop 변수의 비교 및 증감을 위한 별도 문법을 명시해야 하며, 명시적으로 카운트를 관리해야 한다.

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

// output
// 0
// 1
// 2

 

• foreach loop

foreach 루프는 컬렉션 안의 항목들을 횡단하는 제어흐름문이다.

앞선 for문과 다르게 명시적으로 루프변수(카운터)를 관리하지 않으며 잠재적인 순환 횟수 오류를 예방한다.

자바스크립트에서 for...of, for...in 형식으로 사용할 수 있다.

 

for...of
for...of는 for ([변수] of [object])와 같은 구조로 반복 가능한 객체를 통해 반복하는 루프를 만든다.

예를 들어 for (const i of "apple")은 apple의 a, p, p, l, e의 반복 가능한 객체의 값을 반환한다.

const foo = ["a", "b", "c"];

for (const i of foo) {
  console.log(i);
}

// output
// a
// b
// c

 

for...in

for...in은 for([변수] in [object])와 같은 구조로 객체의 열거속성을 통해 지정된 변수를 반복한다.

그렇기 때문에 보통은 열거 가능한 object를 열거할 때 사용한다.

const foo = {
  apple: "red",
  banana: "yellow",
};

for (let key in foo) {
  console.log(key);
}

// output
// apple
// banana