[JavaScript] flow control

🤔 Flow constrol (제어흐름, 흐름제어) 란?

• 명령형 프로그램의 개별 명령문, 명령 또는 함수 호출이 실행되거나 평가되는 순서
• 5가지 제어흐름의 종류
  • goto : 다른 구문에서 시작 -> 개발 오류 발생할 수 있음. 
  • choice : 일부 조건이 충족되는 경우에만 일련의 명령문 실행 -> If-else / switch
  • loop : 어떤 조건이 충족될 때까지 일련의 명령문을 0회 이상 실행 -> Collection loop / General lop
  • continue : 현재 실행 구문에서 떨어진 한 구문의 집합을 실행 -> Loop continuation
  • break : 프로그램 실행을 중단 => Loop earyl exit, 함수 실행 정지 ]

---

표현식과 문의 개념

- 표현식 

• 어떤 값으로 이행되는 임의의 유효한 코드 단위
• 표현식이 평가되면, 새로운 값을 생성하거나 기존 값을 참조
• 값으로 평가될 수 있는 문은 모두 표현식
• 리터럴 표현식, 함수 표현식, ... 

const 변수명 = 'apple';
const 함수 = (인자) => {
	if(인자 === 'apple'){
    	return '🍎';
    } else {
    	return '❌';
    }
};
함수('apple')

- 문 statement

• 프로그램을 구성하는 기본 단위, 최소 실행 단위
  • == 명령문
• 선언문, 할당문, 제어문, 반복문, 블럭문 ...

let 변수명; //변수 선언문
변수명 = 'apple'; //할당문
function 함수() {} //함수 선언문
if(true) { //조건문
	console.log('true');
}
while(false){ //반복문
	console.log('while');
}

• 블럭문 block statement
  • 명령문들을 그룹으로 묶을 수 있는 블럭문
  • 한쌍의 중괄호로 묶어서 표현

{
	123;
    const foo = 'apple';
    function 함수() {
    	return 1;
    }
}

• choice 
  • If..else
    • 논리조건의 참/거짓에 따라 명령문을 실행해야 할 경우 사용
    • if문의 논리조건에는 true, false로 평가할 수 있는 표현식 대입가능
    • 논리조건 참인 경우, if블럭문 실행 / 논리조건이 거짓인 경우, else블록문 실행
    • 해당값은 false로 평가 : false, undefined, null, 0, Nan, ""(empty string)
    • 실제 로직을 구현할 때 중첩 if문을 사용할 수도 있음
    • 마틴 파울러의 리팩토링 자료
      • nested conditional 지양
      • Guard Clauses 형태로 구현 ✔️

//nested conditional (지양)
const 조건문 = (인자) => 인자 === 1;
const 조건문2 = (인자) => 인자 === 2;

const 함수 = (인자) => {
	if (조건문(인자)) {
    	return 1;
    } else if (조건문2(인자)) {
    	return 2;
    } else return 3;
}; 

함수(2);

//Guard Clauses (권장)
const 조건문 = (인자) => 인자 === 1;
const 조건문2 = (인자) => 인자 === 2;

const 함수 = (인자) => {
	if (조건문(인자)) return 1;
	if (조건문2(인자)) return 2;
    return 3;
}; 

함수(2);

• switch
  • switch와 표현식을 작성, 라벨이 포함된 case절을 작성
  • default는 라벨없이 작성

const foo = (parameter) => {
	switch(parameter){
    	case 1:
        	return 1;
        case 2:
        case 3:
        case 4:
        	return 4;
        default:
        	return 0;
    }
}

foo(3) __ 23

• Loop(interations)
  • Loop early exit : break
  • Loop continuation : continue
  • Conditional loop 
    • 대부분의 프로그래밍 언어에는 일부 조건이 변경될 때까지 루프를 반복하는 구조가 있다.
    • 종료될 수 있는 조건이 아닌 경우, 무한 루프에 빠질 수 있다. 
      • 시작할 때 조건을 평가 (본문 생략 가능)
        • while

let count = 0;
while(count <3){
	count++;
    console.log(count);
}

console.log('end');

>> 1 2 3 'end'

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

console.log('end');

>> 'end'

• 마지막에 조건을 평가 (본문 한 번 이상 실행) 
• • do...while

let count = 0;
do {
	count++;
    console.log(count);
} while(count<3);

console.log('end');

>> 1 2 3 'end'


let count = 3;
do {
	count++;
    console.log(count);
}while(count <3);

console.log('end');

