자바스크립트 - 콜백함수

이한결·2023년 1월 26일

스파르타코딩 여정 18일차 콜백함수 항해99

부트 캠프

목록 보기

28/98

1월 26일 여정 18일차이다.

프로그래밍의 제어권이라는 것은 무엇을 말하는 걸까요?

콜백 지옥이란 뭘까요?

추상화는 무엇일까요?

시작부터 어려운 질문이다. 이 질문에 답하기 위해 나 나름대로 이해한 것을 적어보려고 한다.

오늘의 Today I Learned

problem

콜백함수에 대해 공부하던 중에 저 질문에 답을 하지 못하여 몇시간이 콜백함수에 대하여 많은 생각과 자료를 찾아보게 되었다. 콜백함수라는 것은 함수 안에서 다른 함수를 사용하는 것을 가르킨다. 하지만 더 자세하게 알아보겠다.

try

나는 일단 항해99에 자료들을 찾아보게 되었다. 그곳에서는 함수의 인자로 함수를 전달하는 경우가 콜백함수이다라고 나와있다. 무엇인가가 부족하다 다른 자료를 찾아보기로 하였다.

solve

테코톡 유튜브 영상과 각종 블로그에서 정리한 것을 바탕으로 이해하였다.

일단 콜백함수는 foreach, map, filter와 같은 배열의 메서드에서 많이 경험해 보았다. 밑의 예시를 보자.

function solution(cipher, code) {
     let arr = [...cipher];
        let newArr = [];
        arr.forEach((a, i) => {
          if ((i + 1) % code === 0) {
            newArr.push(arr[i]);
          }
        });
        return newArr.join("");
}

내가 프로그래머스에서 푼 문제 중에 코드 하나를 골라 가져와보았다.
위의 코드에서 콜백은 밑의 부분이다.

   arr.forEach((a, i) => {
          if ((i + 1) % code === 0) {
            newArr.push(arr[i]);
          }
        });

위의 항해99의 자료에서 말한데로 함수의 인자로 함수를 전달하고 있는 것이 보인다.
그럼 콜백함수에 대해 알았으니 제어권으로 넘어가보겠다. 먼저 밑의 코드를 보자.

       const arr = ['이', '한', '결'];

            const printArray = () => {
                console.log(arr.shift());
                if (!arr.length) {
                    clearInterval(timer);
                }
            };

            const timer = setInterval(printArray, 5000);

위의 코드를 보면 printArray라는 함수가 보인다. 위 코드를 실행하면 arr 배열 안에 있는 문자 '이한결'이 5초마다 실행되어 브라우저 콘솔에 나온다.
만약 제어권을 갖게 되면 다음과 같은 제어권을 넘겨 받는다.

콜백 함수를 호출하는 시점에 대한 제어권

콜백 함수를 호출할 때 인자로 넘겨 줄 값들을 어떤 순서로 넘길 것인지에 대한 제어권.

콜백 함수의 this가 무엇을 바라보도록 정할 지에 대한 제어권. 만약 아무것도 정하지 않은 경우 전역 객체를 바라본다.

그림 위의 코드를 보자.
printArray 함수가 결국 setInterval함수에 의해 5초 마다 '이한결'을 자동으로 실행하고 있는 것이다. printArray의 제어권은 결국 setInterval에 있는 것이다.

그럼 다음으로 콜백 지옥은 무엇일까?
이 질문은 간단하게 답 할 수 있다. 콜백함수 안에 함수가 있고 그 안에 여러 함수 들이 계속 겹치면 콜백 지옥이 발생하게 된다. 이러한 콜백 지옥이 발생하면 가독성이 많이 떨어진다. 후에 자세하게 이야기하겠지만, 이러한 콜백 지옥을 막기 위한 Promise에 대해 자세하게 알아볼 것이다.

마지막으로 추상화는 무엇일까?
추상화하면 하나의 미술 작품밖에 안떠오른다. (농담입니다.)
가령 예를 들어보자 '철수', '민희', '영희' 이렇게 3명이 있다.
여기 3명의 공통점은 바로 사람이다. 그러면 나는 '사람'이라는 카테고리에 위의 3명을 정리할 수 있다. 여기서 3명의 공통점은 팔과 다리가 있고, 얼굴이 있으며, 눈과 코와 귀가 있다는 것이다.
여기서 눈치가 빠른 사람이면 추상화가 무엇인지 알 것이다.
추상화란 특정 기능을 하는 그룹의 공통된 기능을 정의하는 작업이다. 일반적으로 객체지향 프로그래밍 언어에서는 추상화를 여러가지로 지원한다.