🦁_21.12.08 TIL

21년 12월 08일

📝 Javascript

📎 오버로딩(overloading) & 오버라이딩(overriding)

오버로딩(overloading)

• 함수의 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드를 구현하고 매개변수에 의해 메서드를 구별하여 호출하는 방식
  => 자바스크립트는 오버로딩을 지원하지 않지만 arguments 객체를 사용하여 구현할 수 있다.

function add(x, y) {
  return x + y;
}

function add(x, y, z) {
  return x + y + z;
}

console.log(add(1, 2)); // NaN
console.log(add(1, 2, 3)); // 6

오버라이딩(overriding)

• 부모의 메서드를 자식의 클래스에서 재정의하여 사용하는 것을 의미
  => 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식

📎 구조 분해 할당

• 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

// 예시1
let a, b, rest;

[a, b] = [10, 20];

console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest); // [30, 40, 50]

// 예시2
// 이름과 성을 요소로 가진 배열
let arr = [1000, ["Bori", "Lee"]];

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [계좌잔고, [firstName, surname]] = arr;

console.log(계좌잔고); // 1000
console.log(firstName); // Bori
console.log(surname); // Lee

📎 try...catch

• 에러가 발생하면 스크립트는 중단되고, 콘솔에 에러가 출력된다.
  => try...catch 문법을 사용하면 스크립트가 중단되는 것을 방지하고, 에러는 잡는다.
  • 먼저, try {...} 안의 코드 실행
  • 에러가 없다면, try 안의 마지막 줄까지 실행되고 catch 블록은 건너뛴다.
  • 에러가 있다면, try 안 코드의 실행이 중단
    => catch(error) 블록으로 제어 흐름이 넘어감
    => 변수 error(변수명 변경 가능)는 에러에 대한 설명이 담긴 에러 객체를 포함

try {
  // 코드
} catch (error) { // <= 에러 객체, error 대신 다른 이름 사용 가능, (error) 없이도 사용 가능
 // 에러 핸들링 
}

// try...catch...finally
try {
  ... 코드를 실행 ...
} catch(e) {
  ... 에러 핸들링 ...
} finally {
  ... 항상 실행 ... // 에러 발생과 상관없이 반드시 한 번 실행
}

throw 연산자

• throw 연산자는 사용자 정의 에외(에러)를 발생(throw)한다.
  => 예외가 발생하면 코드의 실행이 중단(throw 이후의 명령문은 실행되지 않는다.)
  => catch 블록으로 제어 흐름이 넘어감
  => catch 블록이 없다면 프로그램 종료

function getRectArea(width, height) {
  if (isNaN(width) || isNaN(height)) {
    throw 'Parameter is not a number!' 
  }
}

try {
  getRectArea(3, 'A'); // 숫자가 아닌 값이 들어감
} catch (e) {
  console.error(e); // 'Parameter is not a number!' 
}

📎 동기식 처리 모델 vs 비동기식 처리 모델

[출처: Poiema Web - 동기식 처리 모델과 비동기식 처리 모델]

동기식 처리 모델(Synchronous processing model)

• 직렬적으로 태스크(task)를 수행
  => 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업을 대기
  => 동기식으로 동작하는 코드는 순차적으로 실행된다.

[출처: Poiema Web - 동기식 처리 모델(Synchronous processing model)]

• 예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 태스크를 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후의 태스크들은 블로킹(Blocking) 된다.

비동기식 처리 모델(Asynchronous processing model 또는 Non-Blocking processing model)

• 병렬식 태스크를 수행
  => 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크 실행
• 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다.
  => 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다.

[출처: Poiema Web - 비동기식 처리 모델(Asynchronous processing model)]

• 예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 태스크를 수행할 때, 서버에 데이터를 요청한 이후 서버로부터 데이터가 응답될 때까지 대기하지 않고(Non-Bloking) 즉시 다음 태스크를 수행.
  => 이후 서버로부터 데이터가 응답되면 이벤트가 발생하고 이벤트 핸들러가 데이터를 가지고 수행할 태스크를 계속해 수행

📎 콜백 함수(callback function)

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수

📎 콜백 헬(Callback Hell)

• 콜백 함수를 통해 비동기 처리 결과에 대한 후속 처리를 수행하는 비동기 함수가 비동기 처리 결과를 가지고 또다시 비동기 함수를 호출해야 한다면 콜백 함수 호출이 중첩되어 복잡도가 높아지는 현상
  => 비동기 처리를 위해 콜백 패턴을 사용
  => 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 중첩
  => 복잡도가 높아짐
  => Welcome to Callback Hell😈

step1(function(value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
      step4(value3, function(value4) {
        step5(value4, function(value5) {
            // value5를 사용하는 처리
        });
      });
    });
  });
});

📎 promise

📎 fetch

📎 async, await

참고

• 모던 자바스크립트 Deep Dive - 이웅모 저
• 구조 분해 할당
• 'try..catch'와 에러 핸들링
• throw - MDN

---

📝 서류 합격률을 높이는 Github 관리 전략 with 이보라님

---

마무리

• 작성중입니다 ;)