[클라우딩 어플리케이션 엔지니어링 TIL] 240108 - JS 데이터 처리

Intro...

---

갑자기(?) 강의 분량이 많아져서 다 듣느라 조금 힘들었다.

이제는 진짜 교육과 개발에 집중해야겠다.

 

 

 

오늘 학습한 내용

: 데이터 처리 > 기본 및 flow control

---

연산자

단항 연산자

• void: 표현식을 평가할 때 값을 반환하지 않도록 하는 연산자
• typeof: 타입을 문자열로 나타냄
• delete: 객체 속성 삭제

 

산술 연산자

• 단항 산술 연산자
  • ++, --. 숫자 1을 증가/감소 시키고 암묵적으로 할당
  • ++1, --1: 전위 증가/감소 연산자
  • 1++, 1--: 후위 증가/감소 연산자
• 이항 산술 연산자
  
  • +, -, /, *, %

 

관계 연산자

: 피연산자를 비교해 결과에 따라 Boolean 값 반환

• in / instaneof

const person = {
  name: 'gayeon'
}

'name' in person // true
'age' in person // false

person instanceof Object // true
person instanceof String // false

 

비교 연산자

• ===. !==: 값과 타입이 모두 같거나 다름
• ==, !=: 값이 같거나 다름
• <, <=, >, >=

 

논리 연산자

: 두 개의 피연산자 중 하나를 반환, 반환되는 값은 무조건 Boolean은 아님

• A && B, A || B
• null, undefined, ''는 false로 평가
• && => null 검사에 활용
• || => 캐싱 값에 대해 사용

false || 'banana' // 첫 번째 피연산자가 false인 경우, 두 번째 피연산자가 반환이 되는 대응갑승로 활용 됨

 

기타 연산자

• 쉼표 연산자: 피연산자를 왼쪽에서 오른쪽 순서로 평가하고 마지막 연산자의 값을 반환

const a = (1, 2)
a // 2

let x = 1
x = (x++, x)
x // 2

• 문자열 연산자

'사과는' + ' ' + '맛있다.' // 사과는 맛있다.

• 옵셔널 연산자

const foo = { name: 'apple' }
foo.age?.apple // undefined

• 할당 연산자
  • +=, -=, *=, /=, %=, **=, &&=, ||=
• 삼항 연산자
  • 조건문 ? 참일 경우 반환: 거짓일 경우 반환

 

재사용 처리기 (=함수)

외부 코드가 호출할 수 있는 하위 프로그램

• input: 처리를 위한 주입 데이터
• output: 처리 후 결과 데이터
• 본문: 명령문의 시퀀스로 구성

자바스크립트에서 함수는 객체처럼 속성과 메서드를 가질 수 있다.

객체와의 차이점은 함수는 외부에서 '호출'이 가능하나, 객체는 외부에서 '호출이 불간으하다.

자바스크립트 함수는 일급객체이다.

일급객체란, 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.

• 일급 객체는 함수의 실제 매개변수가 될 수 있다.

function foo(input) {
  return input() + 1;
}

function bar() {
  return 1;
}

foo(bar) // 2

• 함수의 반환값이 될 수 있다.

// input()() -> bar() -> 1

function foo(input) {
  return input()() + 1;
}

function bar() {
  return 1;
}

function baz() {
  return bar;
}

foo(baz); // 2

• 할당명령문 (=) 의 대상이 될 수있다.
• 동일 비교 대상이 될 수 있다. (값으로 표현 가능)

 

자바스크립트 함수 특징

• 함수 이름: 외부에서 호출 시 이름이 사용된다.
• 매개 변수: 함수에 전달되는 인수
• 함수 몸체: 명령 시퀀스들이 존재하는 블록

 

매개변수

• 기본값 매개변수

function foo(a = 1) {
  return a;
}

foo() // 1

• 나머지 매개변수
  • 가변항 함수
  • spread 연산자

function foo(arg, ...rest) {
  console.log(rest);
  return arg;
}

foo('a','b','c') // ['b', 'c']
// a

