클라우딩 어플리케이션 엔지니어링 TIL Day 10 (2)

# flow control

컴퓨터의 기본 동작을 생각해보자

사용자는 컴퓨터에게 명령하고, 컴퓨터는 이를 수행한다

=> 개발자는 컴퓨터에게 무언가 명령하고, 컴퓨터는 이를 수행한다

=> 특정 trigger로 시작되어 종료되기 까지의 흐름이 존재한다

=> 컴퓨터는 이 흐름을 상황별로 제어해야 한다

 

# flow control 이란?

제어흐름, 흐름제어

명령형 프로그램의 개별 명령문, 명령 또는 함수 호출이 실행되거나 평가되는 순서

• goto : 다른 구문에서 시작, 권장 X
• choice : If-else, switch
• loop : Collection loop, General loop
• continue : Loop continuation
• break : Loop early exit, 함수 실행 정지

---

# 표현식과 문의 이해

#표현식 expression

어떤 값으로 이행되는 임의의 유효한 코드 단위, 값으로 평가될 수 있는 문은 모두 표현식

 

# 문 statement

프로그램을 구성하는 기본 단위, 최소 실행 단위 == 명령문

선언문, 할당문, 제어문, 반복문, 블럭문 등

• 블럭문 : 명령문들을 그룹으로 묶을 수 있는 블럭문, {} 으로 묶어서 표현
• 제어문 : If... else, switch, while, do... while, for, for...in, for...of, break, continue, return, try... catch, throw, generator, async
• 조건문
  • If...else (논리조건의 참/거짓에 따라 명령문 실행하는 경우)
  • switch (switch에 명시된 표현식을 평가한 후, 평가된 값과 case 라벨 값을 비교하여 일치하는 case의 명령문을 실행, 명시적으로 케이스 명령문 마지막에 return이나 break를 작성해야 해당 케이스를 실행한 후 빠져나올 수 있다)

//if else 문
let cnt = 10;

if (cnt % 2 === 0) {
  console.log("짝수");
} else {
  console.log("홀수");
}

//switch문
switch (cnt) {
  case 1:
    console.log("1입니다");
    break;
  case 5:
    console.log("5입니다");
    break;

  case 10:
    console.log("10입니다");
    break;

  default:
    break;
}

if~else 문

switch문

• 조건부 loop : 일부 조건이 변경될 때까지 루프를 반복하는 구조, 시작 / 마지막에 조건 평가
  • while문 : 시작할 때 조건 평가, while(표현식) { ...명령문...};
  • do..while문 : 마지막에 조건 평가, 본문 항상 한번 이상 실행, do { ...명령문 ... } while(표현식);

//while문
let cnt = 0;

while (cnt < 5) {
  cnt++;
  console.log(cnt);
}

console.log("끝");

// do while문
let cnt = 0;

do {
  cnt++;
  console.log(cnt);
} while (cnt < 5);

console.log("끝");

# For loop 초기화 - 조건식 - 증감문

for([초기문]; [조건문]; [증감문];) { .... }

▶ 초기문 : loop 내에서 사용할 loop 변수 초기화

▶ 조건문 : loop 내 코드 실행 전, 조건을 평가하여 loop를 지속할지 판단

▶ 증감문 : loop 내 코드 실행 후, 실행되는 문장

 

# Foreach 루프

컬렉션 안의 항목들을 횡단하는 제어흐름문

For문과 다르게, 명시적으로 카운터를 관리하지 않는다

코드의 가독성을 높인다

▶for ... of문 : 반복 가능한 객체 iterator를 통해 반복하는 루프를 만든다

const str = "hijieun";

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

▶for ...in문 : 객처의 열거속성을 통해 지정된 변수를 반복한다. 객체의 key값을 반환한다

const str = {
  apple: "good",
  banana: "nice",
};

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

 

# break문

프로그램 실행 중단 시 사용한다

반복문, switch 문을 종료시킬 때 사용한다

가장 가까운 while, do-while, for, swtich문 종료 후 다음 명령어로 넘어간다

const foo = () => {
  let cnt = 0;
  while (cnt < 3) {
    cnt++;
    console.log(cnt);
    break;
  }
};

foo();

# continue문

현재 실행 구문에서 떨어진 한 구문의 집합을 실행한다

while, do...while, for문을 다시 시작하기 위해 사용한다

전체 루프 실행을 종료시키지는 않는다

const foo = () => {
  let cnt = 0;
  while (cnt < 3) {
    cnt++;
    console.log(cnt);
    continue;
    console.log("안녕");
  }
};

foo();

---

# 예외 처리

# 예외 상황이란?

- 런타임 때 발생할 수 있는 의도치 않은 상황

- 흐름 제어 시 발생할 수 있는 예외 상황이기 때문에 코드 레벨에서 대응해야 한다

- 예외 상황을 핸들링하지 않는다면 기능 동작, 어플리케이션 shutdown

 

# 예외의 종류

ECMAScript Error

자바스크립트 언어에서 발생하는 Error Type

▶ Range Error : 값이 집합에 없거나 허용범위가 아닐 때

▶ Reference Error : 존재하지 않는 변수 참조 시

