javascript 콜백, 최대한 쉽게 설명

(콜백을 쉽게 이해하지 못하시는 분들을 위한 글입니다.

이 글은 최대한 쉽게 설명하려다 보니 정확도가 떨어질 수도 있습니다.)

 

나도 처음에는 콜백이 진짜 이해가 안 됐다. 대강은 이해가 가도 정확히는 이해가 안됐다

 

콜백은 다른 곳에서도 많이 봤듯이 진짜 말 그대로 '콜백', 나중에 부른다는 소리다.

물론 이와 같은 문장은 생략이 많이 되있어서 이해가 잘 안될 것이다.

 

예제와 함께 하자

function a(num,something){
	let n = num;
	something(n);
}

a(5,(value)=>{
console.log(value); //5
});

(value)=>{} 는 람다식이다. function (value) {}와 같다

 

a라는 함수를 정의했다. 함수의 인자로는 num과 something이다. 

num에는 함수가 아닌 데이터가 들어간다. (여기서는 숫자를 넣어보았다)

(물론 함수를 넣을 수는 있다)

something에는 함수를 넣어주는 곳이다.

이 something이 곧 콜백 함수가 된다.

 

-----------------------------------코드 설명------------------------------------

a(5,함수); 

일단 num부분에 5를 넣고 n이 5가 된다. //let n = num;

그리고 something 함수에 n을 넣고 실행 //something(n);

 

여기서의 something 함수는 곧 아래쪽의

(value)=>{

  console.log(value);

}

이 부분이다.

something(n), something함수에 n값을 넣어줬다. 이 n값은 (value)=>{}의 value로 전달된다.

something(n)이 곧 (value)=>{}이니깐.

 

한마디로 

"5를 넣어주고 그 다음에 console.log가 들어있는 함수를 실행해서 5를 출력한다"

여기서 중요한것은 바로 '그 다음에'다

5를 넣어준 다음에~, console.log를 실행.

 

이렇게 간단한 코드에서는 그냥 

function a(num){
	let n = num;
	console.log(n); 
}

a(5); //5

위와 같이 할것이다.

 

 

 

근데 비동기와 함께라면 필요한 경우가 생긴다.

(비동기는 자세히 설명하지 않겠다만, 짧게 설명하자면 오래걸리는 코드를 넘겨버리는것)

 

 

다음과 같이 코드를 짜보겠다. 

console.log("first");
setTimeout(()=>{
	console.log("twice");
},1000);
console.log("third");

이렇게 짜면 first가 출력되고 1초 뒤 twice를 출력, 그리고 third를 출력할 것 같다.

하지만 그렇지 않다 first가 출력되고 third가 출력된다! 그리고 1초 뒤 twice가 출력된다.

바로 비동기 때문이다.

setTimeout부분이 오래 걸렸기 때문에 다음 코드로 넘어가 버린것이다.

 

function tw(func){
	setTimeout(()=>{
		console.log("twice");
        func();
	},1000);
}

console.log("first");
tw(()=>{console.log("third");});

이렇게 쓰면 first 출력 후 1초 뒤 second 출력, third 출력한다.

 

 

 

 

콜백은 한마디로 이걸 무조건 끝낸 뒤에 그 다음코드를 실행한다는 소리다.

이 코드 실행 '그리고' 이 코드 실행

 

근데 가끔 이런 경우가 생길 수 있다.

"아 이 코드 뭔가 오래 걸릴 것 같은 코드인데? 아 이것도, 아 이것도!"

그러면서 

 

"이 코드 실행 '그리고' 이 코드 실행 '그리고' 이 코드 실행 '그리고' 이 코드 실행 '그리고' 이 코드 실행 '그리고' 이 코드 실행 '그리고' 이 코드 실행 '그리고' 이 코드 실행"

같은 코드가 만들어질것이다.

 

이것이 바로 '콜백 지옥'이다.

 

콜백 지옥은 Promise로 없앨 수 있다.