• arguments 객체: 함수에 전달되는 인자를 참조할 수 있는 객체
  • 자바스크립트 함수 => Function 객체 상속
  • Function 객체의 기본 속성 => arguments
  • 형태: 유사 배열 형태 (=배열 내장 메서드 사용 불가)

 

✅ 매개변수(parameter)와 인자(argument)의 차이

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

function 함수명(매개변수) {
  return 매개변수;
}

함수명('a') // <- 'a': 인자

 

함수 생성 방법

• 함수 선언문

function foo(arg) {
  return arg;
}

• 함수 표현식

const foo = function (arg) {
  return arg;
}; // 익명함수

const bar = function baz(arg) {
  return arg;
}; // 기명함수

const temp = foo(1);
console.log(temp);

console.log(baz(1)); // ReferenceError: baz is not defined (bar로 호출해야 함)

• Function 생성자 함수
  • new Function(arg1, arg2, ..., 'return 1')

const bar = new Function(undefined, 'return 1');
bar(1) // 1

• 화살표 함수 (ES6 이후)
  • 익명 함수 (함수 표현식으로만 사용 가능)
  • const 변수명 = (arg1, ...) => { return ... }

 

함수 사용 패턴

• 즉시 실행 함수 (IIFE)
  • 함수 정의와 동시에 실행
  • 코드 평가 -> 코드 실행 -> 최초 1회 실행9
  • 단 한 번만 호출되며 다시 호출 X
  • 초기화 처리에 주로 사용

(function() {
  console.log('foo')
}())

• 재귀 함수
  • 자기 자신을 호출하는 함수
  • 탈출 조건을 함수 초반에 정의해야 한다.
  • 직관성이 떨어질 수 있음
• 중첩 함수
  • 내부 함수
  • 내부 함수 내의 변수 참조 -> 부모를 포함한 외부 범위 참조 가능
  • 부모 함수 내의 변수 참조 -> 자식 범위 참조 불가
  • 스코프 체인
• 콜백 함수
  • 함수의 매개변수가 될 수 있다.
  • 인자로 B함수를 받은 A함수 -> A함수가 호출되는 시점에 B 함수도 호출
  • 특정 이벤트가 발생했을 때 -> 시스템에 의해 호출되는 함수

 

Flow Control

: 명령 또는 함수 호출이 실행되거나 평가되는 순서

• goto: 다른 구문에서 시작 (권장하지 않음)
• choice: if-else, switch
• loop
• continue
• break

 

표현식과 문

• 표현식: 어떤 값으로 이행되는 임의의 유효한 코드 단위
  • 표현식이 평가되면, 새로운 값을 생성하거나 기존 값을 참조
  • 값으로 평가될 수 있는 문은 모두 표현식
  • 리터럴 표현식, 함수 표현식, ...
• 문: 프로그램을 구성하는 기본 단위, 최소 실행 단위
  • == 명령문
  • 선언문, 할당문, 제어문, 반복문, 블럭문 ({ ... }) ...

 

조건문

• if-else문 
  • 마틴 파울러의 리팩토링 자료에서 nested conditional을 지양하고 Guard Clauses 형태로 구현을 지향 함
• switch

 

반복문

• 조건부 loop
  • 시작할 때 조건을 평가하는 타입
    • while문
    • 본문 생략 가능
  • 마지막에 조건을 평가하는 타입
    • do...while문
    • 본문은 항상 한 번 이상 실행

do {
  명령문
} while (표현식);

• for loop
  • for(초기문;조건문;증감문;) { ... } 형식
  • 조건문: loop내 코드 실행 전, 조건 평가하여 loop를 지속할 지 판단
  • 증감문: loop내 코드 실행 후, 실행되는 문장
• collection loop (foreach)
  • for문과 달리 명시적으로 카운터(루프변수)를 관리하지 않는다.
  • 잠재적인 순환 횟수 오류를 예방한다.
  • 자바스크립트 컬렉션 루프 종류 => for...of, for...in
    • for...of: 반복 가능한 객체(Array, Set, String...)를 통해 반복하는 루프를 만든다.
    • for...in: for([변수] in [object]) { ... } 객체 열거 속성을 통해 지정된 변수를 반복
