콜백함수

콜백 함수란?

정의 : 함수에 파라미터 형태로 함수가 들어가는것
용도 : 순차적으로 코드를 실행하고 싶을때 씀

예제1) 이벤트리스너 함수

//버튼 클릭시 어떤일이 일어나게 하는것 

document.querySelector('.button').addEventListener('click',function(){
	//버튼 클릭시 실행될 코드가 여기에 위치한다
})

-> addEventListener : 함수
-> function(){} :  콜백함수

예제2) setTimeout : 몇초뒤 어떤코드 실행해 달라고하는 함수

setTimeout (function (){
	//콜백함수안에서 실행될 어떤 코드~
},1000)

1000ms = 1초
그러니까 1초 경과후에 콜백함수 안에있는 어떤 함수를 실행해 줄수있음.

특징)
1. 다른데서 만든 함수도 콜백함수로 넣을수 있음

document.querySelector('.button').addEventListener('click', 함수명)

2. 콜백함수가 필요한 함수들에만 콜백함수 사용가능 (대표적으로 addEventListener,setTimeout etc.)
3. 콜백함수에 함수명을 내가 작명할수있다

콜백함수의 원리 (어떤식으로 코드를 짜야 함수를 집어넣을수 있을까?)

function first(파라미터) {
	console.log(1)
    	파라미터()
}
function second (){
	console.log(2)
}

first(second) 
//라고 하면 1다음에2가 찍힌다. 이런식으로 함수가 연결되게 실행되게 하고싶을때 쓴다! 

first()
second() 
//콜백함수없이 이런식으로도 쓸수있지만 여러가지 문제(비동기처리로인해 순서대로 실행이
 안된다거나)가 있기때문에 콜백함수를 쓴다.

콜백 헬

꼬리에 꼬리를 무는 비동기 처리가 늘어나면 호출이 계속 중첩되고,코드가 깊어지고, 관리는 어려워진다. 이런 깊은 중첩을 콜백 헬/멸망의 피라미드라 부른다.

콜백헬이 발생하는 이유?

• 비동기 처리 시에는 실행완료를 기다리지 않고 바로 다음작업을 실행함
• 즉 순서대로 코드를 쭉 적는다고 우리가 원하는 순서로 작업이 이루어지지 않는다
• 비동기 처리 함수내에서 처리 결과를 반환하는 걸로는 동작을 하지 않으니, 콜백 함수를 사용해 원하는 동작을 하게 하려고 콜백함수를 쓴다
• 이 콜백 함수 내에서 또 다른 비동기 작업이 필요할 경우 위와 같은 중첩이 생기면서 콜백헬이 탄생!

콜백 헬을 해결할 방법은 없나? -> async await, promise

• async await
  async : 함수앞에 async 붙여서 사용한다. 항상 프라미스를 반환한다(프라미스가 아닌 값이라도 프라미스로 감싸서 반환해줌)
  await : async의 짝꿍임 ( async 없이는 쓸수없다). async 함수 안에서만 동작한다. await는 프라미스가 처리될때까지 기다렸다가(pending 이 아닌 fulfilled 같은 상태) 그 이후에 처리결과를 반환한다.자세히는, 자바스크립트에서 비동기 작업을 하면 쓰레드라는 일꾼이 일단 "비동기 작업해 줘" 하고 위임해놓고 바로 다음 작업을 한다. 근데 await를 쓰면 "이거를 넘겨 놓고 바로 다음 작업을 하자" 이게 아니라 "프라미스가 처리될 때까지 기다리고 있을게"가 돼버린다. 그리고 나서 처리가 되면 그다음에 작업을 계속 하는 것이다.

• "프라미스(Promise)"
  Promise : 비동기 연산이 종료된 이후 결과를 알기위해 사용하는 객체.(비동기 처리가 끝나는 시점을 내가 좀더 명확하게 표현할수 있어서 비동기 작업이 종료된 이후에 어떤 결과를 갖다 쓰는게 결과를 알기에 되게 좋다) 프라미스를 쓰면 비동기 메서드를 마치 동기메서드처럼 값을 반환할수있다. 전통적인 콜백 패턴으로 인한 콜백 헬 때문에 ES6에서 도입한 또다른 비동기 처리패턴이다. 비동기 처리 시점을 좀더 명확하게 표현할수 있다.

Credit : applecoding