드림코딩 by 엘리 강의를 보고 정리했습니다.
코드스쿼드 마스터즈 코코아 과정의 3주차에 class를 나누어 todo list 만들기 미션이 있었다. class라는 걸 알고는 있었지만 적극적으로 사용해본 적은 없어서 어떤 기준으로 class를 나누어야 하는지, constructor에는 어떤 내용을 넣으면 좋은지 감이 잡히지 않았다. + MVC 패턴 등 디자인 패턴에 대한 것들도 완전 처음 들어봐서 혼돈의 카오스였다. ㅋㅋㅋ ㅠㅠ
이런 구조가 머리로 이해가 안되면 코드 작성을 시작조차 못하는 스타일이라 약간 자괴감이 들기도 하고 피하고 싶기도 하는 마음... 그래도! 공부를 더 하다가 예전에 봤던 엘리님 영상을 다시 보니 이해가 잘 되는 부분이 있어서 정리를 해보려고 한다.
class Counter {
constructor() {
this.counter = 0;
}
increase() {
this.counter++;
console.log(this.counter);
}
}
const coolCounter = new Counter();
coolCounter.increase(); // 1
coolCounter.increase(); // 2
coolCounter.increase(); // 3
constructor
에는 객체가 생성됨과 동시에 필요한 값을 넣어주면 되는 것이다.
그럼 여기서, counter가 5의 배수가 될 때마다 알려주는 기능을 넣어보자.
class Counter {
constructor() {
this.counter = 0;
}
increase() {
this.counter++;
console.log(this.counter);
if (this.counter % 5 === 0) { // 추가된 부분
console.log('yo!');
}
}
}
const coolCounter = new Counter();
coolCounter.increase(); // 1
coolCounter.increase(); // 2
coolCounter.increase(); // 3
coolCounter.increase(); // 4
coolCounter.increase(); // 5
// yo!
Counter 클래스 안의 increase 라는 메소드에 직접 추가를 해주었다. 여기서 문제점이 있다!! Counter 클래스 자체에 들어있기 때문에 사용자가 조절을 할 수가 없다. 만약에 yo! 가 아니라 다른 내용을 출력하고 싶다면? 혹은 console.log 가 아니라 alert 로 하고 싶다면?
흐음. 그러면 increase에게 콜백함수로 전달해보자.
class Counter {
constructor() {
this.counter = 0;
}
increase(runIf5Times) {
this.counter++;
console.log(this.counter);
if (this.counter % 5 === 0) {
runIf5Times();
}
}
}
const coolCounter = new Counter();
function printSomethig() {
console.log('yo!');
}
coolCounter.increase(printSomethig); // 1
coolCounter.increase(printSomethig); // 2
coolCounter.increase(printSomethig); // 3
coolCounter.increase(printSomethig); // 4
coolCounter.increase(printSomethig); // 5
// yo!
constructor
에서 콜백함수를 받는다 !!class Counter {
constructor(runEveryFiveTimes) {
this.counter = 0;
this.callback = runEveryFiveTimes;
}
increase() {
this.counter++;
console.log(this.counter);
if (this.counter % 5 === 0) {
this.callback();
}
}
}
function printSomethig() {
console.log('yo!');
}
const coolCounter = new Counter(printSomethig); // 생성자에 콜백함수 전달
coolCounter.increase(); // 1
coolCounter.increase(); // 2
coolCounter.increase(); // 3
coolCounter.increase(); // 4
coolCounter.increase(); // 5
// yo!
만약에 객체를 생성할 때 콜백함수를 넘겨주지 않으면 어떻게 될까?
new Counter()
그냥 이렇게만 쓰면, constructor에서 runEveryFiveTimes
가 undefined
이 되면서 에러가 발생한다.
이를 방지하기 위해서는 undefined
인지 아닌지 확인을 하고 undefined
이 아닐 때만 콜백을 불러야 한다.
increase() {
this.counter++;
console.log(this.counter);
if (this.counter % 5 === 0) {
this.callback && this.callback(); // 이 조건을 추가해주면 된다.
}
}
&& 연산자의 특성 (앞쪽이 true일 때 뒤쪽이 실행) 을 이용하여 조건을 추가해준다. 참고로 this.callback
이라고만 써도 true인데, false 값을 제외한 모든 값은 true이기 때문이다.