>> 'end'

• General loop
  • for
    • 특정 부분의 코드가 반복적으로 수행될 수 있도록 한다
    • 언어별로 지원하는 형식이 있다.
      • [초기화-조건식-증감문]의 형식 (for(let 루프변수 = 0; 루프변수 <3; 루프변수++))
        • C언어 유래, while문과 다르게 해당 루프와 관련된 loop 변수 존재
          • loop변수의 비교 및 증감을 위한 별도 분법 명시 필요
          • ==loop변수를 활용해 명시적으로 카운트를 관리 필수
        • 초기문: loop 내에서 사용할 loop변수를 초기화
        • 조건문: loop 내 코드 전, 조건을 평가하여 loop를 지속할지 판단
        • 증감문: loop 내 코드 후, 실행되는 문장(루프변수 증감 용도)
      • 집합 loop형식 (Foreach loop)
• Collection loop
  • 컬렉션 안의 항목들을 횡단하는 제어흐름문
  • For문과 다르게, 명시적으로 카운터(루프변수)를 관리하지 않는다.
  • 잠재적인 순환 횟수 오류를 예방 (off-by-one error)
    • 코드를 더 단순하게 읽힐 수 있게 해준다. 
  • 자바스크립트 collection loop 
    • for...in
      • 객체의 열거속성(enumerable)을 통해 지정된 변수를 반복한다.
      • for([변수] in [object]) { ... } //변수는 객체의 key값을 반환
    • for...of
      • 반복 가능한 객체(iterator)를 통해 반복하는 루프를 만든다.
      • for([변수] of [object]) { ... } //변수는 반복 가능한 객체의 값을 반환(Array, Set, String, ...)

const foo = 'apple';

for(const i of foo){
	console.log(i);
}
>> 'a' 'p' 'p' 'l' 'e'

const foo = new Set();
foo.add('apple');
foo.add('banana');

for(const i of foo){
	console.log(i);
}
>> 'apple' 'banana'

const foo = {
	apple: '🍎',
    banana: '🍌',
};
for(let key in foo){
	console.log(key);
}

>> console.log(key);

• Subroutine exit : return
  • break문
    • 제어흐름의 종류 중 프로그램 실행 중단 종류
    • 반복문, switch문을 종료시킬 때 사용
    • 가장 가까운 while, do-while, for, switch문 종료하고 다음 명령어로 넘어감
  • continue문
    • 제어흐름의 종류 중 현재 실행 구문에서 떨어진 한 구문의 집합을 실행 종류에 속한다.
    • while, do...while, for문을 다시 시작하기 위해 사용
    • 가장 안쪽의 while, do-while, for문을 둘러싼 반복을 종료, 다음 loop 실행
    • 전체 루프 실행을 종료하지 않는다.
      • while: 조건문으로 이동
      • for: 증감문으로 이동
• Non-local control flow 
  • try...catch
  • throw
  • generator
  • async

예외상황 Exception

• - 런타임 때 발생할 수 있는 의도치 않은 상황을 뜻한다.
• - 흐름 제어 시 발생할 수 있는 예외 상황이므로, 이를 이해하여 코드 레벨에서 대응해야 한다.
  • handling: 대응한다의 의미
  • control: 예상하고 직접 조작한다는 의미
• 예외 상황을 핸들링하지 않는다면, 기능이 동작하지 않거나 어플리케이션이 shut down될 수 있다. 
• 예외의 원인
  • 언어 레벨~ 외부요인에 의한 예외 상황까지 다양하다.
    • 코드 레벨에서의 문제 / 하드웨어, 디바이스의 문제 / 라이브러리 손상 / 사용자의 입력 실수 ...
• 예외의 종류
  • ECMAScript Error: 자바스크립트 언어에서 발생하는 Error Type
    • RangeError 값이 집합에 없거나, 허용범위가 아닐 때
    • ReferenceError 존재하지 않는 변수 참조 시
    • SyntaxError 문법을 지키지 않았을 떄
    • TypeError 값이 기대한 자료형이 아니여서 연산이 불가능할 때 
  • DOMException: Web API 레벨에서 발생하는 Error Type
    
    • NetworkError 네트워크 에러 발생 시
    • AbortError 작업이 중단되었을 때
    • TimeoutError 작업 시간이 초과되었을 때 
  • 그 외 예외
    • 개발자도 예상치 못한 예외 상황
    • 개발자가 직접 예외 상황을 예상하여 핸들링 할 수 있다.
    • 자바스크립트의 Error객체를 사용하여 직접 에러를 정의내리고 핸들링 할 수 있다.
  • throw문
    • 예외를 발생시킬 때 사용, catch블럭에서 에러 객체 핸들링
    • 예외가 발생하면
      • 1. 현재 함수의 실행이 중지
      • 2. 에러객체와 함께 에러가 throw
      • 3. 제어흐름은
        • 호출자 사이에 catch블록이 있으면, catch블록으로 전달
        • 호출자 사이에 catch블록이 없으면, 프로그램 종료
    • 예외를 발생시키기 위하여 throw문 사용 -> throw 표현식
    • throw문 이후의 명령문은 실행되지 않는다.

