Callback 함수에 관하여 (with.JS Hoisting)

콜백함수의 정의 (요약하자면, 함수들의 체인관계..?) 

1. 파라미터로 함수를 전달하는 함수

2. 파라미터로 함수를 전달받아 함수의 내부에서 실행하는 함수 

(함수의 내부에서 실행되기 떄문에 이름을 붙이지 않아도 되는 익명함수) 

3. 나중에 호출되는 함수 

(코드를 통해 명시적으로 호출되는 함수 X, 개발자는 단지 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수) 

JS에서 이벤트 핸들러 처리도 콜백함수의 예제이다 

<button id="button1" onclick="button1_click();">버튼1</button> 
<script> 
function button1_click() { 
	alert("버튼 1이 클릭되었습니다"); 
} 
</script>

button1_click()함수는 브라우저의 JS API에서 DOM 이벤트 핸들러에 전달(등록)되고, 해당 버튼에 클릭이벤트가 발생했을 때 이벤트 핸들러가 콜백함수를 호출한다. 

 

또 다른 예시로, 이전에 유행 밈이였던 '깡'을 주제로 한 재미난 예제가 있어서 담아봤다. 

function checkGang(count,link,good) { 
	count > 3 ? link() : good(); 
} 

function linkGang() {
	console.log('1일 3깡은 기본입니다. 아래 링크를 통해 깡을 시청해주세요'); 
    console.log('https://youtube.com/~'); 
}

function goodGang() {
	console.log('오늘 할당량을 모두 채우셨습니다!');
}

checkGang(2,linkGang,goodGang);

총 3가지 함수로 구현되었으며 checkGang 함수를 호출할 때 매개변수로 count에 숫자값 2를 넣었다.

link와 good에 각각 linkGang과 goodGang 함수를 전달했다.

여기서 linkGang과 goodGang 함수가 콜백함수이다. checkGang 함수가 먼저 호출되고 매개변수로 들어온 count 값에 따라 linkGang과 goodGang 함수 둘 중 한 가지가 나중에 호출된다.

 

count값이 2이기 때문에 linkGang이 실행된다. 

 

콜백함수를 사용하는 이유

1. JS에서 비동기적 프로그래밍을 할 수 있기 때문이다. (비동기적 테크닉 : 싱글스레드의 멈춤을 방지한다) 

번외) 콜백함수가 필요한 이유를 찾기보다는 함수를 활용하는 하나의 방식으로 이해해두는 것이 좋다. 

 

 

※ 자바스크립트에서 호이스팅(Hoisting)이란? 

코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 '끌어 올려진 것 같은 현상' 

최상단으로 끌어올리는 것은 아니다. 

자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다. 

코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var,let,const,function,class)을 스코프에 등록(선언이 먼저 메모리에 등록) 

코드 실행 전 이미 변수선언/함수선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. 

 

var 키워드 = 선언과 함께 undefined로 초기화되어 메모리에 저장 

let,const = 초기화되지 않은 상태로 선언만 메모리에 저장 

> 초기화되지 않으면 변수를 참조할 수 없다. 그래서 참조 에러가 발생한다. 그런데 let과 const에도 호이스팅이 일어나기 때문에 에러를 일으키는 것이다.

ex) let foo = 1; 

{ 

    console.log(foo);

    let foo = 2; 

} 

위의 코드에서는 선언이 호이스팅되었기 때문에 블록 스코프에서 foo를 찾을 수 없다고 나온다. 

VM50:5 Uncaught ReferenceError: Cannot access 'foo' before initialization
    at <anonymous>:5:17

 

참고 https://bigtop.tistory.com/35

https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/