[JS] 클래스를 사용하여 계산기 만들어보기(1) - 개선해보고 싶었던 점, class와 constructor의 개념

js로 계산기 구현하는 강의를 듣고 나서 클론코딩만 할게 아니라 내가 직접 만들어 봐야겠다고 생각하여 시작하였다.
똑같이 따라서 다시 만들기 보다는 조금 변화시켜 구현하는 것이 좋겠다고 생각하여서 지금까지 어떤 버튼을 눌렀는지에 대한 결과 디스플레이를 따로 만들어보았다.

바꾸기 전 계산기

결과에 대한 디스플레이가 하나밖에 없어, 전에 어떤 값을 입력했는지 사용자에게 보여주지 않는다는 점을 고치고 싶었다.

바꾼 후 계산기

디스플레이를 하나 더 생성하여 지금까지 계산기의 식과 값을 표현하였다.

class와 constructor

클래스로 작업하는 것이 훨씬 코드의 가독성도 좋고 코드짜기도 편리하다고 많이 느꼈다.

클래스란?

Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가집니다.


Class 정의
Class는 사실 "특별한 함수"입니다. 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class 표현식 and class 선언 두 가지 방법을 제공합니다.

-mdn- (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/constructor)

쉽게말하자면 class를 통해 원하는 구조의 객체 틀을 짜놓고, 비슷한 모양의 객체를 공장처럼 찍어낼 수 있다.

constructor

여기서 constructor라는 새로운 개념에 대해 배웠는데

constructor 메서드는 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 메서드입니다.

-mdn- (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/constructor)

예를 들어,

class Calculator {
  constructor(prevValue, currentValue) {
    this.prevValue = prevValue;
    this.currentValue = currentValue;
  }
}

const calculator = new Calculator(prevValue, currentValue)
새로운 객체 calculator를 생성했을 때 this는 새로운 객체 calculator를 가리키게 되고 생성자 함수 constructor의 property 속성에 정의된 메소드와 프로퍼티를 상속받아 쓰게된다.
그러므로 새로운 객체를 만들 때마다 중복되는 코드를 작성하지 않아도 되므로 편리하다.