관리 메뉴

꿈꾸는 개발자

콜백함수에 대한 이해 본문

프로그래밍언어/Javascript

콜백함수에 대한 이해

rickysin 2022. 11. 20. 16:48

-codding apple 영상 참고: 

      function first(parameter) {
        console.log("1");
        parameter();
      }
      function second() {
        console.log("2");
      }
      first(second); //callback함수는 동기일 수도 비동기일 수도 있다=>
      //callback함수를 사용하는 이유: 함수를 순차적으로 실행하기 위해서 사용을 한다!
      //다른 사람이 작성한 코드를 가져와(여기에서는 first()) 그 다음 바로 내가 원하는 코드를 작성할 때
      //이 경우 function second => callback함수를 실행하면 된다!
      //위처럼 callback을 중복하다 보면 이제 callback hell이 발생하게 된다=>이럴 때는 promise로 해결하는 게 바람직하다!
      //.then()을 통해서 순차적으로 실행할 수도 있다(callback hell로 구성된 부분을)
      //아니면 async/await 등을 활용해서 작성을 하면 되기도 한다!

-생활코딩 영상 참고: 

  • 위 설명을 보면 val의 경우 즉시 실행되는 것이 아니라, function fn의 매개변수로서 나중에 실행되는 형태를 띄고 있다. 이러한 함수를 콜백(callback function)함수 라고 지칭한다! => 단, 콜백함수는 항상 비동기적으로 실행되는 것이 아니라, 동기일 수도 비동기일 수도 있다. setTimeout()과 같은 함수의 경우 콜백함수는 비동기적으로 실행된다! 
  • 참고로 자바스크립트의 함수는 일급 객체에 해당 한다. 단적인 예로, JS에서 함수는 변수의 값으로, 매개변수로, 즉 값으로 처리 되기 때문에, 일급의 자격을 갖게 된다고 보면 된다. 

위 예시 나온 것처럼 filter는 parameter로 callback함수를 받는다=> callback함수의 경우 매개변수로 element(필수)를 받고, 나머지는 [] 대괄호로 감싸져 있는 것은 필수에 해당하지 않는다! 

  const arr = [1, 2, 3, 4, 5];
      function myfilter(callback, arr) {
        //1.callback은 true or false를 return 하는 함수이다!=>callback이 true일 때만 element를 저장해 새로운 함수를 return 한다!ㄴ
        let newArr = [];
        for (let i = 0; i < arr.length; i++) {
          if (callback(arr[i])) {
            newArr.push(arr[i]);
          }
        }
        return newArr;
      }

-- filter함수를 예상해서 자체적인 newfilter함수를 만들기!


드림코딩 엘린 영상 참고:

 

JS 엔진의 관점에서 위의 코드를 분석해 왜 해당 순서로 출력됐는지 분석할 수 있어야 한다!