데이터 처리 flow,control

📌연산자 - 단항,연산자, 산술연산자

연산자란?

• 하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만든다.

단항 연산자

• 하나의 피연산자만 사용하는 연산
• Void, typeof, delete

산술 연산자

• 두 개의 숫자 값 을 피연산자로 받아서 하나의 숫자 값을 반환
  • 단항 산술 연산자
  • 이항 산술 연산자

단항 산술 연산자

• 단항 산술 연산자는, 1개의 피 연산자를 산술 연산하여 숫자값을 반환
• ++ 숫자 1을 증가시키고, 증가시킨 값을 암뭄적으로 할당
• -- 숫자 1을 감소시키고, 증가시킨 값을 암뭄적으로 할당
• 증가/감소 연산자: 위치에 따라 처리단계 상이

이항 산술 연산자

• 이항 산술 연산자는, 2개의 피 연산자를 산술 연산하여 숫자값을 반환한다.

📌연산자 - 관계 연산자, 비교연산자

관계연산자

• 피연산자를 비교하고, 결과가 참인지에 따라 boolean 값을 반환
• in: 객체 내에 속성이 존재할 경우 true 반환
• instanceof : 특정 객체 타입에 속하면 true를 반환

비교연산자

• 피연산자를 비교하고, 결과가 참인지에 따라 boolean 값을 반환
• 피연산자에는 숫자, 문자열,논리형,객체타입
• != 부등연산자 : 서로 다르면 true
• !== 불일치연산자 : 서로 다르고, 타입도 다르면 true
• > , >=, <, <=

📌연산자 - 이진논리 연산자, 기타 연산자들

논리 연산자

• 두개의 피연산자 중 하나를 반환
• 반환되는 값이 무조건 boolean값이 아니다.
• 단축평가 논리: 첫번째 식을 평가한 결과에 따라서, 두번째 식 평가를 실행
• A && B AND 연산자 null검사에 활용
• A || B OR 연산자 캐싱 값에 대해서도 사용

기타 연산자들

• 쉼표 연산자: 두 연산자를 모두 평가한 후, 오른쪽 피 연산자의 값을 반환
• 문자열 연산자 : 두 문자열 값을 서로 연결하여 새로운 문자열을 반환
• 옵셔널 연산자 : 객체의 속성을 참조시, 유효하지 않는 경우, 에러를 발생시키고 않고 undefined를 반환
• 할당연산자
  • 오른쪽 피연산자가 왼쪽 피 연산자에 값을 할당한다.
  • += 더하기 할당
  • -= 빼기 할당
  • *= 곱하기 할당
  • /= 나누기 할당
  • %= 나머지 할당
  • **= 거듭제곱 할당
  • &&= 논리 AND 할당
  • ||= 논리 OR 할당
• 삼항 연산자
  • 조건 연산자에 따라 두 값중 하나를 반환한다.
  • condition ? truevalue(참) : falsevalue(거짓)

📌재사용 처리기, 함수

동일한 처리를 해야 하는 경우

• a 사용자의 나이에 3살을 더해야함
• b 사용자의 나이에 3살을 더해야함
• c 사용자의 나이에 3살을 더해야함

• n번의 횟수만큼 3을 더해야하는 로직을 작성해야 함
• 중복 코드 작성
• 3살을 더하는 것이 아닌 모두 5살을 더해야 하는 경우?
• 유지보수의 편리성이 떨어짐

• 이러한 단점을 해결하기 위해서 특정 처리를 담당하는 처리기가 필요

  function addAge(age) {
    return age + 3;
  }

함수란?

• 소프트웨어에서 특정 동작을 수행하는 코드 일부분을 의미
• 외부 코드가 '호출'할 수 있는 하위 프로그램
  • 함수 외부에서 addage를 호출하는 모습
  • 자바스크립트에서는 괄호를 사용하여 호출 함수명()
• 함수의 형태
  • input 로직 처리를 위해 주입받는 데이터
  • output 로직 처리 후 반환되는 결과 데이터
  • 본문 명령문의 시퀀스로 구성
• 자바스크립트에서 함수는 객체처럼 속성과 메서드를 가질 수 있다
• 객체와의 차이점은 함수는 외부에서 호출이 가능 객체는 불가능