▶ Syntax Error : 문법 오류 시

▶ TypeError : 값이 기대한 자료형이 아니여서 연산이 불가능할 때

 

DOMException

Web API 레벨에서 발생하는 Error Type

▶Network Error : 네트워크 에러 발생 시

▶AbortError : 작업이 중단되었을 떄

▶TimeoutError : 응답 시간 초과 

 

이 밖에도 개발자도 예상치 못한 수많은 예외상황이 있다

따라서 개발자가 직접 예외 상황을 예상하여 핸들링 할 수 있으며 자바스크립트의 Error 객체를 사용하여 직접 에러를 정의내리고 핸들링 할 수 있다

 

# throw문

예외를 발생시킬 때 사용 -> catch블럭에서 에러 객체 핸들링

 throw문 이후의 명령문은 실행되지 않는다

const foo = () => {
  console.log(1);
  throw "여기가 문제다";
  console.log(2);
};

foo();

[Running] node "c:\Users\aldls\Desktop\vscode\JS\exam01\main.js"
1

c:\Users\aldls\Desktop\vscode\JS\exam01\main.js:3
  throw "여기가 문제다";
  ^
여기가 문제다
(Use `node --trace-uncaught ...` to show where the exception was thrown)

# Error 객체

사용자가 직접 Error 객체를 정의하여 사용할 수 있다

▶ new Error('에러 메시지')

▶ Error.message

▶ Error.name

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

  throw customError;

  console.log(2);
};

foo();

[Running] node "c:\Users\aldls\Desktop\vscode\JS\exam01\main.js"
1
c:\Users\aldls\Desktop\vscode\JS\exam01\main.js:7
  throw customError;
  ^

ErrorName: 에러 발생!!!!
    at foo (c:\Users\aldls\Desktop\vscode\JS\exam01\main.js:3:23)
    at Object.<anonymous> (c:\Users\aldls\Desktop\vscode\JS\exam01\main.js:12:1)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
    at node:internal/main/run_main_module:23:47

Node.js v20.9.0

# try ... catch

예외가 발생하면

1. 현재 함수의 실행 중지

2. 에러객체와 함께 에러가 throw

3. 호출자 사이에 catch 블록이 있으면 catch 블록으로 전달, catch블록이 없으면 프로그램 종료

- 에러를 catch하여 프로그램이 종료되지 않도록 해야 한다

- 예외 처리를 담당하는 핸들러를 찾기 위해 순서대로 콜스택(call stack)을 거슬러 올라가 올바른 핸들러를 찾아내어 그곳에서 처리되도록 한다

 

콜스택 Call Stack이란?

- 스택 자료구조 (First In Last Out)

- 자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트를 저장하는 자료구조

- 함수를 호출할 때마다 스택이 쌓이고, 함수의 실행이 종료되면 콜스택에서 제거한다

# try...catch 문

- 블록문 내에서 예외가 발생할 경우, 예외 처리를 맡을 하나 이상의 반응 명령문을 지정

- try블록의 명령문 중 하나가 실패하면 catch로 제어권이 넘어간다

- try블록의 명령문 중 하나가 성공하면 catch로 제어권이 넘어가지 ㅇ낳는다

- catch블럭에서 인자로 throw된 catchID를 참조할 수 있다

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

# finally 블록

try블록에서 예외 상황이 발생하지 않더라도 실행된다

- 예외 사항 O : try -> catch -> finally

- 예외 사항 X : try -> finally

그럼 try ...catch문을 언제 사용해야 할까?

• 외부에 의존되어서 구현된 로직에서 사용(예기치 못한 상황)
• network 에러 발생 시
• 에러 감지해야 하는 비즈니스 로직
• 유저가 잘못된 데이터를 입력하는 경우

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

const bar = (value) => {
  try {
    foo(value);
  } catch (catchID) {
    console.log("bar - catch", catchID);
    return catchID;
  } finally {
    console.log("finally");
  }
};

const baz = (value) => {
  try {
    foo(value);
  } catch (catchID) {
    console.log("baz - catch", catchID);
    return catchID;
  } finally {
    console.log("finally");
  }
};

bar(2);

[Running] node "c:\Users\aldls\Desktop\vscode\JS\exam01\main.js"
bar - catch 2
finally

---

# 새로 알게 된 점

자바스크립트의 기본 문법을 제대로 복습하고 넘어가는 시간이었다

그 중에서도 특히 여러 조건문과 try..catch문이 기억에 남는다

언어마다 비슷하면서도 다른듯한 조건문을 확실하게 외우고 적절하게 사용하는 능력이 굉장히 중요한 것 같다

for..of와 for..in은 자바스크립트가 가진 특별한 문법인 것 같다

잘 사용하면 굉장히 편리하고 유용한 문법이니 이번 기회에 확실하게 배우고 넘어가야겠다

try..catch문은 아직 헷갈린다 예외사항을 처리하기 위해서 사용하는 구문이라는 것은 알겠는데

왜 위의 코드를 실행하면

bar - catch 2

finally

이렇게 나오는걸까? 이해가 될 때까지 복습해봐야겠다

많은 것을 배우고 복습한 시간이었다!