Archive

JS Day 11 콜백 함수

09 Mar 2021 | Javascript

JS Day 11 콜백 함수

  1. 호이스팅 (Hoisting)

    • 정말 간단하게 설명하면 변수, 함수 선언이 JS 실행시점에서 제일 위로 올라가는 것을 말한다
    • 변수를 제일 아래에 선언해놓고 제일 위에 있는 함수에서 그 변수를 사용해도 된다

  2. 비동기 (Asynchronous)

    • 자바스크립트는 원래 synchronous 하기 때문에 왼쪽 -> 오른쪽, 위 -> 아래로 순차적으로 실행이 된다
    • 언제 실행될지 예측 할 수 없는 코드를 asynchronous 비동기적인 코드라고 한다
    console.log('first');
setTimeout(() => console.log('second'), 1000);
console.log('third');
   
// first, third, second 순으로 실행된다


  3. 콜백 함수 (Callback Function)

    • 위의 setTimeout에서 1초 뒤에 second를 찍는 함수처럼 나중에 호출할 함수를 콜백함수라 한다
    • 콜백함수는 동기적 콜백함수와 비동기적 콜백함수로 나뉠 수 있다
    // Synchronous callback function
function a(callback) {
    callback();
}
   
a(() => console.log('안녕')); // '안녕' 출력
   
// Asynchronous callback function
function b(callback, time) {
    setTimeout(callback, time);
}
   
b(() => console.log('하이'), 1000); // 1초 후 '하이' 출력
    • 둘 다 나중에 callback 함수를 호출했지만 하나는 동기적이고 하나는 비동기적인걸 볼 수 있다
    • 비동기적인 처리는 주로 네트워크 통신, 파일 로딩 등 시간이 걸리는 작업을 수행하는데 사용된다

  4. 콜백지옥 (Callback hell)

    • 개발자가 경계해야 할 부분으로 콜백 안에서 또 콜백을 부르고 또 콜백을 부르고….
    • 이런 식으로 코드를 짜는 것을 은어로 콜백지옥이라고 부른다
    • 혹은 멸망의 피라미드..
    • 콜백지옥은 가독성이 떨어지고 비즈니스 로직을 한 눈에 이해할 수 없다
    • 또, 오류 발생시 어느 부분에서 뻑이 났는지 예측하기 힘드므로 콜백 사용을 자제해야한다



참고 자료

JAVASCRIPT.INFO

드림코딩 by 엘리

Related Posts