🎇 콜백 함수

callback
JS는 함수도 하나의 자료형으로 취급하기 때문에 매개변수로 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 콜백 함수라고 한다.

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( '동의' );
}

function showCancel() {
  alert( '취소' );
}

ask( '동의하십니까?', showOk, showCancel );
// 함수 showOk와 showCancel이 ask의 yes, no 매개변수로 전달됨
// showOk, showCancel과 같은 것을 콜백 함수, 콜백이라고 부른다.

함수를 함수의 매개변수로 전달하고, 나중에 필요할 때 호출한다는 의미에서 call back 이라고 불려진다.

위 코드를 아래과 같이 작성할 수도 있다.

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  '동의하십니까?', 
  function() { alert( '동의' ); },
  function() { alert( '취소' ); } 
 );

ask 안에 호출된 함수는 이름이 없는 함수, 익명함수 anonymous function 이다.
익명 함수는 변수에 할당된 것이 아니기 때문에 ask 바깥에서는접근할 수 없다.

---

🔗 콜백 함수 예시

forEach()

배열이 가지고 있는 forEach() 메소드는 배열 내부의 요소를 이용해서 콜백 함수를 호출한다.

배열이 가지고 있는 메소드 중에서 콜백 함수를 활용하는 메소드는
기본적으로 아래와 같은 형태를 가진다.

function (value, index, array) {}

const numbers = [12, 34, 45, 345, 234];

numbers.forEach(function (value, index, array) {
	console.log(`${index}번째 요소 : ${value}`);
});

filter();

const numbers = [2, 3, 4, 5, 6, 12];
const evenNum = numbers.filter(function (value) {
	return value % 2 == 0;
});

console.log(` 기존 : ${numbers}`); // 기존 : 2,3,4,5,6,12
console.log(` filter() : ${evenNum}`); // filter() : 2,4,6,12

---

🎇 화살표 함수

arrow function
화살표 함수는 콜백 함수를쉽게 입력하는 함수 생성 방법이다.
function 키워드 대신에 화살표 => 를 사용한다.

(매개변수) => {
 표현식 
}

(매개변수) => 리턴값

---

let sum = (a, b) => a+b;

표현식이 여러 줄이어서 중괄호를 쳐줬다면,
return 지시자를 사용하여 명시적으로 반환해주어야 한다.

let sum = (a, b) => {
  let result = a + b;
  return result; 
};

//let sum = function(a, b) {
//  return a + b;
//};

인수가 하나밖에 없다면 괄호를 생략할 수 있고,

하나도 없을 땐 괄호를 비어놓으면 되고, 생략할 수는 없다.

화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있다.

let age = prompt(' 나이 : ', 23);

let showMessage = (age > 19) ?
    () => alert('으른');
	() => alert('애');

showMessage();

---

참고 Modern JavaScript Tutorial