Javascript : Callback 함수 (중요)

출처: 한 입 크기로 잘라먹는 react

// 콜백함수 => 자신이 아닌 다른 함수에 인수로써 전달된 함수를 의미

function main(value) {
  console.log(1);
  console.log(2);
  value();
  console.log('end'); // 콜백 함수는 이처럼 main 함수가 원하는 타이밍에 실행시킬 수 있다.
}

function sub() {
  console.log('sub');
}

main(sub); // sub 출력 main이라는 함수에 sub라는 다른 함수가 호출 되는것을 callback함수라고 한다.
// 함수를 다른 함수의 인수로서 호출하는 것도 가능하다.

main(function () {
  console.log('i am 등신')
}) // 이렇게 쓸 수도 있다.

main(() => {
  console.log('나는 등신이다.')
}) // 이렇게도 가능하다. 이것도 콜백이다. 최상단에 선언한 main 함수에서 화살표 함수를 통해 호출하는 것 


// 2. 콜백 함수의 활용
function repeat(count) {
  for (let i = 0; i < count; i ++) {
    console.log(i);
  }
}

// 2. 콜백 함수의 활용
function repeatDouble(count) {
  for (let i = 0; i < count; i ++) {
    console.log(i * 2);
  }
}

repeat(5);
repeatDouble(5); // 이런 경우 구조가 비슷한 repeat 함수가 두개나 생성돼서 중복이 발생함

// 콜백은 이러한 문제를 개선시킬 수 있음

function repeat(count, callback) {
  for (let i = 1; i <= count; i++){
    callback(i);
  }
}

// 화살표 + 콜백함수
repeat(5, (idx) => {
  console.log(idx * 2); // 이렇게 하면 repeatDouble과 같은 결과를 얻을 수 있음. 중복 코드를 제거하고
});                        // 간결하게 코드를 작성하는데 도움이 된다