JavaScript| 클래스 예제와 콜백 함수 최종 정리

 

Counter이라는 class안에는

constructor()이라는 함수가 있는데

이건 처음에 생성이될 때 라고 생각하면 됨.

그 안에는counter이라는 변수가 있는데,

이 class를 이용해서 오브젝트를 만드는 순간 0으로 초기가 된다.

그 밑에는 increase라는 함수가 있는데 counter을 1씩 증가 시킨다.

(그리고 콘솔창에보여줌)

 

*class에서 함수를 선언할때는 function을 작성하지 않아도 된다.

 

const로 coolCounter이라는 변수를 만들고

new라는 연산자로 Counter의 값을 지정해준다.

new라는 키워드를 사용해서 class를 만들게되면

constructor가 실행이 되는데,

this.counter를 0으로 초기화 해준다.

 

그리고 coolCounter에 1씩 증가하는 increase를 주면 

호출할때 마다 consol.log에 1씩 증가되는 값을 볼 수있다.

 

coolCounter.incease();를 해석해보자면,

coolCounter라는 변수는 우리가 만든 Counter class를 가리키고 있고,

그 안에 increase()함수를 호출한다.

 

 

 

만약 여기서 5의 배수일때 마다 

yo!라는 문자열을 출력하고 싶다면,

increase함수에 if를 넣어서 설정할 수 있다.

 

 

 if (this.counter % 5 === 0) {

            console.log('yo!');

        }

 

만약, 이 counter가 5로 나눴을때 나머지 값이 0이라면

consol.log에 yo!를 출력해줘!라는 뜻.

 

여기서 문제점이 생긴다.

Counter 클래스 자체에서 하기때문에

coolCounter를 쓰는 사람이 조절할 수 없다.

만약 yo! 말고 다른 것으로 출력하고 싶을때나,

출력하는것이 아니라 사용자체에 팝업으로 보여주고 싶어도 설정할 수 없다.

 

 

 

그래서 이런 방법으로도 설정할 수 있다.

incease함수에 runIf5Times 인자를 전달해서,

if로 5로 나눴을때 나머지가 0일때만

그 인자를 실행해주는 식을 작성한다.

 

그럼 그 인자에 무엇을 실행할지 작성해야한다.

그것이 바로 printSomething 함수!

printSomething 함수는 consol.log에 yo!를 출력해주는 함수이다.

 

printSomething 함수를 increase의 인자로 작성하면 전달되어 실행된다.

 

 

 

 

만약 숫자까지 알고싶다면

runIf6Times에 this.counter로 인자를 주고,

그 인자를 printSomething 함수에 전달해서

consol.log에 ` `를 사용해서 ${num}으로 출력하면 된다.

 

 

이렇게 했을때의 장점은

우리가 조절할 수 있다는 점이다.

 

 

이렇게 문자열도 바꿀 수 있고,

일반 출력대신, alert을 사용할수도있다.

 

Counter class는 5배수가 될때마다 

어떤 동작을 하는지는 자체적으로 결정되어있지 않는다.

인자를 통해 사용하는 사람이 원할 때

기능을 전달하게 되면 수행하게 되는 것이다.

 

여기서 또 문제점은

coolCounter.increase();할때마다

인자에 printSomething을 할당해줘야한다는 불편함이 있는데,

이것은 아래처럼 바꿀 수 있다.

 

 

 

 

const coolCounter = new Counter(printSomething);

이렇게 coolCounter 변수 값 인자에 원하는 함수를 할당하면,

그게 Counter class로 할당되어져서

constructor(runEveryFiveTimes) 여기의 인자로 들어온다.

그럼 this.callback = runEveryFiveTimes;을 해줘서

아래에 increase()함수에 

5배수일때마다 this.callback(this.counter); 이 값을 적용시킨다.

 

여기서 this.callback은 function printSomething이고,

function printSomething에 인자값을 (num)줘서

숫자까지 받아오면

console.log(`'yo!' ${num}`); 이렇게 출력이 가능하다.

 

 

 

이런식으로 alertNum함수를 사용하면,

팝업창이 뜨는것을 볼 수 있다.

 

 

여기에서 만약,

Counter에 함수를 지정해주지 않으면

 

 

이렇게 타입에러가 나는 것을 볼 수 있다.

왜냐하면 undefined이기 때문이다. 그래서 호출할 수 없다.

 

this.callback이 데이터가 있는지 없는지를 확인해서

undefined이 아닐때만 this.callback을 불러야 한다.

 

즉, 클래스를 만들때 만드는 사용자가

콜백함수를 등록했으면 호출해주고,

등록하지 않았다면 호출을 하면 안된다.

 

 

이렇게 if를 사용해서 this.callback이 있을때만

실행을 시켜주는 식을 작성한다.

 

이때, 더 간결하게 작성할 수 있는 것이 &&연산자이다. 👇

 

 

 

 

class안에 우리가 원하는 기능을 모두 정의하게 되면,

사용하는 사람이 자세하게 컨트롤 할 수없고

재사용이 떨어지는 단점이 있다.

 

하지만, 콜백함수를 사용해서 클래스를 만들게되면,

사용하는 사람이 자기 입맛에 맞게 만들 수 있다.

 

하나의 클래스로 다양한 오브젝트를 만들어서

서로 다른 기능을 하는 오브젝트를 만들 수 있다.

즉, 클래스의 재사용 가능성이 높아진다.

 

클래스는 완전체로 만드는것보다

블럭놀이 처럼 원하는 기능을 끼워맞춰서 

재조립이 가능하게 만드는것이 좋다.