How JS works? (Asynchronous Programming)

• How Javascript works
  • 자바스크립트 엔진(ex. 크롬의 V8)은 Memory Heap과 Call Stack을 가지고 있다.
  •  
  • Memory Heap
  • Memory allocation이 이루어지는 곳. 예를 들어 전역변수를 선언하면 Memory Heap 안의 메모리에 할당된다. 그러나 저장되는 데에 한계가 있어서, 사용되지 않는 메모리가 늘어날 수록 memory leak이 생긴다. Global Variable이 바람직하지 않은 이유다.
  • Call Stack

    console.log('4') // two함수 위에 위치  two() // one함수 위에 위치  one() // 스택 가장 아래에 위치 

    위에서부터 아래로 하나씩 실행되며 없어진다. (console.log -> one 함수 순. first in, last out)
  •  
  • const one = () => { const two = () => { console.log('4'); } two(); } one(); // prints 4
  • Single threaded language
  • Single threaded -> one call stack이라는 뜻. 한 번에 하나만 할 수 있음(Only one statement is executed at a time) multiple call stack을 가진 다른 언어들은 multi thread라고 함.
  • Synchronous programming동기는 요청과 결과가 동시에 일어난다는 뜻이다(함수나 객체 내부에서 함수를 호출했을 때, 이 함수 결과를 호출한 쪽에서 처리한다.)
    위에서부터 순서대로 실행된다. console.log('2')는 console.log('1')이 실행될 때까지 실행되지 않는다. one call stack이기 때문. 그러나 만약에 console.log('1')이 엄청나게 오랜 시간이 소요된다면, console.log('2')가 실행될 때까지 매우 긴 시간이 소요될 수 있다. 이것이 만약 웹사이트라면, 웹사이트가 오랜 시간 freeze될 수도 있다. (blocking)
  •  
  • console.log('1'); console.log('2'); console.log('3');
  • Asynchronous programming
  • console.log('1'); // prints '1' firstly setTimeout(() => { console.log('2'); }, 2000) // prints '2' finally console.log('3'); // prints '3' secondly
  
  
  • Javascript Run-Time Environment

    //Call Stack setTimeout(() => {   console.log('2'); }, 2000)  //Web API setTimeout()  //Callback Queue  //Event loop 

    1. console.log('1')이 실행되고 없어진 후, 콜스택에 setTimeout이 들어온다.
    2. setTimeout은 자바스크립트의 일부가 아닌 web API의 일부이므로, 이는 web API에게 전달된다. 이를 알리고나서 콜스택에서는 삭제된다.
    3. web API는 타이머를 시작한다.
    4. 이 때에 콜스택이 비어있는 상태이므로 자바스크립트엔진은 console.log('3')를 가져와 실행한다. 이 때에도 web API에 setTimeout이 있는 상태이다.
    5. setTimeout에 설정된 2초가 되면 web API에서는 사라지고, callback queue에 setTimeout의 callback()이 더해진다.
    6. 이벤트루프는 콜스택이 비어있는지 항상 확인하고 있다. 콜스택이 비어있다는 것을 알고 callback()이 있는지 callback queue에 확인한다.
    7. callback()은 콜스택으로 전달되어 callback() 위에 console.log('2')가 들어온다. '2'를 로그한 뒤 console.log('2')는 사라지고, 이 후 callback()도 사라진다.
    8.  
  • 자바스크립트 런타임 환경도 브라우저 내에 포함되어 있다. 엔진 위에는 Web APIs, Callback Queue, Event Loop 등이 있다. setTimeout은 web API의 일부이다. 자바스크립트의 일부가 아니다. 비동기 프로그래밍은 브라우저가 사용할 수 있게 해주는 것이다.비동기는 요청과 결과가 동시에 일어나지 않는다는 뜻이다(함수나 객체 내부에서 함수를 호출했을 때, 이 함수 결과를 호출한 쪽에서 처리하지 않고 콜백함수를 통해 처리한다.)
  • What Happens if I change setTimeout 0 second?0초로 설정되어도 위와 같은 프로세스를 거치기 때문에 console.log('3')는 그 과정을 거치는 사이에 콜스택에 들어간다. '3'이 로그된 뒤에야 콜스택이 비기 때문에 그 때 이벤트루프가 체크한 후 콜백을 콜스택으로 보내는 것이다.
  •  
  • console.log('1'); // prints '1' firstly setTimeout(() => { console.log('2'); }, 0) // prints '2' finally console.log('3'); // prints '3' secondly
  • Recap그러나 선생님에게 질문을 문자로 전송한다고 생각해보자. 문자를 보내면 선생님은 이를 읽고 답을 알아내어서 바쁘지 않을 때에 다시 전화해줄 것이다. (call back) 선생님이 전화를 줄 때까지 다른 일을 하는 것이 가능하다. 콜백과 콜백큐는 그런 맥락에서 call back이라는 이름을 가진다.
  •  
  • 선생님에게 질문을 하는 것을 예시로 들자. 동기 프로그래밍은, 선생님에게 질문을 하기 위해 전화를 거는 것이다. 전화를 걸고 선생님이 받을 때까지 기다리고, 문제에 답을 해줄 동안 다른 일은 아무 것도 할 수가 없다.
  • (Final Question) Javascript is a single threaded language that can be non-blocking?
  • Yes!