Which is better?

Question

Hi,

I'm trying to improve my JavaScript and making a simple hangman game using OOP. I've done it in two different ways but not sure which might be the best way to do it?

example 1:

class Game {
    constructor({ answer, maxTries = 7 } = {}) {
        this.answer = answer.toLowerCase();
        this.maxTries = maxTries;
        this.hits = new Set();
        this.misses = new Set();
    }

    get currentProgress() {
        const progress = document.getElementById('progress');
        const word = this.answer.split("");

        progress.innerHTML = "";
        for (let value of word) {
            let display = '-';
            if (Array.from(this.hits).includes(value)) {
                display = value;
            }
            progress.innerHTML += display;
        }
        return progress;
    }

    get remainingTries() {
        const remainingTries = document.getElementById('remainingTries');
        const triesLeft = this.maxTries - Array.from(this.misses).length;
        remainingTries.innerText = "You have " + triesLeft + " left";
        return triesLeft;
    }

    static isHit(game, guess) {
        return game.answer.includes(guess);
    }

    static isGuessed(game, guess) {
        return Array.from(game.hits).includes(guess) || Array.from(game.misses).includes(guess);
    }

    static isWon(game) {
        const progress = game.currentProgress;
        return !progress.innerText.includes('-');
    }
}

example 2:

function Game(correctWord) {
    this.correctWord = correctWord.toLowerCase();
    this.maxTries = 7;
    this.hits = [];
    this.misses = [];
}

Game.prototype.isHit = function() {
    const guess = document.getElementById('guessInput').value[0].toLowerCase();
    return this.correctWord.indexOf(guess) != -1;
}

Game.prototype.isGuessed = function() {
    const guess = document.getElementById('guessInput').value[0].toLowerCase();
    return this.hits.indexOf(guess) != -1 || this.misses.indexOf(guess) != -1;
}

Game.prototype.isWon = function() {
    const progress = this.getProgress();
    return progress.innerText.indexOf('-') == -1;
}

Game.prototype.getProgress = function() {
    const progress = document.getElementById('progress');
    const word = this.correctWord.split("");

    progress.innerHTML = "";
    for (let value of word) {
        let display = '-';
        if (this.hits.indexOf(value) != -1) {
            display = value;
        }
        progress.innerHTML += display;
    }
    return progress;
}

Game.prototype.getRemainingTries = function() {
    const remainingTries = document.getElementById('remainingTries');
    const triesLeft = this.maxTries - this.misses.length;
    remainingTries.innerText = "You have " + triesLeft + " left";
    return triesLeft;
}

Answer 1 · 2017-04-04T23:25:27Z

April 4, 2017 11:25pm

I prefer example 2.

I don't like the new "class" construct in JavaScript. I admit this is a personal preference, but I'm in good company as I share this preference with Douglas Crockford, a major contributor to the evolution of the language and author of JavaScript: The Good Parts. Note that this is still a good read but it is an old book, and includes some concepts that Crockford has revised in later works.

But what a super job you did implementing your example both ways.

Welcome to the Treehouse Community

Looking to learn something new?

Henrik Christensen

Henrik Christensen

Which is better?

1 Answer

Steven Parker

Steven Parker

I prefer example 2.

Henrik Christensen

Henrik Christensen