[JavaScript] 기초- 데이터처리2

flow control (제어흐름, 흐름제어)

 

명령형 프로그램의 개별 명령문, 명령 또는 함수 호출이 실행되거나 평가되는 순서로, 5가지의 제어흐름이 있다.

 

• goto: 다른 구문에서 시작 -> 개발 설계에 오류를 발생시킬 수 있어 권장하지 않음!
• choice: 일부 조건이 충족되는 경우에만 일련의 명령문 실행 -> If-else, switch
• loop: 어떤 조건이 충족될 때까지 일련의 명령문을 0회 이상 실행 -> Collection loop, General loop
• continue: 현재 실행 구문에서 떨어진 한 구문의 집합을 실행 -> Loop continuation
• break: 프로그램 실행을 중단 -> Loop early exit, 함수 실행 정지

 

표현식과 문

 

표현식 (expression)

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

 

문 (statement)

• 프로그램을 구성하는 기본 단위, 최소 실행 단위 -> 명령문이라고 말하는 것과 동일한 개념
• 선언문, 할당문, 제어문, 반복문, 블럭문, ...

 

- 블럭문 (block statement)

• 중괄호로 묶어서 표현
• 명령문들을 그룹으로 묶을 수 있음

{
    const foo = 'apple';
    function A() {
        return 1;
    }
}

 

 

- 제어문 (control flow statement)

 

조건문 choice 

• if-else
• switch

if-else

if-else 문에서 false 로 평가되는 값들: false, undefined, null, 0, NaN, "" (falsy 값)

 

중첩 if-else 문(nested conditional)작성도 가능하지만, 가독성이 좋지 않기 때문에 권장하지 않음.

대신 빠르게 조건문을 끝낼 수 있는 조건부터 작성하는 Guard Clauses 형태로 구현하는 것이 좋음. 

 

switch

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

평가된 값에 해당하는 case 문이 없는 경우를 대비해 default 작성

라벨별로 return, break 문을 작성하지 않으면 종료되지 않고 밑으로 계속 내려가기 때문에 해당 케이스만을 실행하고 종료되길 원하면 return, break 를 꼭 작성해주어야 함. 

switch (표현식) {
    case 라벨1:
        ...
    case 라벨2:
        ...
    default: // default 문은 라벨없이 작성
        ...
}

 

 

반복문 Loop

• Conditional loop: while, do-while
• For loop: for
• Collection loop(Foreach loop)

 

Conditional loop

 

while 은 시작할 때 조건을 평가 -> 본문이 실행되지 않을 수도 있음

do-while 은 마지막에 조건을 평가 -> 때문에 본문은 항상 한번 이상 실행됨

 

 

For loop

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

 

 

Collection loop (Foreach loop)

• for...of 
• for...in

for 문과 다른 점?

명시적으로 카운터를 관리하지 않아도 됨.

 

for...of 문은 반복 가능한 객체(iterator)를 통해 반복하는 루프를 만듦.

변수는 반복 가능한 객체의 값을 반환하며, 여기서 말하는 반복 가능한 객체란 Array, Set, String 등을 말한다. 

for ([변수] of [object]) { ... }

 

for...in 문은 객체의 열거속성(enumerable)을 통해 지정된 변수를 반복함.

변수는 객체의 key 값을 반환한다. (여기서 말하는 객체의 key 값은 객체의 속성값을 의미한다)

for ([변수] in [object]} { ... }

 

 

- break 문

 

가장 가까운 반복문, switch 를 종료시킬 때 사용 -> 종료시키고 다음 명령어로 넘어감

 

 

- continue 문

가장 안쪽의 반복문을 종료시키고 다음 루프를 실행시킨다. (전체 루프 실행 종료가 아님)

 

while 문에서 continue 를 쓰면 조건문으로 이동하고,

for 문에서 continue 를 쓰면 증감문으로 이동한다.

 

 

 

예외 처리하기

 

예외 상황 (Exception)

 

런타임에 발생할 수 있는 의도치 않은 상황으로, 예외 상황을 핸들링하지 않는다면 기능이 동작하지 않거나 어플리케이션이 shut down 될 수 있다. 

 

