[220128] 콜백 함수와 익명함수의 차이점, 콜백지옥

 

익명함수와 콜백함수의 차이점

 

익명함수

이름 없이 생성된 함수라고 생각하면 된다. 함수명 대신 변수명에 저장되고, 호출할때 변수명을 사용하면 된다.

function을 생략하고 =>을 가진 모양으로도 나타낼 수 있으며, 화살표를 달고있다고해서 애로우 함수라고도 한다.

익명 함수에 대한 자세한 설명글은 아래 게시글에 적어놓음.

let abc = function() {
	console.log('익명함수')
}

let abc2 = () => {
	console.log('익명함수')
}

https://hancoco.tistory.com/75

[220107] 익명함수, arrow함수, 함수가 생성되고 호출되는 순서

 

 

 

 

 

콜백함수

함수의 매개변수로 다른 함수를 전달하고 이벤트 발생 후, 매개변수로 전달한 함수가 실행되는 함수를 말한다.

비동기적 함수에 속하는 함수로, 콜백 함수 안에 함수를 넣으면 비동기 함수에도 순서대로 실행시킬 수 있다.

 

callback 함수의 실행흐름

function test(a){
    console.log('여기서 실행되는 함수는',a) // 첫번째 실행
    a() // 두번째 실행
}

function show(){
    console.log('show 함수')
}

test(show)
show()

결과

//console.log(show)의 결과
여기서 실행되는 함수는 ƒ show(){ // 첫번째 실행
	console.log('show 함수')
}
show 함수 // 두번째 실행
//show의 결과
show 함수

콜백함수 자체는 비동기함수지만 콜백함수 안에서는 동기적으로 실행되기때문에 조건식도 쓸 수 있다.

또한 콜백함수도 함수기때문에 매개변수를 다양하게 넣을 수 있다.

콜백함수와 if조건문

function screen(type,param){
    if(type==="click"){
        param()
    }else{
        console.log("type을 console로 입력해주세요")
    }
}

function test(){
	console.log("hello world!")
}

screen(test)
screen("click",test)

결과

type을 console로 입력해주세요
hello world!

 

 

 

 

 

 

콜백지옥

비동기 함수를 순서대로 넣을 수 있는 특성을 이용할 수 있는 장점이 있지만, 코드 양이 많아지면 문제가 발생한다.

일명 콜백지옥이라고 불리는 옆으로 누운 피라미드 형태의 코드다.

엮여있는 코드가 무엇인지 찾아봐야하는 불편함은 물론이고, 봤을때 코드를 알아보기도 힘들다.

callbackA(){
	실행코드...
    callbackC(){
        callbackB(){
        	실행코드...
            callbackF(){
                callbackD(){
                	실행코드...
                    callbackE(){
    
                    }
                }
            }
        }
    }
}


function callbackA(){ 실행코드 }
function callbackB(){ 실행코드 }
function callbackC(){ 실행코드 }
function callbackD(){ 실행코드 }
function callbackE(){ 실행코드 }
function callbackF(){ 실행코드 }

 

그렇다면 이 콜백지옥을 벗어날 방법은 없는걸까?

다행히도 현명한 개발자 선배들이 만들어놓은 길이 있다.

기능은 같지만 좀더 깔끔하게 작성할 수 있는 promise와 await은 다음 링크에 작성해놓았다.

https://hancoco.tistory.com/72

[220127] promise, then, resolve