비동기식 (Asynchronous) - 콜백 함수(Callback Function) 란?

 

자바스크립트 지식을 공부하면서 "콜백"이라는 단어를 많이 보았는데,

정확한 의미를 알려주는 책은 찾기 힘들었다. 

 

그래서 이번기회에 블로그를 정리하면서

모르는 내용들을 하나하나 파악하기로 결심하였다.

 

 

 

---

 

💖 콜백 함수(Callback Function)

콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다.

다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미합니다.

 

callback은 쉽게 말하자면 어떤 일을 다른 객체에게 시키고, 그 일이 끝나는 것은 기다리지 않고 끝나고 부를 때까지 다른 일을 하는 것을 말합니다.

 

그렇기 때문에 non-block이며, 비동기 방식의 함수를 사용합니다.

 

 

 

/* 1. 기본예제 */
function a(callback){ 
   console.log('나는 a');
   callback(); // callback = console.log('나는 b')
}

function b(){
   console.log('나는 b');
}

a(b); 
// 결과: 나는 a 나는 b
// b(콜백함수)를 a의 매개변수로 전달하니 a 안에서 b를 호출할 수 있게 됐습니다.

 

 

/* 2. 심화 예제 */

//계산기
function cal(func, x, y){ // 1. func, x, y라는 3개의 매개변수에 (add, 1, 2)값이 전달.
  return func(x,y); // 2. return add(1,2) 결과값 실행 (즉 add((a = 1,b = 2) 전달)
}

//더하기
function add(a,b){ // 3. (a = 1,b = 2) 전달받는다
  return a+b; // 4. return 1+2 실행
}

console.log(cal(add,1,2)); // 0. 인수로 (add(a,b), 1, 2)를 받아 cal 함수를 호출한다.
// 5. 결과: 3 출력

 

 

✨  함수는 자바스크립트에서 일급 객체입니다. ✨

 

 

📑 일급객체(First-class Object)

1. 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.

2. 고차함수(Higher order function)를 만들 수 있고, 콜백(callback)을 사용할 수 있다.

3. 일급객체의 특징

 

ⓐ 변수에 할당(assignment)할 수 있다.

 

const mul = function (num) {
  return num*num;
}

 

 

ⓑ 다른 함수를 인자(argument)로 전달 받는다. 

 

function mul(num) {
  return num*num;
}

// func는 매개변수임, 이름은 아무거나 지정해도 상관없음
function mulNum(func, number) {
  return func(number);
}

let result = mulNum(mul, 3); // 9

 

 

ⓒ 다른 함수의 결과로서 리턴될 수 있다.

 

function add(num1) {
  return function (num2) {
    return num1 + num2;
  }
}

add(3)(4); // 7

 

 

 

 

 

---

 

🔊 매개변수(parameter)

함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미합니다.

 

function 함수명("파라미터"){ 
  return 리턴값
}

 

🔊 인수(argument)

함수가 호출될 때 함수로 값을 전달해주는 값을 말합니다.

 

함수명(인수)

 

 

 

 

 

---

 

🎠 콜백 함수(Callback Function)를 사용하는 이유

1. 이벤트 기반 언어이기 때문.

 

2. javascript는 기본적으로 비동기적 방식을 사용하기 때문에, 작업이 순차적으로 실행되어야 하는 경우에, 함수가 원치 않는 순서로 실행되어, 결과가 뒤바뀔 수 있다.

 

 

 

✨  자바스크립트는비동기 처리방식의 문제점을 해결해주기 위해 ✨

✨ 특점시점에서 호출이 되도록 사용하는 함수 ✨

 

 

 

 

---

💻 콜백함수(Callback Function) 사용 원칙

1. 익명 함수 사용

 

function item(a, b){ 
   console.log(`${a} + ${b}의 결과값은 ${a+b}이다`);
}

item(1, 2); 
// 결과값 : 1 + 2의 결과값은 3이다

 

 

 

2. 함수의 이름만 전달

 

[ TIP ] JavaScript Data Type
- number, string, boolean, object(function, array, data, regexp), null, undefined

 

