[Yeu] div를 품는 Class를 설계해보자

문제

문제링크

해결방법

자바스크립트의 Class를 잘 몰랐던 꽤나 고생했다....
나에게는 함정(?)인 부분이 있어서 조금 짜증나는 문제였다

1. Class 생성자 그리고 메서드

function solution() {
   class ClassYouMade {
      constructor(str) {
         this._div = document.createElement('div');
         this._str = str || "";
      }
     
     appendTo(parent){
      this._parent = parent;
     }
   }
   return ClassYouMade;
}

let MyDiv = solution();

코드 분석을 하면 함수 solution은 class를 return하는 함수다

변수 MyDiv에는 class를 만드는 함수 solution이 담겨있다

let cym1 = MyDiv('안녕');
let cym2 = MyDiv('안녕').appendTo(parent);

이 부분에서 문제가 발생하는데 이 코드를 실행하면 변수 cym1과 cym2은 다음과 같다

cym1은 생각하는대로 ClassYouMade 객체가 나왔는데

cym2는 undefined가 나오는 참사가 발생했다.

바로 메서드 appendTo()를 실행해서인데
다음 코드에는 차이가 있다

let cym2 = MyDiv('안녕').appendTo(parent);
----------------------------------------
let cym3 = MyDiv('안녕');
cym3.appendTo(parent);

위 코드는 클래스를 만드는 함수 MyDiv의 메서드 appendTo를 실행하는 함수이고

아래 코드는 객체를 만든 뒤 객체의 메서드를 실행하는 것이다.

그러니까 cym2에는 객체가 할당되는 것이 아니라 MyDiv( ).appendTo( ) 메서드의 return 값이 할당된다.

하지만 appendTo( )는 아무것도 return 하지 않으니 undefined를 나타내는 것이다

2. appendTo( ) 메서드가 return 하게 만들자

appendTo(parent){
         this._parent = parent;
         return this;
}

let cym = new MyDiv('안녕').appendTo(parent);

parent를 설정하고 this를 return하게 되는데 여기서 this는 ClassYouMade 객체다

그러면 변수 cym은 다음과 같다

3. setter 함수 fontSize()를 실행하면

 set fontSize(newfontSize){
   this._div.textContent = this._str;
   this._div.style.fontSize=newfontSize;
   this._parent.appendChild(this._div);
}

setter 함수 fontSize( ) 실행되면 str과 fontSize가 설정되고 parent에 append되게 만들었다

전체 코드

function solution() {
   // 여기에 코드를 작성해주세요
   class ClassYouMade {
      constructor(str) {
         this._div = document.createElement('div');
         this._str = str || "";
      }

      appendTo(parent){
         this._parent = parent;
         return this;
      }

      set fontSize(newfontSize){
         this._div.textContent = this._str;
         this._div.style.fontSize=newfontSize;
         this._parent.appendChild(this._div);
      }
   }
   return ClassYouMade;
}