Javascript - 비동기처리

Javascript는 다른 언어들과 다르게 single thread 이다. 싱글쓰레드라는 것은 사전적인 의미로는 한줄 나사인데 프로그램적으로 보면 한번에 한개만 실행할 수 있는 것이라 생각하면 된다.

이전에 callback 내용을 다루면서 비동기처리를 다룬적이 있다. 비동기 처리는 Javascript에서 매우 중요한 역할을 한다.

현실에서 비동기 처리가 일어나지 않는다고 생각을 하면...

 - 별다방에 커피를 사먹으로 갔다. 내 앞에 있는 2사람 정도가 주문을 기다리고 있다. 이때, 동기적으로 일이 일어난다면...내 앞에 앞 사람이 주문을 하고 커피를 받고, 내 앞사람이 커피 주문을 하고 커피를 받고, 그 다음이 내 차례가 될 것이다. 동기적으로 일 처리를 한다면 뒷사람들은 더 많은 시간을 기다려야 한다.

 하지만, 사람은 비동기적으로 일을 처리 할 수 있기 때문에 즉, 한번에 여러가지 일을 처리 할 수 있다. 별다방에서 커피를 주문을 하고, 다음 사람 주문을 받고, 이번에 내 주문을 받고...전부 에스프레소 기반의 음료면 한번에 에스프레소를 만들어서 커피를 만들면 3사람이 비슷한 시간에 음료를 받을 수 있을 것이다.

컴퓨터는 특히, Javascipt는 싱글 쓰레드 이기 때문에 한번에 한가지 일 밖에 하지 못한다. 이러한 단점을 처리 해주는 비동기 처리라고 생각하면 된다.

 

Javascirpt에서 대표적인 비동기 함수로 setTimeout(function, second)이 있다.

  *myFunction을 실행을 시키면 Hello는 3초 후에 console로 출력이 된다.

  *초는 ms 이다. 즉, 3000은 3초라는 뜻이다.

  *즉, 하기 함수는 setTimeout이 실행되면서 3초후에 첫번째 인자로 함수를 실행 시킨다.

 

하기 함수 printAll()을 실행하면 어떤것이 나올지 생각을 해본다면...

Callback이 없는 경우 일때

 

Callback이 있는 경우 일때

  *()=>{}는 익명함수이며, ES6부터 지원되는 Arrow Function이라고 한다.(아래 추가 설명)

 

결과는 Callback이 없는 경우는 어떤 순으로 나올 지 모르지만, Callback이 있는 경우는 A - B - C 이다.

  *setTimeout에 두번째 인자로 랜덤 초가 나오지만, 결과는 A - B - C가 출력된다.

  *Callback은 함수가 실행이 되고, 인자로 들어온 함수를 잊지 않고 다시 호출하여 실행을 하기 때문이다.

  *즉, A가 출력이 되고 나서 callback이 호출되어 B가 출력이 되고 callback이 또 호출되어 C가 된다.

  *두번째 인자로 어떤 값이 오든 함수가 종류가 되고 callback이 실행이 된다.

 

Callback Hell

 -Callback 함수가 있는 함수를 계속 엮는다면...

 -Callback에 Callback에 Callback의 꼬리를 물게 되는 경우가 있다.

 -위에 Callback이 있는 함수가 A부터 Z까지 출력을 한다고 생각을 하면...

 -Z까지 코드를 작성하려고 했는데...})갯수랑 헷갈려서(J까지만)

  *callback에 callback이 계속 엮이는 현상을 callback hell이라고 한다.

  **코드의 가독성이 안좋고, 코드의 수정이 어렵기 때문에 이와 같은 코드는 좋지 않다.

  (이와 같은 현상을 벗어나기 위해 asyn await을 활용을 할 것이며, 그 이전에 callback 보다 쉽게 작성할 수 있는 Promise를 다음글에 포스트 예정)

 

※Arrow Function

  *위 함수에서 function(){printString("A")}와 ()=>{printString("A")}와 같은 의미이다.

  *Arrow Function에서 인자가 한개이면 소괄호를 생략하고 사용할 수 있다.

  *{}를 사용하지 않으면 return을 사용하지 않아도 된다. 만약 return을 사용해야 한다면 {}는 사용해야 한다.

 

#Javascript#codestates#비동기#async#callback#callbackhell#ArrowFunction