JavaScript 비동기 처리와 콜백 함수에 대하여

포스팅.. 너무 중독성있다...!

자기 개발과 재미를 한 번에🤘

콜백 함수에 대해 이해가 가지 않아 이틀간 조사를 진행했는데, 감을 잡고 나니 생각보다 어려운 내용은 아니었다.

여러 포스팅을 참고하면서 정신 차리고 코드를 읽지 않아서 그런 듯..?

주변 친구들이 하나, 둘 취업에 성공하면서 자극도 되면서, 싱숭생숭하기도 하고 조급한 마음이 들어서 인 듯하다.

빨리, 많이 보다는 천천히 꼼꼼하게 글을 읽는 습관을 들이도록 노력해야겠다.

---

비동기 처리

비동기 처리란, 특정 코드의 연산이 끝나지 않아도 기다려주지 않고 다음 코드를 먼저 실행하는 것을 말한다. JavaScript의 특징 중 하나이다. 비동기 처리를 사용하는 대표적인 사례로는 Ajax가 있다.

 

---

[예시]

다음은 console에 문자열을 출력하는 코드이다. 

 

function() {
	console.log("Hello JS!");
    
        setTimeout(function() {
            console.log("Good bye");
        }, 2500);

        console.log("asynchronous test");
}

 

    ‣ setTimeout() : Web API 중 하나로, 코드를 바로 실행시키지 않고 지정된 ms만큼 지난 후 코드를 실행시킨다.

 

일반적인 Java 코드라고 생각할 경우 console에 다음과 같이 출력된다고 예상할 수 있다.

 

Hello JS!
Good bye
asynchronous test 

하지만 비동기 처리가 적용되어 실행 결과는 다음과 같이 출력된다.

 

Hello JS!
asynchronous test
Good bye

---

개발자의 의도가 실행 결과와 같다면 문제가 되지 않지만, 만일 Hello JS! 출력 2.5초 후 Good bye가 실행되기를 원했다면 문제가 발생한다. 이때 우리는 callback 함수를 사용해 문제를 해결할 수 있다.

 

---

콜백 함수(callback function)

콜백 함수는 함수에 인자로 쓰이는 함수를 말한다. 다음은 간단한 예시이다.

 

---

 

[예시 1]

 

function sumCalc(num1, num2, callback) {
	var sum = num1 + num2;
    
    	callback(sum);
}

sumCalc(4, 6, function(sum) {
	console.log(sum);
});

 

sumCalc 함수를 호출할 때 인자로 익명 함수를 넣어 호출하는 코드이다. 호출에 의해 sumCalc 함수가 동작하면 num1 매개변수에는 4가, num2 매개변수에는 6이 저장되고, sum의 값은 10이 된다. 그다음 callback 함수가 동작해 console에 10이라는 값이 출력되게 된다.

 

---

[예시 2]

function print(name) {
		alert("안녕하세요, " + name + "님!");
	}
	
function getName(callback) {
		var name = prompt("이름을 입력 해 주세요.");
		print(name);
}
	
getName(print);

 

이 코드는 getName 함수의 인자로 print 함수를 사용한 코드이다. getName 함수의 매개변수에 print 함수가 저장되고, getName 함수의 실행에 따라 prompt 창이 호출, name 객체에는 prompt 입력 값이 저장된다. 그 다음 print 함수가 실행되고, 인자로 넘어간 name 객체의 값이 alert창에 출력된다.

 

---