[Es6] 동기 & 비동기 처리와 callback 함수에 대해서 알아보자.

동기식(synchronous) 처리

 

동기식 처리 예시

 

자바스크립트는 동기식(synchronous) 언어이다.

 

자바스크립트를 공부하다 보면 한 번쯤은 들어봤을 용어입니다. 여기서 말하는 동기식(synchronous)이란 한 번에 하나의 요청을 처리하는 것을 말합니다. 즉, 하나의 작업이 실행이 되는 동안에 그 다음 작업은 멈춘 상태로 자신의 차례를 기다려야 합니다. 순서를 기다리는 다른 요청들은 자신의 차례가 올때까지 기다리는데 이 과정을 blocking이라고 합니다.

 

예제1. 동기식 처리

        function 기능1(){
            console.log('첫 번째')
        }

        function 기능2(){
            console.log('두 번째')
        }

        function 기능3(){
            console.log('세 번째')
        }

        기능1()    
        기능2()    
        기능3()    

 

위 코드의 출력 결과는 아래와 같습니다.

 

        첫 번째
        두 번째
        세 번째

 

제일 먼저 작성된 코드 순서대로 하나씩 작업을 수행해서 우리가 예상한 순서대로 결과가 출력됬습니다. 이처럼 동기식 처리 방식은 순차적으로 코드가 수행되니 코드의 흐름을 쉽게 예측할 수 있습니다.

 

하지만 일반적인 경우가 있으니 일반적이지 않은 경우도 있겠지요?

 

 

---

 

비동기(asynchronous) 처리

 

비동기식 처리 예시

 

반대로 비동기(asynchronous)란 어떤 요청이 오면 완료되기 전에 다음 요청을 실행하는 것을 말합니다. 즉, 시간이 오래 걸리는 특수한 요청들은 잠시 뒤로 제쳐두고 먼저 처리할 수 있는 요청들을 수행하는 것을 말합니다.

 

예제2. 비동기식 처리

        function 기능1(){
            console.log('첫 번째')
        }

        function 기능2(){
            setTimeout(function(){
                console.log('두 번째')
            }, 1000)
        }

        function 기능3(){
            console.log('세 번째')
        }


        기능1()
        기능2()
        기능3()

 

setTimeout()이라는 함수를 사용해서 시간이 1초 걸리는 특수한 요청을 하나 만들어줬습니다. 위 코드의 결과는 아래와 같습니다.

 

        첫 번째
        세 번째
        두 번째

작성된 함수들을 분명 순서대로 호출했지만 결과는 조금 달라졌습니다. 이처럼 비동기 방식의 경우 요청된 작업을 효율적으로 처리할 수 있지만, 즉시 응답을 받을 수 없어 적절히 처리되지 않으면 우리가 예상할 수 없는 결과가 나올 수 있습니다.

 

이런 비동기식 처리를 유발하는 요인들은 ajax요청, setTimeout(), addEventListener()로 이런 코드들은 읽는 시점과 동작 시점의 차이가 있다는 특징이 있습니다. 즉, 코드를 실행하면 동작하는데 있어서 시간이 걸립니다.

 

그렇다면 이런 비동기식 처리를 우리가 예측한 방향대로 흘러가게 할 수 있는 방법이 있을까요?

 

 

---

콜백(Callback) 함수

콜백 함수란 파라미터로 함수를 전달하는 함수로 비동기 방식으로 작성된 함수를 동기적으로 처리 하기 위해 사용합니다.

 

예제3. 콜백함수 사용방법

        function 함수1(num1, num2, callback){
            callback( num1 + num2 )
        }

        function 함수2(callback){
            console.log(callback)
        }

        함수1(1,2, 함수2)    // 3

위 예제와 같이 함수를 선언한 뒤 함수 타입의 파라미터를 마지막에 추가해서 사용하거나 혹은 직접 함수 선언문을 집어넣을 수도 있습니다.

 

예제4. 콜백함수를 사용한 동기적 처리

        function 기능1(callback){
            console.log('첫 번째')
            기능2(callback)
        }

        function 기능2(callback){
            setTimeout(function(){
                console.log('두 번째')
                기능3(callback)
            }, 1000)
        }

        function 기능3(){
            console.log('세 번째')
        }


        기능1() 

비동기 방식으로 작동하던 함수들을 콜백함수를 사용해서 우리가 예측할 수 있는 결과가 출력되도록 코드를 수정했습니다. 이렇게 콜백 함수는 비동기로 작성된 함수를 동기적으로 처리하기 위한 방식으로 사용이 됩니다만 치명적인 단점이 있습니다. 콜백 함수를 너무 많이 사용하면 코드가 길어지고 복잡해진다는 문제가 있습니다.

 

예제5. 콜백지옥

        function 기능1(callback){
            기능2(callback)
            console.log('첫 번째')
            function 기능2(callback){
                setTimeout(function(){
                    console.log('두 번째')
                    기능3(callback)
                    function 기능3(){
                        console.log('세 번째')
                    }
                }, 1000)
            }
        }


        기능1() 

동기식으로 처리할 코드가 많아진다면 코드의 깊이가 깊어져서 가독성이 많이 떨어지고 복잡해진다는 단점이 있습니다. 따라서 콜백 함수의 이런 문제를 해결하기 위해서 Es6의 Promise라는 문법이 생겨났습니다. Promise는 다음 글에서 이어집니다.

 

 

 

---

정리

동기식 처리(synchronous)

1. 동기식(synchronous) 처리란 코드를 한 번에 하나의 코드를 위에서 부터 순차적으로 처리하는 것
2. 다음 차례를 기다리는 코드들은 blocking 상태
3. 코드가 순차적으로 처리되기 때문에 출력결과가 예측 가능함

 

 

비동기식 처리(asynchronous)

1. 비동기식(asynchronous) 처리란 시간이 오래걸리는 복잡한 코드들을 뒤로 제쳐두고 처리할 수 있는 코드들 먼저  처리하는 것
2. 비동기식 처리를 유발하는 코드들은 ajax요청, setTimeout(), addEventListener 등이 있음
3. 코드를 처리가 빠르지만 출력결과가 예측 불가능하기 때문에 각별한 주의가 필요함

 

콜백(callback) 함수

1. 파라미터로 함수를 전달하는 함수 
2. 콜백 함수를 사용해서 비동기식 처리를 동기식으로 변경할 수 있음
3. 콜백 함수를 너무 많이 사용하면 코드가 깊어지고 복잡해져서 가독성이 떨어진다는 단점