Variables – How to Name Things

This series will guide you in how to write better Sheet Workers. You don’t need everything in this series – you can just refer back to the previous post for all the basics. But if you want to write better sheet workers, you’ll need to understand variables.

This is one of the must fundamental aspects of Javascript (the language used to create Sheet Workers). You can write SWs without variables, and you’ll see a lot of sheet workers written by better coders that omit them. In my opinion, this is a mistake. Attitudes to variables are often as follows:

1. Beginning coders use variables because they don’t know what they are doing, and are following guides like this one which show how to use them.
2. Intermediate coders who have enough knowledge to be dangerous. They often omit variables where they can because they think it makes their code better.
3. More advanced coders use variables because they realise it makes their code easier to debug, and it makes their code easier to understand for those of all skill levels that follow them.

You might detect a small bias here. But even if you don’t use variables, you need to understand how Roll20 and JavaScript store and use data.

What is a Variable?

• Concept
• Comments in Code
• Creating a Variable
• Naming Your Variables

A variable is a placeholder. You use them already, and all the time. When you remember that a banana is $10, and realise you can get 5 of them with $50, you have used a variable and also performed some algebra.

let banana_cost = 10;
let money = 50;
let my_bananas = money / banana_cost;
let money_left = money  - (my_bananas * banana_cost);Code language: Markdown (markdown)

So basically you create a variable for everything you want to use in your code.

Before we continue, it’s handy to know you can create comments in your code. Comments are parts of a code that Roll20 and JavaScript ignore. You can put anything in a comment, and it is invisible to your code. You’d put any needed explanation inside comments.

// a single line comment starts with two slashes
// these comments can start anywhere but end at the first line break
let banana = 10; // so you can put a comment here
/* if you want more control of comment, start it with /*. 
that comment will continue until you manually end it with */
let money /* these comments can be placed anywhere */ = 50;Code language: JavaScript (javascript)

There’ll be more about comments in the post on Logging and Errors.

Creating – or Defining – a variable is done in a specific way, using keywords of let, const, or var.If you aren’t sure which to use always use let. The code in the first tab could have been written this way:

const banana_cost = 10;
let money = 50;
let my_bananas = money / banana_cost;
money = money  - (my_bananas * banana_cost);Code language: JavaScript (javascript)

• let: use this when you are creating a variable that can change.
• const: use this when creating a variable which cannot change.
• var: this is a now-obsolete way of creating variables. You will see older sheet workers using it, but for good practice, you should replace any vars with lets.

You can create empty variables, but javascript will try to guess its data type (see below):

let money; // no value is declared, so this could be any type of data.Code language: JavaScript (javascript)

This can easily trip you up. There are things you must do, and things you should do.

• Variable names cannot begin with a number
• Variable names can contain only letters and numbers- no spaces or special characters

Here are some rules to follow that you can break, but following them will make your life easier:

• Use all-lower-case for variable names.
• Use snake case (snake_case) for variable names. Avoid other naming conventions (camelCase, PascalCase, or kebab-case).
• Use these same rules in html and in sheet workers because you can sometimes use html names in sheet workers.

The idea is to always divide multiple words with _ (underscores) rather than spaces, and always use lower-case. There are some situations in Roll20 where this can cause problems (repeating section and action button names should have exactly one underscore) and in these cases it’s better to just use one single word (or kebab-case if you must have multiple words), but those are infrequent and you don’t need to worry about them yet.

The Most Common Types of Variable and Data

let word = "banana";
let sentence = "a bunch of";
let final_sentence = sentence + " " + word;
// this produces "a bunch of bananas"; not the insertion of a space.Code language: JavaScript (javascript)

let first_integer = 5;
let new_value = (5 * 3) + 2
let third_integer = first_integer + new_value;Code language: JavaScript (javascript)

let a_number = 10.57;
let an_integer = parseInt(a_number); // this will give the number 10.Code language: JavaScript (javascript)

let empty_array = [];
let filled_array = ['a string', 50, ['another array','with 2 items'] ];Code language: JavaScript (javascript)

let filled_array = ['a string', 50, ['another array','with 2 items'] ];
let first_index = filled_array[0];
let second_index = filled_array[1];Code language: JavaScript (javascript)

let empty_object = {};
let full_object = {
   str: 15,
   "a variable": "here's the value"
}Code language: JavaScript (javascript)

let dot_syntax = full_object.str;
let bracket_syntax = full_object["a variable"];Code language: JavaScript (javascript)