JavaScript 요약정리 - CallBack함수란

안녕하세요

https://blog.naver.com/sysysy0302 여니입니다 :)

 

 

1. CallBack함수란
간단하게 말해서 다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수이며, 
함수에 파라미터로 들어가는 함수를 말합니다.

 

2. 용도
함수를 순차적으로 실행하고 싶을 때 사용합니다.

 

3. CallBack가 필요한 이유
- 콜백함수를 사용하면 가독성이나 코드 재사용 면에서 사용됩니다.
- 비동기 방식으로 작성된 함수를 동기 처리하기 위해 필요합니다.

+ 콜백함수를 설명할 때 변수의 유효범위(scope)에 대한 내용과 동기/비동기식(Synchronous/Asynchronous)처리에 대해
   함께 알아보는 것이 좋을 것 같습니다.
   1. 동기 : 하나의 요청이 오면 완료가 된 후 다음 요청을 실행하는 방식 - 순차적 로직흐름
   2. 비동기 : 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식 - 동시 효율적 처리 가능, 즉시 응답이 아니기                       때문에 예상 밖의 결과가 나올 수 있다.

 

* 초급자용 콜백함수 기본 개념정리

 

---

* 중급자용 콜백함수 개념정리

이 식이 하나의 콜백함수를 만든 것이다.

 

파라미터를 second라고 넣어 쓸 수 있다.

 

만약 first()함수 다음으로 second()함수를 순차적으로 실행하고 싶다면 어떻게 코드를 작성해야할까?

 

파라미터에 second값을 넣어 완성시킬 수 있다.

 

콘솔창에 결과를 확인할 수 있다.

 

하지만 자바스크립트는 맨위에서 아래로 순차적으로 실행되기 때문에,
앞부분에 first()함수와 second()함수를 적으면 결국 결과는 같기 때문에 콜백함수가 필요없어 보이는데요...

 

.

.

 

콜백함수는 예를 들어 '협업' 등의 작업을 할 때 필요합니다.

first()함수 대신,
' first()
  console.log(2)'
만 작성해도 실행되지만 비동기식으로 될 경우 코드들이 안전하게 순차적으로 실행되지 않을 수도 있기 때문에 이 방법은 좋지 않다.
즉, first( function(){ console.log(2) } 로 작성하는 것이 더 나은 방법이다.

 

.

.

 

하지만 콜백함수를 많이 쓰게 되면 이런식으로 식이 우측으로 기울어 길어지며 콜백지옥이 펼쳐지는 불편하고 코드에 실수할 확률도 높아지게 되는데요,

 

이러한 어려움으로 인해 콜백함수로 사용하지 않고, promise나 async/await를 써서 대체 하고 있다고 합니다.

(출처: 코딩애플)

 

 

 

+ promise에 대해 알아보다 눈으로 보기 편하기 그려진 사진 첨부합니다. (출처: 생활코딩)

콜백함수는 가독성과 간결한 코드를 위해 function 혹은 괄호를 지우는 방법 등으로 표현할 수도 있습니다.

 

이후 promise, then, catch에 관한 내용은 CallBack함수2 편에서 설명하겠습니다.