[Javascript] 확장 가능한 계산기 만들기 (생성자 함수)

문제

기능을 "확장"할 수 있는 계산기 객체를 만들어 주는 생성자 함수 Calculator를 작성해봅시다.

Calculator는 두 단계를 거쳐 만들 수 있습니다.

첫 번째 단계는 "1 + 2"와 같은 문자열을 받아서 “숫자 연산자 숫자” 형태(공백으로 구분)로 바꿔주는 메서드 calculate(str)를 구현하는 것입니다. 이 함수는 +와 -를 처리할 수 있어야 하고, 연산 결과를 반환해야 합니다.

• 예시

let calc = new Calculator;

alert( calc.calculate("3 + 7") ); // 10

두 번째 단계는 계산기가 새로운 연산을 학습할 수 있도록 해주는 메서드 addMethod(name, func)를 추가해 주는 것입니다. 연산자 이름을 나타내는 name과 인수가 두개인 익명 함수 func(a,b)를 받는 새 메서드를 구현해야 하죠.

구현된 메서드를 이용해 곱셈 _과 나눗셈 /, 거듭제곱 *_연산자를 추가해주는 예시는 아래와 같습니다.

let powerCalc = new Calculator;
powerCalc.addMethod("*", (a, b) => a * b);
powerCalc.addMethod("/", (a, b) => a / b);
powerCalc.addMethod("**", (a, b) => a ** b);

let result = powerCalc.calculate("2 ** 3");
alert( result ); // 8

• 참고사항
  괄호나 복잡한 표현식 없이도 본 과제를 풀 수 있습니다.
  숫자와 연산자는 공백 하나로 구분합니다.
  에러 핸들링을 위한 코드를 추가해도 좋습니다(선택 사항)

 

해답

function Calculator() {

  this.methods = {
    "-": (a, b) => a - b,
    "+": (a, b) => a + b
  };

  this.calculate = function(str) {

    let split = str.split(' '),
      a = +split[0],
      op = split[1],
      b = +split[2];

    if (!this.methods[op] || isNaN(a) || isNaN(b)) {
      return NaN;
    }

    return this.methods[op](a, b);
  };

  this.addMethod = function(name, func) {
    this.methods[name] = func;
  };
}

 

풀이과정

1. Calculator.calculate('str')

• "1 + 2" -> 숫자 연산자 숫자 형태(공백으로 구분)로 바꿔주는 메서드

function Calculator() {

this.calculate = function(str) {

 let split = str.split(' '), // ① str의 숫자,연산자,숫자를 구분하기 위해 배열로 만듬
   a = +split[0], // ② 배열값을 숫자로 변경하기 위해 + 붙여서 할당
   op = split[1], //    증감자는 바꾸지 않아도 된다
   b = +split[2];

};

 

2. Calculator.calculate('str')

• "1 + 2"를 숫자 연산자 숫자 형태(공백으로 구분)로 바꿔주는 메서드
• +,- 처리 가능, 연산 결과 반환 => 새로운 메서드로 생성 후, 연결

 

function Calculator() {

this.methods = {         // ③ 산술 연산자로 연산해주는 메서드 생성
 "-": (a, b) => a - b,  //    메서드 안에 key값을 산술 연산자로 하는 메서드 생성(addMethod 메서드와도 연결되야 하므로)
 "+": (a, b) => a + b
};

this.calculate = function(str) {

 let split = str.split(' '), // ① str의 숫자,연산자,숫자를 구분하기 위해 배열로 만듬
   a = +split[0], // ② 배열값을 숫자로 변경하기 위해 + 붙여서 할당
   op = split[1], //    증감자는 바꾸지 않아도 된다
   b = +split[2];

 return this.methods[op](a, b); // ④ calculate에 method연결, op를 키값, a,b를 인수로 넘겨줌
};
}

 

3. addMethod(name, func)
계산기가 새로운 연산을 학습할 수 있도록 해주는 메서드

• 예시
  powerCalc.addMethod("*", (a, b) => a * b);
  • "*" = name (key값, prop)
  • (a,b) => a * b = 추가될 함수

 

function Calculator() {

this.methods = {         // ③ 산술 연산자로 연산해주는 메서드 생성
 "-": (a, b) => a - b,  //      메서드 안에 key값을 산술 연산자로 하는 메서드 생성(addMethod 메서드와도 연결되야 하므로)
 "+": (a, b) => a + b
};

this.calculate = function(str) {

 let split = str.split(' '), // ① str의 숫자,연산자,숫자를 구분하기 위해 배열로 만듬
   a = +split[0], // ② 배열값을 숫자로 변경하기 위해 + 붙여서 할당
   op = split[1], //    증감자는 바꾸지 않아도 된다
   b = +split[2];

   if (!this.methods[op] || isNaN(a) || isNaN(b)) {
   return NaN;  // ⑥ 해당 산술 연산자 메소드가 없거나 숫자를 입력하지 않은 경우, 에러 방지를 위한 코드

 return this.methods[op](a, b); // ④ calculate에 method연결, op를 키값, a,b를 인수로 넘겨줌
};

 this.addMethod = function(name, func) {
 this.methods[name] = func;  // ⑤ 연산자와 함수를 넘겨주는 메소드 생성
};
}

 

모던 자바스크립트 튜토리얼의 연습문제인데, 배열·메소드 부분 문제가 특히 어렵다.

하지만 코딩테스트 문제와 비슷해서 공부에 많은 도움이 된다.

이 문제는 많은 시간을 할애 했는데(ㅠㅠ)

풀이 후에 해답보지 않고 두 번 더 풀어보니 이제서야 알겠다.

문제를 보면 동시다발적으로 풀이법 여러 개가 떠올라서 우왕좌왕하게 된다.

주석으로 경우의 수를 모두 정리 후, 하나씩 추상화해서 구현하는 것을 연습해야겠다.

 

---

참고

https://ko.javascript.info/array-methods

배열과 메서드