예외 상황이 발생하는 경우는 다양하지만 개발자가 컨트롤 가능한 예외 상황인 코드 레벨에서의 문제를 알아보자.

• 코드 레벨에서의 문제
• 하드웨어, 디바이스의 문제
• 라이브러리 손상
• 사용자의 입력 실수

 

예외의 종류

• ECMAScript Error: 자바스크립트 언어에서 발생하는 에러
• DOMException: Web API 레벨에서 발생하는 에러
• 그 외 예외

 

ECMAScript Error

 

아래의 에러들은 자바스크립트에서 객체로 제공되고 있고, 해당 객체들은 자바스크립트의 에러 객체를 상속 받고 있음

• RangeError: 값이 없거나, 허용 범위가 아닐 때
• ReferenceError: 존재하지 않는 변수 참조 시
• SyntaxError: 문법을 지키지 않았을 때
• TypeError: 값이 기대한 자료형이 아니여서 연산이 불가능할 때
• ...

 

DOMException

 

• NetworkError: 네트워크 에러 발생 시
• AbortError: 작업이 중단되었을 때
• TimeoutError: 작업 시간이 초과되었을 때
• ...

 

그 외

 

개발자가 직접 에러를 핸들링 해야함 -> 자바스크립트에서 Error 객체를 사용해서 직접 에러를 정의 내리고 핸들링해야 함

 

 

throw 와 Error 객체

 

- throw 문

예외를 발생시킬 때 사용하는 제어문으로, 발생한 에러는 catch 블럭에서 핸들링할 수 있다.

 

예외가 발생했을 때?

1. 현재 함수 실행 중지

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

3. 제어흐름은

• 호출자 사이에 catch 블록이 있음 -> catch 블록으로 전달
• 호출자 사이에 catch 블록 없음 -> 프로그램 종료

const foo = () => {
    console.log(1);
    throw 'Error'; // 에러 throw -> 에러 발생
    console.log(2); // throw 이후 명령문은 실행되지 않음
}

foo();

 

 

- Error 객체

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

(참고로 에러설명은 message 말고 에러를 생성할 때 new Error('에러설명') 이렇게 적어도 메세지에 들어간다. )

 

이전에 ECMAScript Error 는 에러 객체를 상속 받아 미리 에러 이름과 메세지를 정의한 객체이다.

const foo1 = () => {
    console.log(1);
    const customError = new Error();
    customError.name = '에러이름'
    customError.message = '에러발생'
}

 

 

 

try-catch 문

 

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

 

여기서 콜 스택(call stack) 이란?

• 자바스크립트 코드가 실행되며 생성되는 실행컨텍스트를 저장하는 자료구조
• 함수를 호출할 때마다 스택이 쌓이고 함수의 실행이 종료되면, 콜스택에서 스택을 제거

에러가 throw 되면 콜스택을 확인하여 핸들링한다

-> 스택에 쌓여있는 실행 컨텍스트를 확인해서 catch 문이 있는지 확인하고 catch 문으로 예외 상황을 throw

 

 

try-catch

 

try 블록의 명령문 중 하나가

• 실패하면, catch 로 제어권이 넘어감
• 성공하면, catch 로 제어권이 넘어가지 않음

finally 는 예외 상황이 발생하든 안하든 항상 실행된다.

• 예외 상황이 발생되면 try -> catch -> finally
• 예외 상황이 발생되지 않으면 try -> finally

아래의 코드처럼 catch 문 안에 return 코드가 있더라도 잠시 중단시키고 finally 블록으로 갔다가 안에 코드 실행 후 다시 돌아와서 return 을 실행한다. 

try {
    // 명령문 -> 성공을 바라는 코드
} catch (e) {
    // try 블록에서 발생하는 예외를 여기서 처리
    return 
} finally {
    // 무조건 실행되는 부분, 꼭 있어야하는 부분은 아니므로 필요하다면 사용
}

 

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

(쉽게 말하면, 한 번 예외가 처리되면 같은 예외가 다른 catch 블록에서 처리되지 않는다는 소리)