오늘 익힐 개념은 콜백함수와 이벤트 드리븐 입니다.
먼저, 콜백함수에 대해 설명해보겠습니다.
콜백함수란? 함수 안에 매개변수로 들어가는 또 다른 함수 라는 뜻입니다.
콜백함수를 쓰는 이유:
JS의 특징인 비동기처리를 위해서 콜백 함수를 씁니다.
비동기처리를 위한 방법으로 여러가지 방법이 있는데, 그 중 하나라고 생각하면 됩니다! 단, 단점이 있기에 (콜백지옥) Promise 나 async/await 를 쓰는 경우가 많습니다.
개념은 간단합니다. 함수 안에 들어가는 함수로, 어떠한 조건이 맞을 때 그 함수를 실행하게 해주면 됩니다.
예제 코드 입니다.
function greet(name, callback) {
console.log("Hello, " + name + "!");
callback();
}
function sayGoodbye() {
console.log("Goodbye!");
}
greet("John", sayGoodbye);
//chatGPT 출처이 코드에서의 콜백 함수는 greet 함수에 2번째 인자(매개변수)로 들어간 callback 입니다.
greet 함수는 Hello, ${name}! 을 출력한 뒤, 콜백 함수를 호출하는 구조입니다.
2번째에 있는 함수가 바로 콜백함수로 쓰려고 하는 sayGoodbye 함수인데,
이 함수를 greet의 인자로 넣어주게 될 때,
greet("콜백함수", sayGoodbye);
는
Hello, 콜백함수!
Goodbye!
가 출력되게 됩니다.
저번 글에 동기와 비동기 처리에 대한 장단점에 대해서도 개념정리를 했었는데,
그 중 하나가 비동기 처리는 처리 순서가 정해지지 않고, 처리가 되는 것부터
해결해주는게 성능면에선 효율적이지만,순서를 정하는게 어려워 단점이기도 했는데,
이걸 보완해주는게 콜백함수이고,
이 콜백 함수는 적절하게 사용하지 못한다면,
callback(callback(callback(callback(callback))))
이 코드처럼 꼬리에 꼬리는 무는 뫼비우스의 콜백함수, 콜백지옥이 시작되기에
가독성이 현저히 떨어집니다.
이러한 단점을 보완하기 위해 나온 개념인 Promise, async/await를
다음 시간에 개념을 파헤쳐보겠습니다.
다음으론 이벤트 드리븐입니다.
Event driven : 이벤트를 기반으로하다.
JS의 큰 특징입니다. 이 특성으로 인해, 현재 웹 애플리케이션이라는 개념이 등장했는데,
반응형 웹사이트들, SNS 들을 구현 가능하게 하는 특징입니다.
개발자 IT 용어는 설명하기 어렵지만, 예를 보면 쉽습니다.
document.getElementById("myButton").addEventListener("click", function() {
console.log("Button was clicked!");
});
JS 를 배울 때, 초보자 단계에서 가장 먼저 배우는 것 중 하나인 이벤트리스너 입니다.
이처럼 이벤트리스너는, 이벤트를 기반으로 하는 JS에서 자주쓰는 내장 함수인데,
위 코드는 myButton이라는 ID를 가진 태그를(버튼) 클릭하면,
버튼이 클릭 되었습니다! 라는 로그를 호출하는 함수를 콜백함수로 가지고 있습니다.
버튼이 항상 눌리기만을 기다리는 저 코드 덕분에, 버튼을 누르면 이벤트가 발생하는 동적이고 스마트한 기능을 구현 가능하게 합니다.
addEventListener는 인자로 동작,콜백함수를 받는 것도 알아두면 유용하며,
다른 예제를 통해 더 알아보면,
let timerId = setInterval(function() {
console.log("This message will be logged every 2 seconds.");
}, 2000);
// Stop the timer after 10 seconds
setTimeout(function() {
clearInterval(timerId);
}, 10000);
이러한 코드가 있는데,
timerId 는 2초마다 메세지를 띄우는 setInterval 함수이고
아래엔 setTimeout을 통해, 10초 뒤에 timerId함수를 멈춰주는 함수입니다.
이벤트 기반 동작을 설명할 때 항상 나오는 함수들인데,
이러한 기능을 통해 어떠한 이벤트를 기다릴수도, 실행 순서를 구체적으로 예약해서 설계할수도 있는 게 JS의 특징이자 장점이라고 생각합니다.
SNS에서 새로운 이벤트(친구의 좋아요, 댓글 , 게시글)에 빠르게 반응하고, 알람이 오는 것도 이벤트 기반 동작 방식으로 인하여 가능한 것이고
이벤트 기반에 대한 개념을 잘 알아두고, JS 공부를 한다면
JS를 통해 어떠한 작업을 할 지 가늠할 수 있을거라고 생각합니다.
다음에 알아 볼 개념은
async/await, promise입니다.
어려운 개념인만큼 열심히 공부하고 오겠습니다!