JavaScript 함수

• 자바스크립트에서 함수는 일급객체의 특징을 모두 갖고 있다.

일급 객체: 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

• 일급 객체는 함수의 실제 매개변수가 될 수 있다.
• 일급 객체는 함수의 반환값이 될 수 있다.
• 일급객체는 할당명령문의 대상이 될 수 있다.(변수 등에 할당 가능)
• 일급객체는 동일비교의 대상이 될 수 있다.(값으로 표현 가능)

📌JavaScript 함수의 특징

함수의 형태

• 함수 이름 : 함수의 이름.(외부에서 호출 시 이름이 사용됨)
• 매개 변수 : 함수에 전달되는 인수. 유사배열 형태
• 함수 몸체 : 명령 시퀀스들이 존재하는 블록

매개변수 와 인자의 차이

• 매개변수: 함수를 정의할 때 사용하는 변수
• 인자: 함수가 호출될 때 넘기는 값

📌함수의 사용 패턴

함수 생성 방법

1. 함수 선언문
2. 함수 표현식

• 익명 함수
• 기명 함수

3. function 생성자 함수
4. 화살표 함수 표현식

함수 사용 패턴

즉시 실행 함수

• 함수 정의와 동시에 실행
• 코드 평가 -> 코드 실행 -> 최초 1회 실행
  • 초기화 처리에 주로 사용
• 작성 방법
  • 즉시 실행할 함수 괄호로 감싸기
  • 괄호로 감싸진 함수를 실행

  (function () {
     return 1;
  }) ();

재귀 함수

• 자기 자신을 호출하는 함수
• 계속 자신을 참조하여 호출하므로, 무한히 호출될 수 있음
  • 탈출 조건을 함수 초반에 정의해야함
• 직관성이 떨어질 수 있어, 한정적 사용 권장

function foo(arg) {
 if(arg === 3) return;
}
console.log(arg);
foo(arg + 1);

foo(1);

중첩함수

• 내부 함수
• 내부 함수 내의 변수 참조 -> 부모를 포함한 외부 범위 참조 가능
• 부모함수 내의 변수 참조 -> 자식 범위 참조 불가능
• 스코프 체인

  function foo(arg) {
    function bar() {
     console.log(arg);
    }
    bar();
  }
   foo(1);

콜백함수

• 함수의 매개변수가 될 수 있다.

  • 인자로 b함수를 받은 a함수
  • a함수가 호출되는 시점에 b함수도 호출

• 특정 이벤트가 발생했을 때

• 시스템에 의해 호출되는 함수

  const foo = (arg) => {
  return arg();
  }
  
  foo(() => {
   ruturn 1;
  })

📌flow control의 이해

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

1. 버튼이 클릭이 되면
2. 만약에 버튼 옆에 체크박스가 선택이 되어있다면,
3. 버튼이 빨간색이 되고
4. 아니라면, 버튼이 파란색이 된다.

• 특정 trigger로 시작 ~ 종료되기까지 흐름 존재
• 컴퓨터는 이 흐름을 상황별로 제어해야 한다.

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

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

제어 흐름의 종류

choice : 일부 조건이 충족되는 경우에만 일련의 명령문 실행(lf-else, switch)

loop : 어떤 조건이 충족될 때까지 일련의 명령문을 0회 이상 실행(collection loop, general loop)

continue : 현재 실행 구문에서 떨어진 한 구문의 집합을 실행(loop continuation)

break : 프로그램 실행을 중단

📌표현식과 문의 이해

표현식 expression

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

문 statement

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

블럭문

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

📌choice(if-else, switch) - 조건문

조건문

• 일부 조건이 충족되는 경우에만 일련의 명령문 실명
• if... else 문
• switch 문

if else 문

• 논리조건의 참/거짓에 따라 명령문을 실행해야 할 경우 사용
• 논리조건이 참인 경우, if 블럭문 실행
• 논리조건이 거짓인 경우 ,else 블럭문 실행
• false로 평가
• false, undifined, null, 0, nan, ""

switch

