CODEWITHSUNDEEP
javascriptenums
VividD
VividD

Reputation: 10536

Is this a correct way of implementing an enumeration?

I am writing the answer to another question.

I am not sure if my implementation of enumeration is OK. I'll describe it in a moment. Please review it, and tell me if I could have done something better.

The small prototype in question (codepen here) involves drawing chess board and chess pieces. There are 6 white and 6 black chess pieces. For each of them, I need to keep its name (like "White Bishop") and Unicode code (something like "\u2654"). So, I defined variable pieces as follows: (There is also piece NONE that proved to be useful for empty squares on the board)

var pieces = {
    NONE :          {name: "None",          code: " "}, 
    WHITE_KING :    {name: "White King",    code: "\u2654"}, 
    WHITE_QUEEN :   {name: "White Queen",   code: "\u2655"}, 
    WHITE_ROOK :    {name: "White Rook",    code: "\u2656"}, 
    WHITE_BISHOP :  {name: "White Bishop",  code: "\u2657"}, 
    WHITE_KNIGHT :  {name: "White Knight",  code: "\u2658"}, 
    WHITE_POWN :    {name: "White Pown",    code: "\u2659"}, 
    BLACK_KING :    {name: "Black King",    code: "\u265A"}, 
    BLACK_QUEEN :   {name: "Black Queen",   code: "\u265B"}, 
    BLACK_ROOK :    {name: "Black Rook",    code: "\u265C"}, 
    BLACK_BISHOP :  {name: "Black Bishop",  code: "\u265D"}, 
    BLACK_KNIGHT :  {name: "Black Knight",  code: "\u265E"}, 
    BLACK_POWN :    {name: "Black Pown",    code: "\u265F"}, 
};

I keep data on the distribution of all pieces on the board in an array called board, a this is the initialization of that array:

   var board =[];

    for(var i = 0; i < boardDimension*boardDimension; i++) {
        board.push({
            x: i % boardDimension,
            y: Math.floor(i / boardDimension),
            piece: pieces.NONE
        });
    };

    board[0].piece = pieces.BLACK_ROOK
    board[1].piece = pieces.BLACK_KNIGHT
    board[2].piece = pieces.BLACK_BISHOP
    board[3].piece = pieces.BLACK_QUEEN
    board[4].piece = pieces.BLACK_KING
    board[5].piece = pieces.BLACK_BISHOP
    board[6].piece = pieces.BLACK_KNIGHT
    board[7].piece = pieces.BLACK_ROOK

    board[8].piece = pieces.BLACK_POWN
    board[9].piece = pieces.BLACK_POWN
    board[10].piece = pieces.BLACK_POWN
    board[11].piece = pieces.BLACK_POWN
    board[12].piece = pieces.BLACK_POWN
    board[13].piece = pieces.BLACK_POWN
    board[14].piece = pieces.BLACK_POWN
    board[15].piece = pieces.BLACK_POWN

    board[6*8 + 0].piece = pieces.WHITE_POWN
    board[6*8 + 1].piece = pieces.WHITE_POWN
    board[6*8 + 2].piece = pieces.WHITE_POWN
    board[6*8 + 3].piece = pieces.WHITE_POWN
    board[6*8 + 4].piece = pieces.WHITE_POWN
    board[6*8 + 5].piece = pieces.WHITE_POWN
    board[6*8 + 6].piece = pieces.WHITE_POWN
    board[6*8 + 7].piece = pieces.WHITE_POWN

    board[7*8 + 0].piece = pieces.WHITE_ROOK
    board[7*8 + 1].piece = pieces.WHITE_KNIGHT
    board[7*8 + 2].piece = pieces.WHITE_BISHOP
    board[7*8 + 3].piece = pieces.WHITE_QUEEN
    board[7*8 + 4].piece = pieces.WHITE_KING
    board[7*8 + 5].piece = pieces.WHITE_BISHOP
    board[7*8 + 6].piece = pieces.WHITE_KNIGHT
    board[7*8 + 7].piece = pieces.WHITE_ROOK

And, deep down in the code, this data is used in the following way:

svg.append("text")
    .attr("x", function (d) {
        return d.x*fieldSize;
    })
    .attr("y", function (d) {
        return d.y*fieldSize;
    })
    .style("font-size", "40")
    .attr("text-anchor", "middle")
    .attr("dy", "35px")
    .attr("dx", "20px")
    .text(function (d) {
        return d.piece.code;
     })
    .append("title")
    .text(function(d) {
        return d.piece.name;
    });

Did I define and use the enumeration in the right way?

Upvotes: 0

Views: 49

Answers (1)

cнŝdk
cнŝdk

Reputation: 32145

Well, to start there's no Enum in Javascript, but you can implement it by your own, and looking at the work you have done, I think that's correct and it's a good try.

But if we focus on the logic of Enum, we should know that an Enum must be constant and its elements values should never change so we have to look for a more suitable solution because in Javascript we can overwrite any object.

After a search I've made, I found a Javascript method that can provide the solution, wich is the Object.freeze().

So after defining your Enum you should freeze it, so it'll never change:

var pieces = {
 NONE :          {name: "None",          code: " "}, 
 WHITE_KING :    {name: "White King",    code: "\u2654"}, 
 WHITE_QUEEN :   {name: "White Queen",   code: "\u2655"}, 
 WHITE_ROOK :    {name: "White Rook",    code: "\u2656"}, 
 WHITE_BISHOP :  {name: "White Bishop",  code: "\u2657"}, 
 WHITE_KNIGHT :  {name: "White Knight",  code: "\u2658"}, 
 WHITE_POWN :    {name: "White Pown",    code: "\u2659"}, 
 BLACK_KING :    {name: "Black King",    code: "\u265A"}, 
 BLACK_QUEEN :   {name: "Black Queen",   code: "\u265B"}, 
 BLACK_ROOK :    {name: "Black Rook",    code: "\u265C"}, 
 BLACK_BISHOP :  {name: "Black Bishop",  code: "\u265D"}, 
 BLACK_KNIGHT :  {name: "Black Knight",  code: "\u265E"}, 
 BLACK_POWN :    {name: "Black Pown",    code: "\u265F"}, 
};
var frozenpieces=Object.freeze(pieces);

In that case the frozenpieces Object will remain always the same, so we can assume that it's an Enum.

Upvotes: 1

Related Questions