23.06.02) 잊지말자 콜백함수 (기억해라 즌쯔..)

🤓오늘 공부한 내용

📌콜백함수

 (1) 자바스크립트의 함수도 하나의 자료형이기 때문에 매개변수로 전달할 수 있다.

      이렇게 매개변수로 전달하는 함수를 '콜백함수'라 한다.

 (2) 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다.

 (3) 콜백함수는 때로는 가독성이나 코드 재사용 면에서도 사용 된다.

 (4) 비동기 방식으로 작성된 함수를 동기 처리하기 위해 필요 하다.

       - 동기 : 하나의 요청이 오면 완료가 된 후 다음 요청을 실행하는 방식 - 순차적 로직흐름
       - 비동기 : 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식
         (동시 효율적 처리 가능, 즉시 응답X 때문에 예상 밖 결과 나올수도 있다)

 

 

기본 예시)

1. a라는 매개변수를 가진 test 함수를 호출해보자

    자바스크립트는 함수의 매개변수가 어떤 자료형으로 들어와도 거르는 문법x (숫자,문자열,bool 다 가능)

const test = function (a) {
  console.log(a);
};

test("안녕하세요");
test(10);
test(true);

//안녕하세요
//10
//true

2. callback이란 이름의 함수를 만들고 test 함수의 매개변수에 callback함수를 전달해본다.

   호출하면 함수 그대로 출력이 잘 되는 것을 볼 수 가있다.

const test = function (a) {
  console.log(a);
};

const callback = function () {
  console.log("만나서 반가워요");
};

test(callback);

//ƒ () {
//console.log("만나서 반가워요");
//}

 

3. test 함수의 매개변수 a = callback함수이기 때문에 매개변수 a()로 호출도 가능하다

const test = function (a) {
  a();
};

const callback = function () {
  console.log("만나서 반가워요");
};

test(callback);

//만나서 반가워요

 4. 그렇다면 콜백함수에 매개변수 전달도 가능할 것이다 (콜백함수 매개변수로 숫자하나를 받아보기)

const test = function (a) {
  for (let i = 1; i < 4; i++) {
    a(i);
  }
};

const callback = function (i) {
  console.log(`${i}번째 만나서 반가워요`);
};

test(callback);

//1번째 만나서 반가워요
//2번째 만나서 반가워요
//3번째 만나서 반가워요

5. 응용) test함수의 매개변수에 배열을 넣어보고 콜백함수를 호출할 때 그 값을 넣어보기 

    (배열의 요소를 하나씩 반복을 돌면서 콜백함수의 매개변수로 전달해서 출력)

const test = function (array, a) {
  for (const value of array) {
    a(value);
  }
};

const array = [1, 23, 52];
const callback = function (i) {
  console.log(`${i}번째 만나서 반가워요`);
};

test(array, callback);

//1번째 만나서 반가워요
//23번째 만나서 반가워요
//52번째 만나서 반가워요

 

 

🔻참고자료

- 혼자 공부하는 자바스크립트 (이윤성) 책 참고

- https://velog.io/@ko1586/Callback%ED%95%A8%EC%88%98%EB%9E%80-%EB%AD%94%EB%8D%B0

 

📝회고

자바스크립트 문법 종합 강의를 듣는데 여러번 나오는 콜백함수,, 콜백지옥,,

이해가 안된 상태에서 강의만 줄줄 듣다보면 돌아서면 잊어버리고 계속 헷갈리게 되서 혼공스 책도 같이 보면서

예제 문제도 풀고 시간이 조금 걸리더라도 기초부터 탄탄하게 쌓고 싶다..

콜백함수의 기본 개념을 여러번 복습하고 일지에 남기면서 공부하니까 어느정도 이해가 되고 있는것 같다.