[함수] 콜백(callback) 함수

◎  콜백 함수

: 힘수를 매개변수로 받아 해당 함수를 호출 하는 함수

  - 함수 내부의 결과값을 함수 외부로 내보낼 때 주로 사용(일종의 return문과 유사기능)

 - 함수 실행 결과값을 리턴이 아닌 매개변수로 넘어온 함수를 호출해서 넘겨주는 방식을 콜백이라 하며 

  이때 매개변수로 넘어온 함수를 의미

  - 콜백 함수를 사용하는 구조는 특정함수의 매개변수 값으로 콜백함수를 넘긴 후,

    처리 결과를 콜백함수의 매개변수에 담아 콜백함수를 호출하는 구조

- 로직구현 부분은 동일하고 로직 처리 부분을 다양하게 처리해야 하는 경우 유용 (유지보수 및 확장의 용이성)

- return문이나 콜백 함수를 사용하는 경우 결과는 동일. 일반적으로 단순한 처리는  return문을 이용하는 것이 더 효율적

- 비동기 처리를 주로 사용 

* 사용

  - 리스너로 사용(버튼 클릭 등..)

  - 타이머 실행함수로 사용 (특정 시간마다 실행하는 경우)

  - 서버와 데이터를 주고 받을 떄 사용하는 jQuery Ajax 기능 등에서 결과물을 받을 때 (서버 접속, DB접속 등)

 

 * 기본 문법

function name(callback){
  로직 구현 부분
  callback(); //로직 처리 부분을 다른 함수에 넘겨줌
}

 

// 특정함수의 매개변수 값으로 콜백함수를 넘김
function cal(n1, n2, call) {
  let result = n1 + n2;
  // 처리결과를 콜백함수의 매개변수에 담아 콜백함수 호출
  call(result);
}
function res1(result) {
  document.write(`결과: ${result}`);
}
function res2(result) {
  document.write(`결과2 ${result}`);
}
cal(1, 3, res1); // 결과 : 4

 

  <div id="print">print</div>
  <input id="dan" value="5" />
// 구구단 출력
document.querySelector('#print').addEventListener('click', () => {
  Gugudan(res); // 구구단 함수 실행
});

function Gugudan(inputDan) { 
  let dan = document.querySelector('#dan').value;

  inputDan(dan); // == res(calc) 실행
	// 단 value를 받아 콜밸함수 inputDan()의 인자로 함께 리컨
}
function res(calc) {
  for (let i = 1; i <= 9; i++) {
    document.write(`${calc} * ${i} = ${calc * i}<br> `);
  }
}

 

◎  콜백 함수의 사용

• 일반 함수의 콜백함수 사용

function call(result) {
	for(let i=0; i<3; i++) {
		result(i)
	}
}

function print(i) {
	console.log(`${i}번째`);

}

call(print) // 0번쨰 1번쨰 2번쨰

 

• 익명함수의 콜백함수 사용

- 함수 호출과 동시에 직접 호출

function call(result) {
	for (let i = 0; i < 3; i++) {
		result(i)
	}
}
call(function (i) {
	console.log(`${i}번째`);
})

• 배열의 콜백함수 사용

function (value, index, array){}

 *  map() 

- map()은 콜백함수에서 리턴한 값을 통해 새로운 배열을 생성하는 함수

let nums = [2, 4, 1, 2];

nums.map(function (value, index, array) {
console.log(`value: ${value}, index: ${index}, array: ${array}`);
// value: 2, index: 0, array: 2,4,1,2
// value: 4, index: 1, array: 2,4,1,2
// value: 1, index: 2, array: 2,4,1,2
// value: 2, index: 3, array: 2,4,1,2
})

 * forEach()

- forEach() 열 내부의 요소를 사용하여 콜백함수 호출

const num = [2, 3, 4, 1];
num.forEach(function (value, index, array) {
console.log(`value: ${value}, index: ${index}, array: ${array}`);
// value: 2, index: 0, array: 2,3,4,1
// value: 3, index: 1, array: 2,3,4,1
// value: 4, index: 2, array: 2,3,4,1
// value: 1, index: 3, array: 2,3,4,1

* filter()

- filter() 콜백 함수에서 리턴하는 값이 true인 요소를 보아 새로운 배열을 만듦

const nums = [12, 512, 51];
const even = nums.filter(function (value) {
	return value % 2 === 0;
})
console.log(even); // [12, 512]