How I came to love JavaScript

As a small team making a massively multiplayer game we need all the help we can get! When choosing our back-end technology we knew we didn’t want to create it from scratch, but take advantage of a company that would provide a Backend as a Service. They would manage all the infrastructure and provisioning, leaving us to concentrate on writing the game logic.

I’d used a few of these services before so had a pretty good idea of what I wanted. After reviewing all the options available, GameSparks came up as the best of the bunch. It was super easy to get up and running but then it came down to actually writing the code. With only two programmers on the team, and George being a bit of a graphics whizz who is better placed working in Unity, that task fell to me.

I’ve spent most of my career writing in C++ and C#, but this was not an option with GameSparks; it was JavaScript or nothing. I’d dabbled with the language while writing the odd web page, but my use had been snack-like and bite-sized. I was now about to embark on providing the equivalent of a hearty three course meal along with pre-dinner drinks, postprandial coffee and petit fours to thousands of players on a daily basis. Here are a few tasters of how I found that journey.

Stuff I Hated

Getting Started

Javascript lulls you into a false sense of security by looking like a language in the C family, then kicks you in the guts by not behaving like one. No type safety, no checking the number of arguments passed to functions, no syntax checking, and even worse, tries to insert semicolons to be helpful, which has the incredibly inconvenient side effect of changing the behaviour of your program based upon where you put your curly braces.  Made me realise just how much I rely on the compiler to check my code in C#.  

Scoping of Variables

Javascript has two types of scope - global and local. Global is obvious - the variable is accessible from anywhere, which is fine, although I wouldn’t encourage its use. Local scope is defined by the function the variable is declared in, which seems normal-ish until you realise that it is also accessible in any function that is called from within that function. How can a nested function rely on a variable declared in the calling context and still be modular? Take for example a variable named i. This is commonly used as an index in for loops and can generally be found peppered throughout any decent sized codebase. Each time you declare a variable inside a nested function where the outer scope has already declared a variable with the same name, the outer one is "hidden".  However, if you forget to use the var keyword to declare the inner variable, javascript will merrily use the one from the calling context with no warning whatsoever.  The more I think about this, the more my brain wants to shout WHAT INSANITY IS THIS???

Programming Paradigm

There is no established best way to do things in javascript, and it is possible to mix all programming paradigms in the same project - object-oriented, functional, you name it, take your pick. I’ve ended up with a combination, as some things such as game state definitely feel like objects, but everything else I’m doing doesn't. The design feels very wrong but every time I revisit the decision, I draw the same conclusions and leave things as they are.  


As any programmer knows, if you have a question about how to do something in a language, an internet search usually takes you down a path leading to Stack Overflow.  Having gone this route many times, it drives me slightly mad that the best accepted answers are usually how to do the thing in jQuery. GRRRRR - I’M NOT USING JQUERY!!!!!

This is getting increasingly ranty so I should probably stop and move on to...

Stuff I Love

Revealing Module Pattern

In the fight against chaos, programmers like their code to be modular. I can’t find the original link where I came across the Revealing Module pattern, but its discovery came as a great relief as here was a sensible way in which I could structure my code.  I could now control which functions were public and globally available and which ones were for private use only, as well as grouping them by functionality - phew!

Array filter() and map()

A lot of work needed in javascript comes down to manipulating arrays, and there are some great built in functions to do this. The two I’ve been using most are filter() and map().

Array.filter() returns a new array containing all of the elements from the original array that satisfy the criteria defined by the function passed in. Take a look at the code snippet below where I’m searching through the cards in the player’s hand to find playable weapons. It is easy to see at a glance that the second method is simpler and more elegant than the first; there is less code, and no need to declare the variable i, plus the explicit use of filter makes it easy to establish the motivation of the programmer.

Similarly you can see below an example of which returns a new array containing a value for each of the items in the original array, therefore mapping one type of object to another. Again, the use of the function makes it much easier to establish at first glance the intention of the person who wrote the code.

With all of the built in array functions, eliminating the need for a loop gives the programmer less opportunity to introduce bugs. When writing a loop it is easy to make mistakes, such as forgetting the var keyword, using > rather than < or + instead of ++, and yes, I speak from experience!

Functions as First Class Objects

Functions in javascript are first class objects. This means they can be passed around as arguments, stored in variables, returned from other functions and so on. When writing our battle AI there are different requirements depending on the situation. For example, in the early tutorials we want the AI to choose completely scripted moves, whereas later on we are adjusting the difficulty level depending on the rank of the player.  Setting this up has been incredibly easy, to the extent that I can let the designers specify the name of the function to be used in a spreadsheet, which is imported into our database and assigned at run time.  No need to set up an interface, define a class hierarchy, or fiddle around with complex syntax, just assign a string to a variable - beautiful!

Stuff I'm Still Working Out

So I feel like I’m getting a handle on the language, and have figured out some best practices which I’m happy with, but there are still areas where I’m unsure of the ideal way to proceed.  One thing I rely upon in C# are preprocessor directives to change the behaviour of the program depending on whether it is a development or release version of the code. I like to be able to automatically remove logging and sanity checks that are only needed for debugging but would just slow things down in release. Another area of uncertainty is how to communicate to other programmers what arguments a function is expecting, along with the best way to validate that it has received the expected values. In a strongly typed language a lot of this comes for free and just needs a few asserts adding to make the code as robust as possible, but I’m still looking for a nice way to do this in javascript.  

If you’ve got any answers to these problems, or any other neat JavaScript tips and tricks, let us know! @smalljellygames on Twitter or @SmallJelly on Facebook

#GameSparks #GameDev #RocketRumble #Javascript #Unity