[중앙정보처리학원] JavaScript* 콜백 (Callback)

콜백이란??

• 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 하고, 매개 변수를 통해 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 한다.

 

콜백의 핵심 : 동작을 파라미터화한다

• if문에 들어있는 조건식들만 파라미터로 전달한다면 쉽게 해결
• 자바스크립트의 함수는 일급 객체라서 함수에게 다른 코드를 전달하는 것이 가능.
• 단, 전달할 코드가 함수에 묶여있어야 한다는게 포인트

 

// 어떤 계산을 하는 함수
function operate(param) {
  console.log(`param = ${param}`);

  const x = param(10, 20);

  console.log('계산기 작동!!');
  const n1 = 10, n2 =20;
  const result = param(n1,n2);
  return result;
}

function add(n1,n2) {
  return n1 + n2;
}

// operate 호출 -> 다른 이름이 없는 함수를 전달함
const result = operate(function(n1, n2) {
  return n1 + n2;
});

console.log(`result: ${result}`);


// 경우의 수가 많기때문에 쓰는 게 콜백

 

 

콜백을 사용하면 기능을 호환할 수있는 몸체를 만들어놓고 나중에 필요할때마다 기능을 집어넣는 것과 같다

 

function showNumber(n, condition) {
  const nums = [];
  for (let i = 0; i<=n; i++) {
    if (condition(i)) {
      nums.push(i);
    }
  }
  console.log(nums);
}

showNumber(50,  n =>  n % 2 === 0);

showNumber(100, function (i) {
  return i % 2 === 1;
});
showNumber(10, function (i) {
  return true
});

 

 

 

 

 

예시 코드

const userList = [
  {
    account: "abc1234",
    userName: "대길이",
    job: "추노",
    address: "서울",
    hobbys: ["수영", "축구", "테니스"],
  },
  {
    account: "banana",
    userName: "빠나나",
    job: "과일",
    address: "서울",
    hobbys: ["푸드파이팅", "테니스"],
  },
  {
    account: "park1234",
    userName: "주차왕",
    job: "발렛파킹",
    address: "경기",
    hobbys: ["족구", "축구", "테니스", "영화감상"],
  },
  {
    account: "fire",
    userName: "불꽃남자카리스마",
    job: "게이머",
    address: "서울",
    hobbys: ["독서", "테니스"],
  },
];

 

라는 정보가 있다고 해보자

 

 

 

여러가지 응용상황

// 회원정보중에 취미가 딱 2개인 사람들만 추출해서 필터링해주세요.
function filterByHas2Hobby() {
  const filteredArray = []; // 필터링된 회원들을 다시 담을 배열

  for (const user of userList) {
    if (user.hobbys.length === 2) {
    filteredArray.push(user);
    }
  }


  return filteredArray;
}

// 서울 사는 사람들을 필터링해줘
function filterUserLiveInSeoul() {
  const filteredArray2 = [];

  for (const user of userList) {
    if (user.address === "경기") {
      filteredArray2.push(user);
    }
  } return filteredArray2;
}

// 콜백을 이용한 배열 필터링 함수
function filter(condition) {
  const filteredArray = []; // 필터링된 회원들을 다시 담을 배열

  for (const user of userList) {
    if (condition(user)) {
    filteredArray.push(user);
    }
  }
  return filteredArray;
}

// 서울 살면서 직업이 게이머인 사람 필터링해줘 (파라미터에 user를 담아줘야한다) (호출하는 함수(condition)에도 유저)
const filteredUsers = filter(function(user) {
  // return user.address === '서울' && user.job === '게이머';
  return user.hobbys[0].length ===5;
}); 

console.log(filteredUsers);