[JS] Callback 함수 추가정리

Hyodduru ·2021년 10월 30일
0

JavaScript

목록 보기
24/60
post-thumbnail

출처 : 유튜브 드림코딩 자바스크립트

callback

Counter 라는 class 내에는 counter 라는 변수가 있는데 0부터 시작한다.
이 class는 object를 만드는 순간 0으로 초기가 된다.
class 내의 함수 선언할때는 function 안적어줘도 됌

class Counter {
    constructor(){
        this.counter = 0;
        
    }

    increase(runIf5Times){
        this.counter++;
        console.log(this.counter);
        if(this.counter % 5 ===0){
            runIf5Times(this.counter);
        }
    }}


const coolCounter = new Counter(); //object 생성
function printSomething(num){
    console.log(`yo! ${num}`)
}

function alertNum(num){
    alert(`Wow! ${num}`)
}
coolCounter.increase(printSomething);
coolCounter.increase(printSomething);
coolCounter.increase(printSomething);
coolCounter.increase(printSomething);
coolCounter.increase(alertNum); 
coolCounter.increase(printSomething);
coolCounter.increase(printSomething);
coolCounter.increase(printSomething);
coolCounter.increase(printSomething);
coolCounter.increase(printSomething);

callback 함수를 줌으로써 collCounter 사용자가 원하는 기능의 다양한 형태의 콜백함수 이용할 수 있음

문제점 : increase함수를 실행시킬 때마다 콜백함수를 호출해야하니 불편함 => 함수를 실행시킬때마다 일일히 콜백함수 실행시키는 것이 아니라 counstructor 내에서 콜백함수를 받는다.

constructure 에서 callback 함수 받기
class 를 완전체로 만들기 보다는 재조립이 가능한 형태로 만드는 것이 좋다!

class Counter {
    constructor(runEveryFiveTimes){
        this.counter = 0;
        this.callback = runEveryFiveTimes; //함수의 인자로 받아온 아이들을 
        				   //class 자체에서 기억하기 위해 
                        }

    increase(){
        this.counter++;
        console.log(this.counter);
        if(this.counter % 5 ===0){
            this.callback && this.callback(this.counter)    //if문을 
            적어줌으로써 counter 내에 콜백함수가 인자로 들어가지 않더라도 오류가 
            뜨지 않는다. 
                 
        }
    }}

    function printSomething(num){
        console.log(`yo! ${num}`)
    }
    
    function alertNum(num){
        alert(`Wow! ${num}`)
    }

const printCounter = new Counter(printSomething); //하나의 class 로 
                                              다양한 object 만들 수 있다. 
const alertCounter = new Counter(alertNum);

printCounter.increase();
printCounter.increase();
printCounter.increase();
printCounter.increase();
printCounter.increase();
alertCounter.increase();
profile
꾸준히 성장하기🦋 https://hyodduru.tistory.com/ 로 블로그 옮겼습니다

0개의 댓글