이력서 스터디 Day 1 - 이벤트 루프(Event Loop) & 콜백함수(Callback Function)

• 1. 이벤트 루프 (Event Loop)에 대해 설명해보세요.
• Event Loop는 Call Stack과 Callback Queue의 상태를 체크하여, Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어넣는 역할을 한다.

이벤트루프란 브라우저/런타임환경에 내장되어 있는 기능 중 하나로, 콜 스택에 현재 실행중인 실행 컨텍스트가 있는지 이벤트 큐에 대기중인 함수가 있는지 반복해서 확인을 한다.
만약 콜 스택이 비어있고 이벤트 큐에 대기중인 함수가 있다면 이벤트 루프는 순차적으로 큐의 First In First Out에 따라 대기중인 함수를 콜스택으로 이동키신다. 그러면 콜 스택으로 이동한 함수가 실행되게 된다.

자바스크립트 엔진 내부는 크게 힙(heap)과 콜 스택(Call stack) 두가지로 구분할 수 있다.

힙: 객체가 저장되는 메모리 공간. 콜 스택의 요소인 실행 컨텍스트가 참조하는 것들이 저장되어 있음
콜 스택: 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료 구조

힙과 콜스택은 자바스킙트 엔진에 포함되어 있는 것들이고, 자바스크립트 엔진은 요청된 task를 단순하게 순차적으로 실행하는 역할을 한다. 이 부분으로 인해 자바스크립트가 싱글 스레드라고 하는 것이다.

반면 실제 자바스크립트가 동작하는 브라우저나 런타임 환경은 이 엔진에 포함되지 않는 추가적인 기능들을 가지고 있다. 그 기능들이 바로 이벤트 룹과 이벤트 큐가 포함된다.

 

2. 콜백 함수 (Callback Function)가 무엇인지, 어떻게 사용되는지 설명해보세요.

콜백함수는 함수를 활용하는 방법중 하나입니다
정확하게는 콜백함수는 파라미터로 전달받은 함수를 말합니다.
파라미터로 콜백함수를 전달받고 함수 내부에서 필요할 때 콜백함수를 호출할 수 있습니다.

콜백 함수의 장점

• 함수를 인자로 받기 때문에 필요에 따라 함수의 정의를 달리해 전달할 수 있습니다.
• 함수를 굳이 정의하지 않고 익명 함수로도 전달 가능합니다.
• 비동기(Asynchronous) 처리 방식의 문제점을 해결할 수 있습니다.

콜백 함수의 단점

• 콜백함수를 너무 남용하면 코드의 가독성이 떨어집니다. (콜백 지옥)
• 에러 처리가 어렵다.

콜백함수는 주로 비동기처리에 사용되는데요. 비동기(Asynchronous)란 특정 코드의 실행이 끝날 때 까지 기다리지 않고 다음 코드로 바로 넘어가는 것을 의미합니다.

대표적으로 자바스크립트에 내장되있는 setTimeout() 이라는 함수가 있습니다.

 

callback 이라는 파라미터를 선언하고 콜백함수를 전달 받아 setTimeout() 함수의 인자로 전달하였습니다.

setTimeout() 함수는 비동기 함수이기 때문에 코드의 실행이 끝날 때 까지 기다리지 않고 바로 다음코드로 넘어갑니다.