• switch에 명시된 표현식을 평가한 후, 평가된 값과 case 라벨 값을 비교하여 일치하는 case의 명령문을 실행
• default 작성
• 평가된 값에 해당하는 case문이 없을 경우 default의 명령문이 실행되도록

  switch(표현식 {
   case 라벨:
       명령문
   default: 
      명령문
  }

📌conditional(조건부) loop

• 대부분의 프로그래밍 언어에는 일부 조건이 변경될 때까지 루프를 반복하는 구조가 있다.
  • 시작할 때 조건을 평가하는 타입
    • while 문
  • 마지막에 조건을 평가하는 타입
    • do while 문
      • 본문은 항상 한번 이상 실행

📌for loop

전통적인 for loop

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

초기화-조건식-증감문 의 형식

• while문과 다르게, 해당 루프와 관련된 loop 변수가 존재
• 비교 및 증감을 위한 별도 문법을 명시
• 명시적으로 카운트를 관리

  for[초기문];[조건문];[증강문];) {...}
   세미콜론으로 구분한다.

for...of 문

• 반복 가능한 객체를 통해 반복하는 루프를 만든다.
• for([변수] of[obejct]{...}
  • 변수는 반복 가능한 객체의 값을 반환한다.
  • 반복 가능한 객체: array, set, string

for... in문

• 객체의 열거속성을 통해 지정된 변수를 반복한다.
• for([변수] in [obejct]) {...}
  • 변수는 객체의 key값을 반환한다.

📌break, continue문

break

• 제어흐름의 종류 중 프로그램 실행 중단 종류
• 반복문, switch문을 종료시킬 때 사용

continue문

• 제어흐름의 종류 중 현재 실행 구문에서 떨어진 한 구문의 집합을 실행 종류에 속한다.
• while, do...while, for 문을 다시 시작하기 위해 사용한다.
• 가장 안쪽의 while, do-while, for문을 둘러싼 반복을 종료하고, 다음 loop를 실행한다.
• 전체 루프 실행을 종료하지 않는다.
  • while: 조건문으로 이동
  • for: 증감문으로 이동

📌예외상황의 종류

• 런타임 때 발생할 수 있는 의도치 않는 상황을 뜻한다.
• 흐름 제어 시 발생할 수 있는 예외 상황이므로, 이를 이해하여 코드 레벨에서 대응해야 한다.
• 예외 상황을 핸들링하지 않는다면, 기능이 동작하지 않거나,어플리케이션이 shout down 될 수 있다.

예외의 원인

• 언어 레벨 ~ 외부 유인에 의한 예외 상황까지 다양하다.
• 코드 레벨에서의 문제
• 하드웨어, 디바이스의 문제
• 라이브러리 손상
• 사용자의 입력 실수

예외의 종류

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

web api 레벨에서 발생하는 Error type

• networkerror 네트워크 에러 발생 시
• aborterror 작업이 중단되었을 때
• timeouterror 작업 시간이 초과되었을 때

📌throw와 Error 객체

throw문

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

  예외가 발생하면,

  • 1. 현재 함수의 실행이 중지
  • 2. 에러 객체와 함께 에러가 throw
  • 3. 제어 흐름은
    • 호출자 사이에 catch블록이 있으면, catch블록으로 전달
    • 호출자 사이에 catch블록이 없으면, 프로그램 종료
• 예외를 발생시키기 위하여 throw문을 사용한다.
  • throw 표현식
• thro문 이후의 명령문은 실행되지 않는다.

  Error 객체

• 사용자가 직접 error 객체를 정의하여 사용할 수 있다.
  • new error('에러 메세지')
  • error.message
  • error.name

📌try...catch문

에러 catch

• 예외가 발생하면,
  1. 현재 함수의 실행이 중지
  2. 에러객체와 함께 에러가 throw
  3. 제어흐름은
  • 호출자 사이에 catch블록이 있으면, catch블록으로 전달
  • 호출자 사이에 catch블록이 없으면, 프로그램 종료
• 에러를 catch 하여 프로그램이 종료되지 않도록 해야 한다.
• 예외 처리를 담당하는 핸들러를 찾기 위해, 순서대로 콜 스택(call stack)을 거슬러 올라가 올바른 핸드러를 찾아내어 그 곳에서 처리되도록 한다.

콜 스택 call stack

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

try...catch 문

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

 try {
 } catch(catchid) {

}

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

try...catch문의 finally블록

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

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

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