[JavaScript] 자바스크립트의 기초_콜백(Callback) 함수

---

 

 

사이드 프로젝트를 위한 자바스크립트

인프런 한 입 크기로 잘라먹는 리엑트(React): 기초부터 실전까지
강의를 기반으로 정리하였으며, 상업적 목적이 아닌 학습 기록용 입니다.

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

 

 

목차

콜백함수

콜백함수의 활용

 

---

 

 

콜백함수

콜백 함수
자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미하며, 함수의 특정 시점에 실행될 다른 함수의 인수를 넘겨주는 방식이다.

콜백 함수 동작 원리
1. main 함수와 sub 함수가 존재한다.
2. main 함수를 호출하면서 sub 함수를 main 함수의 인수로 전달한다.
3. main 함수 내부에서는 전달받은 sub 함수를 value()와 같이 호출하여 실행한다.

// 1. 콜백함수: 자신이 아닌 다른 함수에, 인수로써 정달된 함수를 의미한다
function main(value) {
  console.log("start");
  value(); // 다른 함수를 값으로 사용하여 다른 함수 출력이 위 함수를 통해 진해됨
  console.log("end");
}

function sub() {
  console.log("I am sub");
}

// main(sub);

// 화살표 함수
main(() => {
  console.log("i am sub");
});

 

 

---

 

 

콜백함수의 활용

콜백 함수의 활용
반복적인 동작을 수행하거나, 특정 로직을 다양한 방식으로 처리해야 하는 경우 용이하다.

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

// repeat(5);

// 중복코드를 작성하게 되면 효율성이 낮아짐
function repeatDouble(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx * 2);
  }
}

// repeatDouble(5);

// 콜백함수 추가
function repeat(count, callback) {
  for (let idx = 1; idx <= count; idx++) {
    callback(idx);
  }
}

// 간결하게 나타낼 수 있음
repeat(5, (idx) => {
  console.log(idx * 2);
});