Variables clarify code

Southwest Coder Dojo


Southwest Coder Dojo is a member of Coder Dojo International, an organization of free, volunteer-led coding clubs. We were founded to provide introductory coding experiences for youth and teens (ages 11-18). Our volunteer mentors are software developers and software industry professionals from the Twin Cities.

Register with Hennepin County Library to attend our Dojo events. Tickets are free, but seats are limited. No experience in programming required. Remember to bring your laptop!


This month we continued developing our Space Man code by looking at the following code block and asking ourselves, "How can we make this better?"

Code Block: How can we make this better?

  if (val === 0) {
    e.range.getSheet().getRange("B23:D25").setBackgroundColor('#ffffff');
   
  } else {
      e.range.getSheet().getRange('D23').setBackgroundColor('#000000');        e.range.getSheet().getRange('C24').setBackgroundColor('#000000');
   e.range.getSheet().getRange('B25').setBackgroundColor('#000000');
  }

Several issues were raised:
  • Some statements are too long, which makes them hard to understand and also possibly hard to type accurately
  • The ranges are not meaningful, unless you have the sheet
  • The colors are not meaningful, unless you have the sheet

Solution #1: SetColor

One improvement is to create a single function called SetColor.  The function would take 3 arguments - e (for event), r (for range) and c (for color) and perform the same long statement.

Solution #2: Variable Naming

Another improvement is to create variables for the colors and ranges.  If we name one of the colors white and the other black, our code becomes much more readable.

When you read the following, you can see which body part is being set at which color.  This means you don't have to memorize strange codes or ranges in order to code your Space Man.

Code Summary: Readable code that does the same thing

  // colors --------
  var white = '#ffffff';
  var black = '#000000';

  // ranges --------
  var leftLeg = 'B20:D27';
  var rightLeg = 'F20:H27';
  var leftArm = 'B11:D18';
  var rightArm = 'F11:H18';
  var body = 'E10:E22';
  
  switch (val) {   
    case 1:
      SetColor(e, body, white);
      break;
    
    case 2:
      SetColor(e, leftLeg, white);
      break;
   . 
   . case statement continues for all body parts
   .
}
function SetColor(e, r, c) {
  e.range.getSheet().getRange(r).setBackgroundColor(c);
}

The "Gotchas"

As people started writing "real" code, we found a few common issues:

  • Case matters: Make sure all your variables have the same case and that your functions also have the same case.
  • Some people put their arguments out of order (SetColor(r, c, e) instead of SetColor(e, r, c)), which causes issues. Make sure that when you use SetColor that your event, range and color are in the same order both in the function and where you call it.
  • Several people did not close their strings (white = "#ffffff <= missing a close quote) which caused issues.
  • Finally, several people noticed that our Space Man settings were not correct.  We were setting colors to big blocks instead of the actual limbs.

Next Time

Next time, we will continue learning about variable declarations. We will learn how to make a single Space Man variable and map all our ranges and colors for processing. And we will finish our graphic Space Man mapping so we can start the new year working on the word guessing part of our game.