오늘은 개인적으로 진행중인 코딩스터디에서 나온 토픽에 대해 궁금해져서 공부한 내용이다.
자바스크립트 신택스를 공부하다가,
callback함수, arrow function 등 이야기가 나왔다.
그런데 근본적으로 왜? callback함수를 쓰는가.
왜?
WHY?
(왜에 대한 궁금증은 정말 중요하다고 믿고있다. 그래서 왜....에 대해 곰곰히 생각해봄)
콜백함수 없이 쓰기
function repeatNoCallback(num) {
for (let i = 0; i < num; i++) {
print("hello world");
}
}
function print(string) {
console.log(string);
}
repeatNoCallback(5);
매우 간단한 함수이다.
num이라는 숫자를 받아서 그만큼 'hello world'를 반복출력한다.
두 함수는 같은 스코프 내에 존재하고, 굳이 콜백을 쓰지않아도 print()로 호출할 수 있다.
조금 생각을 해보자 왜쓸까..
만약 다른파일에 있다면? import로 가져올 수도 있고 ..
상위스코프에 있다면 당연히 callback없이 접근가능하고,,,
흠흠...
콜백함수 사용
콜백을 사용하면 이렇게 바뀐다.
function repeatYesCallback(num, callback) {
for (let i = 0; i < num; i++) {
callback("hello world");
}
}
function print(string) {
console.log(string);
}
repeatYesCallback(5, print);
결론적으로 콜백함수는 추상화를 위함이다.
처음엔 굳이? 라는생각이 들었지만..
모던자바스크립트 책을 읽다가 명쾌한 해답을 찾았다.
설명하자면,
두 함수가 하는일은 결국 같다.
넘겨받은 num의 수만큼 hello world를 반복출력 하는 것.
그런데 그냥 출력하는 현재 동작말고 다른 동작으로 변경해야한다면?
콜백을 썼다면 콜백함수만 수정해주면 된다.
왜냐하면 함수 내에서 해야할 일을 callback함수로 추상화하여 전달받았기 때문이다.
콜백함수를 사용한 repeatYesCallback 함수는 더이상 내부로직에 강력히 의존하지 않고,
외부에서 로직의 일부분을 함수로 전달받아 수행하므로 더욱 유연한 구조를 가지게 된다.
즉, 콜백함수는 함수 외부에서 주입하기 때문에 자유롭게 교체할 수 있다는 장점이 있다.
결국 추상화를 통한 코드 가변성과 확장성을 위한 장치라는 점에서 콜백함수의 장점을 설명할 수 있겠다!
모던자바스크립트 책의 "12.7.4 콜백함수"에 있는 설명이다.
속이 시원하군.
'Web Development' 카테고리의 다른 글
styled-icon color가 변경 삽질기 & 해결방법 (0) | 2022.03.15 |
---|---|
[JS] Event loop 문제 도전하기 + 풀이 (0) | 2022.01.17 |
var 변수와 스코프 (0) | 2022.01.07 |
자바스크립트의 특징; 인터프리터, 명령형, 함수형, 프로토타입 기반 객체지향 언어 ? (0) | 2022.01.03 |
align-content vs align-items 차이 (0) | 2021.08.23 |