[JavaScript] 자바스크립트 콜백 함수

S0ju·2022년 5월 10일
0

JavaScript

목록 보기
8/22

콜백 함수 : 어떤 다른 함수의 매개변수로 함수를 넘겨준 것

기분에 따라 다른 동작을 하게 하는 함수👇

function checkMood (mood){ //기분이 좋은지, 좋지 않은지 체크하는 함수
  if(mood === 'good'){
    //기분 좋을 때 하는 동작
    sing()
  } else {
    //기분 안 좋을 때 하는 동작
	cry()  
  }
}

function cry(){
  console.log("ACTION :: CRY");
}

function sing(){
  console.log("ACTION :: SING");
}

function dance(){
  console.log("ACTION :: DANCE");
}


checkMood("good"); //ACTION :: SING
checkMood("sad"); //ACTION :: CRY

이러면 dance는 써보지도 못하고 쓸 때마다 바꿔줘야 함
좀 더 융통성 있게

기분이 좋을 때 하는 동작 : goodCallback
기분이 좋지 않을 때 하는 동작 : badCallback

function checkMood(mood,goodCallback,badCallback){ //기분이 좋은지, 좋지 않은지 체크하는 함수
  if(mood === 'good'){
    //기분 좋을 때 하는 동작
    goodCallback(); //호출 -> 함수 실행
  } else {
    //기분 안 좋을 때 하는 동작
	badCallback(); //호출 -> 함수 실행
  }
}

function cry(){
  console.log("ACTION :: CRY");
}

function sing(){
  console.log("ACTION :: SING");
}

function dance(){
  console.log("ACTION :: DANCE");
}

checkMood("sad",sing,cry); //ACTION :: CRY
//기분이 good이 아니니까 badCallback 수행 -> cry라는 함수가 값에 들어옴 -> 함수 표현식 ->
//function cry라는 함수 자체를 badCallback라는 매개변수에 값을 담음 -> badCallback 매개변수의 값 호출 ->
//결과적으로 badCallback 호출은 cry함수 호출

콜백 함수란 함수의 파라미터로 함수를 넘긴 것
콜백 함수 이용 -> 유연한 동작 가능한 함수 생성 가능

profile
프론트엔드 개발자가 되기 위해 공부중입니다 : )

0개의 댓글

관련 채용 정보