TIL 008 | 콜백 함수와 화살표 함수

1. 콜백 함수 (Callback function)

자바스크립트에서 함수는 객체이기 때문에 함수의 매개변수로 전달할 수 있는데, 다른 함수에 매개변수로 넘겨준 함수를 콜백 함수라고 부른다. 어떠한 이벤트가 발생하면 매개변수로 전달된 함수로 다시 호출되기 때문에 callback이라는 표현을 쓴다.

let numbers = [1, 2, 3, 4, 5, 6, 7];

function isOddNumber(num) {
  return num % 2;             // number%2 === 1 (true), number%2 === 0 (false)
}

이 다음에 나오는 filter 메서드는 array 관련 메서드로 조건에 맞는 요소들만 모아서 새로운 배열을 반환한다. 만약 조건에 부합되는 요소가 아무것도 없다면 빈 배열을 반환한다. filter 메서드를 사용하기 위해서는 각 요소를 시험할 함수가 필요한데, true를 반환하면 요소를 유지하고, false를 반환하면 요소를 버리게 된다. 이를 위해 위에서 isOddNumber 함수를 선언한 것이다.

// 위의 코드에서 이어짐
const oddNumbers = numbers.filter(isOddNumber);
console.log(oddNumbers);    // [1, 3, 5, 7]

filter 메서드를 이용해서 홀수만으로 이루어진 새로운 배열이 생성되었다. 이 예시에서 앞에서 선언되었던 isOddNumber 함수 filter 메서드의 매개변수가 되었고 위에서 선언했던 함수가 다시 호출되었다. 따라서 isOddNumber 함수는 콜백 함수라고 할 수 있다.
callbackFunction 안에서 3개의 인자 (element, index, array) 를 가지는데 첫번째 부분인 element 인자만 필수로 지정되어야하고 나머지는 선택적입니다.

---

2. 화살표 함수 (Arrow function expressions)

함수를 만드는 조금 더 간결한 방법으로 화살표 함수(arrow function)을 사용 할 수 있다. 기존 함수의 표현식에서 function 키워드를 삭제하고 매개변수의 괄호( )와 코드블록{ } 사이에 화살표(=>)만 넣어주면 바로 화살표 함수(Arrow function)가 된다.

function addNumbers1 (num1, num2) {                // 함수의 선언식
  return num1 + num2;
}
console.log(addNumbers1(3,5));  // 8


let addNumbers2 = function (num1, num2) {         // 함수의 표현식
  return num1 + num2;
}
console.log(addNumbers2(3,5)); // 8


let addNumbers3 = (num1, num2) => num1 + num2;    // 화살표 함수

console.log(addNumbers3(3,5)); // 8

화살표 함수를 사용할 때 만약 parameter가 하나라면 ( )를 생략해도 되고, 함수 내부의 내용이 return만 있다면 중괄호{ }와 return도 생략할 수 있다. 위의 예시에서는 parameter가 2개이기 때문에 ( )는 생략하지 않았고, 함수 내부는 return만 있기 때문에 { }와 return이 생략된 것을 알 수 있다.

---

콜백함수에서 사용했던 예제를 화살표 함수로 다시 작성할 수 있다.

let numbers = [1, 2, 3, 4, 5, 6, 7];

let oddNumbers = numbers.filter(number => number % 2);

console.log(oddNumbers);    // [1, 3, 5, 7]

화살표 함수로 코드가 더 간결해졌기 때문에 굳이 콜백 함수의 예시처럼 isOddNumber 함수를 따로 선언하지 않고 바로 filter 메서드의 인자에 함수를 쓴 형태이다.

---

references

https://www.javascripttutorial.net/javascript-callback/
https://bigtop.tistory.com/35
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://webclub.tistory.com/649