Tic Tac Toe in ES6

First off, what is ES6? If you’re unsure of what ES6 is, it’s the new release of JavaScript and comes with some features. Most likely you’re using ES5 JavaScript. ES6 makes the first major update to the language since 2009 so you can imagine some people are very excited. There are plenty of things to get super excited about with release of ES6, but one thing I’d like to cover today is the introduction of Classes!

If you want to try ES6 out, you can try out Babel. Babel compiles your ES6 code for you so you can see all your neat ES6 stuff without worrying about browser support. I’m not going to go through the entire tutorial on how to build Tic Tac Toe, but will focus on ES6.

Some Background

So I’ve heard a lot of folks describe JavaScript object oriented programming to me and the word prototypal or prototype always comes up. I know that I use the word prototype to create objects but what does that really mean? I think Mozilla does a great job at describing JavaScript so I’m going to go with their explanation:

Prototype-based programming is an OOP model that doesn’t use classes, but rather it first accomplishes the behavior of any class and then reuses it (equivalent to inheritance in class-based languages) by decorating (or expanding upon) existing prototype objects. (Also called classless, prototype-oriented, or instance-based programming.)

Here’s Mozilla’s introduction to OOP in JavaScript.

The word prototype always threw me off so I had a really hard time grasping the idea of object oriented programming when I was first introduced to it. After taking a little break from JavaScript and learning OOP principles in another language, I came back and suddenly had a much better understanding of what was happening.

Classes

The new keyword Class is really just syntactial sugar over the protype syntax in previous releases of JavaScript. Classes make object oriented programming in JavaScript easier to read. It doesn’t change the fact that JavaScript uses a prototype based object oriented programming model.

Tic Tac Toe

We’re going to write a super basic version of Tic Tac Toe with ES6 just so you can see some of the differences in syntax.

So in Tic Tac Toe there are several elements that we need. A board, a game, some players and spaces.

In ES5 when I wanted to make a player object I did the following:

var Player = function(name, marker){ this.name = name; this.marker = marker; };

In ES6 the same thing looks like this:

class Player { constructor(options) { this.name = options.name; this.marker = options.marker; } }

Cool! So far, there’s no big difference and I’m actually writing more code using ES6 than I would if I was using ES5. You’ll see a bigger difference when writing methods.

So let’s make a space next. In ES5 I would have made a space like this:

var Space = function(xCoord, yCoord){ this.xCoord = xCoord; this.yCoord = yCoord; };
Space.prototype = { markSpace: function(player){ if( !this.marked ) { this.marked = player; return true; } } };

The same thing in ES6 looks like this:

class Space { constructor(options) { this.xCoord = options.xCoord; this.yCoord = options.yCoord; }
  markSpace(player) {
     if ( !this.marked ) {
        this.marked = player;
        return true;
     }
  }
}

When we want to make an instance of a class in ES6 it’s the same as ES5.

let player1 = new Player('Liz', 'X')

Pretty cool, right?

Subclassing

Another neat feature of ES6 is that you can subclass very easily. Let’s say we have another type of space that we’d like to implement. A FancyPlayer!

In ES5 you’d have to that by:

var Player = function(name, marker){ this.name = name; this.marker = marker; };
Player.prototype.playerInfo = function() { return 'Player Name: ' + this.name + ' Player Marker: ' + this.marker; }
function FancyPlayer(xCoord, yCoord, fancyPlayerProperty) { Space.call(this, xCoord, yCoord); this.fancyPlayerProperty = fancyPlayerProperty; } FancyPlayer.prototype = Object.create(Space.prototype); FancyPlayer.prototype.constructor = FancyPlayer; FancyPlayer.prototype.playerInfo = function (player) { return Player.prototype.playerInfo.call(this) + ' Fancy: ' + this.fancyPlayerProperty;
};

With ES6 you can subclass like this:

class FancyPlayer extends Player { constructor(xCoord, yCoord, fancyPlayerProperty) { super(xCoord, yCoord); this.fancyPlayerProperty = fancyPlayerProperty; } describe() { return super.playerInfo() + ' Fancy: ' + this.fancyPlayerProperty; } }

Conclusion

ES6 is adding a lot of great things and making syntax a lot cleaner. The class keyword doesn’t change much but will hopefully make your code cleaner to read and maybe make it easier for those who are struggling with object oriented programming in JavaScript to have an easier time. I know when I was first learning object oriented principles, the JavaScript syntax really confused me. So hopefully you have fun trying out ES6 syntax!

To learn more about the world of OOP check out our Introduction to Object-Oriented Programming using Python, JavaScript, and C# – a perfect jumping point to using OOP for any situation.

About the author

Liz Tom is a Software Developer at Pop Art, Inc in Portland, OR.  Liz’s passion for full stack development and digital media makes her a natural fit at Pop Art.  When she’s not in the office, you can find Liz attempting parkour and going to check out interactive displays at museums.