[JavaScript] 비동기 코드를 동기처럼 사용하기_콜백함수

용어정리

 

콜백

함수안의 함수

비동기 코드와 동기 코드가 섞여있을 경우, 동기적으로 실행시키고 싶을 때 사용

 

동기

위에서부터 아래로, 차례대로 실행되는 코드

 

비동기

비동기 코드가 있을 때 동기 -> 비동기 순으로 실행

 

콜백함수

근데 비동기 먼저 실행시키고 그 다음에 동기 코드를 실행시키고 싶을 때가 있는데

이때 콜백 함수를 써줍니다.

 

콜백함수는 함수안에 함수 라는 뜻이고

이 함수에 있는 거 실행시킨다음에 그 다음 함수 실행시켜주세요 라는 의미입니다.

 

 

---

 

 

콜백함수와 비동기 코드

 

대표적인 비동기 코드들을 살펴보면

 

// setTimeout

setTimeout( () =>{},1000)

 

1초 지난 다음에 안에 코드를 실행해주세요

파라미터로 arrow function 이 들어있습니다.

 

 

// 이벤트리스너

document.~~.addEventListener('click',() =>{})

 

이거 클릭한 다음에 안에 코드 실행해주세요

마찬가지로 파라미터 자리에 arrow function 이 들어있습니다.

 

---

 

콜백함수 사용해보기

 

// 함수 선언
const 먼저실행 = ( 함수, data) => {
	console.log('공부를',data)
	함수();
}

const 나중에실행 = () => {
	console.log('합시다')
}


// 콜백 실행
먼저실행(나중에실행,'1')

 

setTimeout 이랑 비슷하게 만들 수도 있습니다.

// 콜백실행
먼저실행(() =>{
	console.log('합시다')
}, '1')

똑같이 생겼죠??? 

 

---

 

콜백 안쓰는 이유

 

사실 저는 일할때

promise 보다 콜백을 더 많이 씁니다…

생각없이 빨리빨리 만들고 쓰기 좋거든요...ㅎ(죄송합ㄴ다..)

 

 

 

 

학생은 공부를 열심히 해야 성공할수있나?

라는 문장을 순서대로 출력하고 싶네용

 

 

 

이렇게 하거나

    const 일 = ()=>{
        console.log('학생은');
    }
    const 이 = ()=>{
        console.log('공부를');
    }
    const 삼 = ()=>{
        console.log('열심히');
    }
    const 사 = ()=>{
        console.log('해야');
    }
    const 오 = ()=>{
        console.log('성공할수있나?');
    }
	// 출력
    오(사(삼(이(일()))))

이렇게 하거나…

    일 (function(){
        이(function(){
            삼(function(){
                사(function(){
                    오(function(){
                    });   
                });                
            });
        });
    });

이 모양이 유명하죠 콜백지옥😗😗

보기 불편하기도 하고 유지보수할때도 극혐이여서

콜백안쓰고 promise 나 async 씁니다.

 

 

결론

혼자 코딩할때는 하고싶은대로 해도 되지만,

공통코드나 유지보수가 필요할 코드는 회사 컨벤션을 지켜서 씁시다ㅎㅎ

(대부부느 promise 쓰더라구요)