클래스와 콜백함수

class Counter {

 	constructor(){
		this.counter = 0;//counter라는 변수에 class를 이용하여 object를 만드는 순간 0으로 초기화 된다.
 	
    }
    
    increase(){//증가하는 함수
    	this.counter++;
        console.log(this.counter);
    }

}

const coolCounter = new Counter();//new생성자를 사용하면 0으로 초기화 됨

coolCounter.increase();//숫자 증가 답 1
coolCounter.increase();//숫자 증가 답 2

 

숫자가 증가했을 때 5가 될 때 마다알고싶다면? 아래 처럼 하면 된다.

class Counter {

 	constructor(){
		this.counter = 0;//counter라는 변수에 class를 이용하여 object를 만드는 순간 0으로 초기화 된다.
 	
    }
    
    increase(){//증가하는 함수
    	this.counter++;
        console.log(this.counter);
        if(this.counter % 5 === 0){
        	console.log('yo');
        }
    }

}

const coolCounter = new Counter();//new생성자를 사용하면 0으로 초기화 됨

coolCounter.increase();//숫자 증가 답 1
coolCounter.increase();//숫자 증가 답 2
coolCounter.increase();//숫자 증가 답 3
coolCounter.increase();//숫자 증가 답 4
coolCounter.increase();//숫자 증가 답 yo!

하지만 이렇게 했을 경우 문제점이 있다. class자체에서 하기 때문에 이 coolcounter을 쓰는 사람이 조건을 조절 할 수 없다. 내가 yo 말고 다른 것을 출력하고 싶다면? 아니면 출력하는 게 아닌 팝업을 보여주고 싶다면? 다양한 재미있는걸 하고싶다면? 그것을 컨트롤 할 수 있는게 없다. 그렇기 때문에 콜백함수를 인자로 넣어야한다. 

 

아래를 확인해보자

class Counter {

 	constructor(){
		this.counter = 0;
 	
    }
    
    increase(runIf5Times){//콜백함수인 runIf5Times 인자에 다른 함수를 넣어 수정이 가능하게끔 한다.
    	this.counter++;
        console.log(this.counter);
        if(this.counter % 5 === 0){
        	runIf5Times()//조건이 완성되면 인자 안에 들어있는 함수를 실행시킨다.
        }
    }

}

const coolCounter = new Counter();

function printSomething(){//인자에 전달할 함수
	console.log('yo!');
}
coolCounter.increase(printSomething);//숫자 증가 답 1
coolCounter.increase(printSomething);//숫자 증가 답 2
coolCounter.increase(printSomething);//숫자 증가 답 3
coolCounter.increase(printSomething);//숫자 증가 답 4
coolCounter.increase(printSomething);//숫자 증가 답 yo!

 

그럼 만약에 내가 숫자를 정확하게 알고 싶다면??????(5의 답이 'yo!'가 아니라 '5 yo!'가 되어야 한다면?)

-이렇게 하였을 때 우리가 class 바깥에서 조절할 수 있다. 

class Counter {

 	constructor(){
		this.counter = 0;
 	
    }
    
    increase(runIf5Times){//콜백함수인 runIf5Times 인자에 다른 함수를 넣어 수정이 가능하게끔 한다.
    	this.counter++;
        console.log(this.counter);
        if(this.counter % 5 === 0){
        	runIf5Times(this.counter)//숫자를 정확하게 알고싶다면
        }
    }

}

const coolCounter = new Counter();

function printSomething(num){//숫자라는 인자를 받아 숫자를 출력한다.
	console.log(`Wow! ${num}`);
}//버전 1

function alertNum(num){//혹은 이런식으로 바꿀 수도 있다.
	alert(`Wow! ${num}`);
}//버전 2
coolCounter.increase(printSomething);//숫자 증가 답 1
coolCounter.increase(printSomething);//숫자 증가 답 2
coolCounter.increase(printSomething);//숫자 증가 답 3
coolCounter.increase(printSomething);//숫자 증가 답 4
coolCounter.increase(alertNum);//숫자 증가 답 경고창 안에 5 Wow!

이문제점은 increase라는 함수를 호출할 때마다 printSomething이란것을 전달하면 너무 불편하다. 그래서 보통은 이렇게 한다.

class Counter {

 	constructor(runEveryFiveTimes){//클래스 안에 counter과 callback이 생김
		this.counter = 0;
        this.callback = runEveryFiveTimes;//변수에 인자를 할당한다. 
 	
    }
    
    increase(){
    	this.counter++;
        console.log(this.counter);
        if(this.counter % 5 === 0){
        	this.callback(this.counter)//숫자를 정확하게 알고싶다면
        }
    }

}



function printSomething(num){//숫자라는 인자를 받아 숫자를 출력한다.
	console.log(`Wow! ${num}`);
}//버전 1

function alertNum(num){//혹은 이런식으로 바꿀 수도 있다.
	alert(`Wow! ${num}`);
}//버전 2

const coolCounter = new Counter(printSomething);//생성자 인자 안에 함수를 전달해준다. 왜냐? class에 매개변수를 넣었으니까 그 값을 넣어야하기 때문

coolCounter.increase();//숫자 증가 답 1
coolCounter.increase();//숫자 증가 답 2
coolCounter.increase();//숫자 증가 답 3
coolCounter.increase();//숫자 증가 답 4
coolCounter.increase();//숫자 증가 답 경고창 안에 5 Wow!

클래스로 완전체를 만드는게 아닌, 원하는 모양을 끼워맞춰서 재조립을 하는게 좋다. 그렇기 때문에 콜백함수를 적는 것