과제 : 확장 가능한 계산기 (new 연산자와 생성자 함수)

모던 JavaScript 튜토리얼 내용 중 일부 문제를 정리한 내용입니다.

기능을 확장할 수 있는 계산기 객체를 만드는 생성자 함수 Calculator 를 작성하는 문제. 첫번재 단계에서는 "1 + 2" 와 같은 문자열을 받아 "숫자 연산자 숫자" 형태로 바꿔주는 메서드를 구현해 + 와 - 를 처리한 연산 결과를 반환한다.

let calc = new Calculator;

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

여기서 Calculator 라는 생성자 함수를 new 연산자로 불러와 사용자 정의 객체 타입을 만들어 사용하는데 이전에 정리했던 내용을 다시 보면 아래와 같다.

function User(name) { // 생성자 함수는 첫 글자를 대문자로 한다.
    this.name = name;
    this.isAdmin = false;
}

let user = new User("보라"); // new 연산자로 사용자 정의 객체 타입 생성

alert(user.name); // 보라
alert(user.isAdmin); // false

new 연산자를 사용하면 아래처럼 코드 안에 this 라는 빈 객체가 생성된다. 그래서 this.name 처럼 쓸 수 있다. 정보를 담은 this 객체가 변수에 할당되므로 해당 변수로 그 객체의 값들을 쓸 수 있다. 값을 불러오거나 함수를 실행할수도 있다.

function User(name) {
    // this = {} - 빈 객체 암시적 생성

    // 새로운 프로퍼티 this에 추가
    this.name = name;
    this.isAdmin = false;

    // return this; - 암시적 반환
}

// 함수를 담아서 실해하다면

function User(name) {
    this.name = naem;
    this.sayHi = function() {
        alert("제 이름은 " + this.name + "입니다.");
    };
}

let bora = new User("이보라"); 
// name 과 sayHi 를 담은 this 객체가 반환되어 bora 에 할당된 것

bora.sayHi(); // 제 이름은 이보라입니다.

다시 첫번째 단계로 돌아가서 생성자 함수를 작성해보면, 우선 +, - 문자을 각각 연산 함수에 맵핑 한다. 1 + 2 의 + 를 인식해서 더하기 연산을 수행하는 것이다.

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

그리고 calculate 함수는 문자를 받아 공백 기준으로 나누어 배열에 담고 각각 a, b, op(methods 객체의 키 값) 으로 담아서 처리한다.

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

    this.calculate = function(str) {
        let splitStr = str.split(" ");
        let a = +splitStr[0]; // 숫자형을 변환하기 위해 + 넣음
        let op = splitStr[1]; // +, - 
        let b = +splitStr[2];

        // 해당 값이 없거나 숫자가 아닐 경우 NaN 반환
        // 에러 핸들링 코드
        if (!this.methods[op] || isNaN(a) || isNaN(b)) {
            return NaN;
        }

        // 값 반환, methodes 에 담긴 함수 실행
        return this.methods[op](a, b);
    }
}

다음으로 계산기의 기능을 확장해 곱하기와 나누기 등을 추가하는 함수를 만든다. addMethod 메서드를 만들어서 아래처럼 활용해야 한다.

let powerCalc = new Calculator;

// 새로운 기능 추가하고
powerCalc.addMethod("*", (a, b) => a * b);
powerCalc.addMethod("/", (a, b) => a / b);

// 결과 출력
let result = powerCalc.calculate("2 * 3");
alert( result ); // 6

기존 코드 아래 method 를 추가하는 함수를 만들어 넣으면 된다.

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

    this.calculate = function(str) {
        let splitStr = str.split(" ");
        let a = +splitStr[0]; // 숫자형을 변환하기 위해 + 넣음
        let op = splitStr[1]; // +, - 
        let b = +splitStr[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] = funch;
    }
}