[JS] class로 todo list 만들기

• 간단한 투두 리스트기능 구현해보기

1. 해야할 일 Todo 클래스(내용, 상태 두 가지 프로퍼티를 가집니다.)
2. Todo 클래스는 상태를 변경하는 changeState 메서드를 가집니다.
3. 할일의 목록을 관리하는 관리자를 추상화한 TodoManager 클래스 (할일 목록을 프로퍼티로 가집니다.)
4. 할 일을 저장하고(addItem), 할 일의 목록을 보여주며(getItems), 할 일의 남은 갯수를 반환하는(getLeftTodoCount) 세 가지 메소드를 가집니다.

• 첫번째 방법

        class Todo {
            constructor(item, finished) {
                this.item = item
                this.finished = finished
            }

            changeState() { 
                // 상태가 트루였다가 폴스였다가
                this.finished = !this.finished;
            }
        }

        class TodoManager {
            constructor() {
                this.todoList = [];
            }
            // 인자 두개 - finished = false 전달받은 인자의 값을 false로 초기화
            // addItem('할 일') 이렇게만 해도 됨! 꼭 두가지 인자를 전달할 필요 없다 기본값인 폴스가 됨
            addItem(item, finished = false) {
                const todo = new Todo(item, finished);
                this.todoList.push(todo);
            }
            getItems() {
                return this.todoList
            }
            // 아직 안한(해야할) 일의 갯수를 받아야함 -> false인 것만!
            getLeftTodoCount() {
                return this.todoList.filter(item => {
                    item.finished === false
                }).length;
            }
        }

        const manager = new TodoManager();
        manager.addItem('밥 먹기');
        manager.getItems();
        manager.getItems()[0].finished = true;
        manager.getLeftTodoCount();

• 두번째 방법

        class Todo {
            constructor(content, finished) {
            this.content = content;
            this.finished = finished;
            }
            changeState() {
                this.finished = !this.finished;
            }
        }

        class TodoManager {
            constructor() {
                this.todoList = [];
            }
            addItem(content) {
                this.todoList.push(new Todo(content, false));
            }
            getItems() {
                return this.todoList;
            }
            getLeftTodoCount() {
                return this.todoList.filter(item => !item.finished).length;
            }
        }

        const myTodo = new TodoManager();
        myTodo;
        myTodo.addItem('점심 먹고 10분간 잠자기');
        myTodo.getItems();
        myTodo.getLeftTodoCount();
        myTodo.getItems()[0].changeState();
        myTodo.getLeftTodoCount();
        myTodo.getItems();

• 세번째 방법

     class Todo {
        constructor(todo) {
          this.todo = { item: todo, finished: false };
        }
        changeState() {
          if (this.finished) {
            this.finished = false;
          } else {
            this.finished = true;
          }
        }
      }

      class TodoManager {
        constructor() {
          this.todoList = [];
        }
        addItem(item) {
          const todo = new Todo(item);
          this.todoList.push(todo);
        }
        getItems() {
          return this.todoList;
        }
        getLeftTodoCount() {
          return this.todoList.length;
        }
      }

      const todoManager = new TodoManager();
      todoManager.addItem("숙제하기")
      todoManager.getItems()
      todoManager.getItems()[0].changeState();
```