• break 문
  • 제어흐름의 종류 중 프로그램 실행 중단
  • 반복문, switch문 종료시킬 때 사용
  • 가장 가까운 while, do-while, for, switch문을 종료하고 다음 명령어로 넘어감
• continue 문
  • 제어흐름의 종류 중 현재 실행 구문에서 떨어진 한 구문의 집합 실행 종류에 속함
  • while, do...while, for문을 다시 시작하기 위해 사용
  • 가장 안쪽의 while, do-while, for문을 둘러싼 반복을 종료하고, 다음 loop 실행

const foo = () => {
  let const = 0;
  while(count<3) {
    count++;
    console.log(count);
    continue;
    console.log('여기');
  }
};

foo(); // 1 2 3

 

예외 처리하기

예외 상황

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

흐름 제어 시 발생할 수 있는 예외 상황이므로, 이를 이해하여 코드 레벨에서 대응해야 한다.

예외 상황을 핸들링하지 않으면 기능이 동작하지 않거나 어플리케이션이 종료될 수 있다.

 

예외 원인

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

 

예외 종류

• ECMAScript Error: 자바스크립트에서 발생하는 에러 타입
  • RangeError: 값이 집합에 없거나, 허용 범위기 아닐 때
  • ReferenceError: 존재하지 않는 변수 참조 시
  • SyntaxError: 문법을 지키지 않았을 때
  • TypeError: 값이 기대한 자료형이 아니여서 연산이 불가할 때
  • …
• DOMException: Wep API 레벨에서 발생하는 에러 타입
  • NetworkError: 네트워크 에러 발생 시
  • AbortError: 작업이 중단되었을 때
  • TimeoutError: 작업 시간이 초과되었을 때
  • …
• 그 외
  • 개발자가 예상치 못한 예외 상황을 예상해 핸들링
  • 자바스크립트의 Error 객체를 사용해 직접 에러를 정의내리고 핸들링할 수 있다.

 

예외 처리

• throw 문
  • 예외를 발생시킬 때 사용, throw문 이후 명령문은 실행되지 않음
  • catch 블록에서 에러 객체를 핸들링 함
  • 순서
    1. 예외 발생 시, 현재 함수 실행 중지
    2. 에러객체와 함께 에러가 throw
    3. 호출자 사이에 catch블록이 있으면 catch블록으로 전달 없으면 프로그램 종료
• Error 객체
  • 사용자가 직접 Errorr객체 정의
  • new Error('에러 메시지')
  • Error.message
  • Error.name
  • ECMAScript 표준 내장 오류 유형 존재
• try...catch 문 
  • 에러 catch
  • 예외가 발생할 경우, 예외 처리를 맡을 하나 이상의 반응 명령문을 지정
    • try 블록의 명령문 중 하나가 실패하면, catch로 제어권이 넘어감
    • try 블록의 명령문 중 하나가 성공하면, catch로 제어권이 넘어가지 않음
    • cahtch문에서 예외가 처리 되면 더 상위 콜스택에선 더이상 예외가 타고 올라가지 않음
  • finally 블록
    • try블록에서 예외 상황이 발생하지 않더라도 실행
    • 예외 발생시 try→catch→finally
    • 발생 x try→finally
  • network에러 시, 에러를 감지해야하는 비즈니스 로직, 유저가 잘못 데이터를 입력한 경우 등 외부에 의존되어서 구현된 로직에서 사용

 

⚠️ call stack

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

함수를 호출할 때마다 스택이 쌓이고, 함수의 실행이 종료되면 콜스택에서 스택을 제거하는 원리

Error throw되면 콜 스택을 확인하여, 핸들링하고 있는 catch문이 있는 스택에서 처리한다.

 

 

 

 

마무리

---

여유부리다가 강의를 미뤄서 들을 뻔 했다.

TIL은 미뤄졌지만... 공부한 내용이 많아서 복습을 열심히 해야할 것 같다.