const foo = () => {
	console.log(1);
    thorw '여기';
    console.log(2);
}

foo();

>> Error: 여기
>> 1

• Error 객체
  • 사용자가 직접 Error 객체를 정의하여 사용할 수 있다.
    • new Error("에러 메세지")
    • Error.message
    • Error.name
  • ECMAScript 표준 내장 오류 유형이 있다.

const foo = () => {
	console.log(1);
    const customError = new Error();
    customError.name = "ErrorName";
    customError.message = '에러발생';
    
    throw customError;
    
    console.log(2);
}

foo();

>> 1
>> ErrorName: 에러발생

 

에러 catch

1. 에러가 발생하면
2. 현재 함수의 실행이 중지
3. 에러객체와 함께 에러가 throw
4. 제어흐름은
   • 호출자 사이에 catch블록이 있으면, catch블록으로 전달
   • 호출자 사이에 catch블록이 없으면, 프로그램 종료

• 에러를 catch하여 프로그램이 종료되지 않도록 해야한다. 
• 예외 처리를 담당하는 핸들러를 찾기 위해, 순서대로 콜 스택(call stack)을 거슬러 올라가 올바른 핸들러를 찾아내어 그 곳에서 처리되도록 한다. 

콜스택 call stack

• 스택 자료구조
  • 출입구가 하나인 데이터 구조(First In Last Out)
• Call stack
  • 자바스크립트 코드가 실행되며 생성되는 실행컨텍스트를 저장하는 자료구조
  • 함수를 호출할 때마다 스택이 쌓이고, 함수의 실행이 종료되면, 콜스택에서 스택을 제거하는 원리
• 에러 throw되면
  • 콜스택을 확인하여, 핸들링하고 있는 catch문이 있는 스택에서 처리 

try...catch문

• try...catch문은 블록문 내에서 예외가 발생할 경우, 예외 처리를 맡을 하나 이상의 반응 명령문을 지정
  • try 블록의 명령문 중 하나가 실패하면, catch로 제어권이 넘어간다.
  • try 블록의 명령문 중 하나가 성공하면, catch로 제어권이 넘어가지 않는다.
• catch블럭에서 인자로 throw된 catchId를 참조할 수 있다.
  • try{...} catch(catchID){...}

const foo = (value) => {
	if(value < 3) throw value;
    else console.log(value); 
};

const bar = (value) => {
	try {
    	foo(value); // 오류 throw돼서 catch문으로 넘어감
    } catch(catchID){
    	console.log('catch', catchID); 
        //>> 'catch' 2
    }
};

bar(2);

콜스택 중 하나에서 catch문에서 예외가 처리된다면, 더 상위의 콜 스택에서는 더이상 예외가 타고올라오지 않는다. 

function functionC() {
  throw new Error("폭탄 발사!"); // 여기서 예외 발생
}

function functionB() {
  try {
    functionC();
  } catch (e) {
    console.log("B에서 수습 완료: " + e.message); // 여기서 예외를 잡음!
  }
}

function functionA() {
  functionB();
  console.log("A는 아무 일 없었다는 듯이 실행됩니다."); // 실행됨!
}

functionA();

>> B에서 수습 완료: 폭탄 발사!

>> A는 아무 일 없었다는 듯이 실행됩니다. 

 

finally블록

• finally블록은 try블록에서 예외 상황이 발생하지 않더라도, 실행횐다.
• 예외상황이 발생되면: try -> catch -> finally
• 예외상황이 발생되지 않으면: try -> finally

사례
외부에 의존되어서 구현된 로직에서 사용(예기치 못한 상황 대응)

• network 에러 발생 시
• 에러를 감지해야 하는 비지니스 로직
  • 비지니스 데이터가 유요하지 않는 경우
• 유저가 잘못된 데이터를 입력한 경우