function whatYourName(name, callback) {
	//name = 'miniddo' , callback = finishFunc()
    console.log(`name:  ${name}`); //`name:  ${name= 'miniddo'}`
    callback(); // callback() = finishFunc() // finishFunc() 실행 ▶ console.log(`finish function`);
}

function finishFunc() {
    console.log(`finish function`);
}

whatYourName('miniddo', finishFunc);

<output>
name: miniddo
finish function

 

 

 

3. 전역/지역 변수를 콜백 함수의 파라미터로 전달 가능

 

- 전역변수(Global Variable) : 함수 외부에서 선언된 변수

- 지역변수(Local Variable) : 함수 내부에서 선언된 변수

 

let fruit = 'apple';	// Global Variable = 전역변수

function callbackFunc(callback) {
    let vegetable = 'tomato';	// Local Variable = 지역변수
    callback(vegetable);
}

function eat(vegetable) {
    console.log(`fruit: ${fruit} / vegetable: ${vegetable}`);
}

callbackFunc(eat);

<output>
fruit: apple / vegetable: tomato

 

 

 

 

 

---

 

👏 콜백함수 비동기 처리 예제

 

console.log('hi');
setTimeout(function() {
	console.log('bye');
} 3000);
console.log('hi again');

// hi
// hi again
// bye (3초 후 출력)

 

 

 

🎁 예제가 진행되는 방식을 이해를 돕기위한 영상 🎁

 

https://www.youtube.com/watch?v=8aGhZQkoFbQ 

 

이벤트 루프란 무엇인가?

 

 

 

 

---

 

👎 콜백 지옥(callback hell)이란?

1. 콜백 함수를 익명 함수로 전달하는 과정에서 또 다시 콜백 안에 함수 호출이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상을 말한다.

 

2. 주로 이벤트 처리나 서버 통신과 같은 비동기 작업을 제어하기 위해서 사용되는데 이러한 프로그래밍은 가독성이 떨어지고 코드 수정을 어렵게한다.

 

 

출처: https://adrianalonso.es/desarrollo-web/apis/trabajando-con-promises-pagination-promise-chain/

 

/* 콜백지옥 예제 */
// 콜백지옥 함수 선언 => 1초 후 number + 10 결과값
function 콜백지옥 (number, callback) {
      setTimeout(()=>{
        const result = number + 10;
          callback(result);
      }, 1000);

 

콜백지옥(0, (result) => {
        console.log(result) 
      }); 
 // 결과값 : 1초 후 10 출력

 

// 반복적으로 콜백지옥 함수를 실행하고 싶다.
콜백지옥(0, (result) => {
     console.log(result); 
     	// 1. 결과값 : 1초 후 10출력
        
        /*1번 결과값 10이 result안에 들어갑니다. (result = 10) */
        콜백지옥(result, (result) => {
        console.log(result); 
       	 	// 2. 결과값 : 1번 실행 1초 후 20출력
        
        	 /*2번 결과값 20이 result안에 들어갑니다. (result = 20) */
       		 콜백지옥(result, (result) => {
        	 console.log(result); 
            	 // 3. 결과값 : 2번 실행 1초 후 30출력
             
             	 /*3번 결과값 30이 result안에 들어갑니다. (result = 30) */
        		콜백지옥(result, (result) => {
        		console.log(result); 
                	// 4. 결과값 : 3번 실행 1초 후 40출력
                
     			});
     		});
     	}); 
	}); 
    
   /* 결과값 */
    // 10 [00:01]
    // 20 [00:02]
    // 30 [00:03]
    // 40 [00:04]

 

 

 

 

 

---

 

👍 비동기를 제어하는 방법 (콜백 지옥 탈출)

1. Promise

https://tlsdnjs12.tistory.com/14

비동기식 (Asynchronous) - promise 이란?

 

2. Promise을 활용한 async/await

https://tlsdnjs12.tistory.com/15

비동기식 (Asynchronous) - Promise를 활용한 async/await 이란?

 

 

 

 

---

 

 

 

https://tlsdnjs12.tistory.com/12

동기식 (Synchronous) / 비동기식 (Asynchronous) 이란?