Writing Readable Code

Projected Time

About 90 minutes

• 35 minutes for Lesson
• 30 minutes for Independent Practice
• 15 minutes for Group Practice
• 10 minutes for Check for Understanding

Prerequisite

Attendance at Techtonica’s HTML/CSS & JS workshops

Motivation

• Since most software engineering is done in teams, it’s important that the code you write is easy for others to read. You will be expected to write easily-readable code as a software engineer.
• Readable code is beneficial to everyone. Sometimes you may have to return to a code you wrote some time ago or perhaps another engineer might have to make updates to your code. You save a considerable amount of time by writing code that will be easy to read and understand.

Looking at an example

• Professional engineers tend to write readable code more often than not. An example is css-tricks, a popular site that teaches various skills relating to Front-end development. There are various code snippets available on the site and these code snippets are written in a manner that makes then easily readable. For example, this page on HTML form markups which makes it easy to understand the role of various elements being used.

Objectives

Participants will be able to:

• Refactor a provided code sample to make it more readable

Specific Things to Learn

• Legibility
• Writing descriptive, semantic variable and function names
• Using whitespace
• Using local variables well

Lesson

• Video walkthrough of lesson slides Writing Readable Code (11 min)
• Read through lesson slides Writing Readable Code

Common Mistakes / Misconceptions

-“As long as my code does what it’s supposed to do, it’s good enough.” Functionality is very important, but it’s only part of the bigger picture. Being able to easily maintain your code is important, too.

Independent Practice

Techtonica staff will assign #1 to half of the group and #2 to the other half of the group.

1. Using REPL.it write a function called findMax that takes in 3 integers as parameters and returns the largest of the 3 integers.

2. Using REPL.it write a function called bigWord that takes in a word as a string and returns True if the word has at least 10 letters and False if the word has 9 or fewer letters.

Group Practice

Pair up with a colleague who did not do the same coding challenge as you. Show your pair partner your code from the Independent Practice, but do not explain it to them. Your partner should read the code to themselves, then explain back to you their understanding of what each line of your code is doing. Listen to their feedback and suggestions — they may end up helping you to identify parts of your code that could be improved.

Supplemental Materials

• Writing Readable JavaScript (video 24 min) - This talk shares the principles of writing clear, idiomatic JavaScript code, illustrated with real-world examples.

Check for Understanding

• Engage the group in a brief roundtable discussion so they can share what improvements to their code their pair partners helped them find.
• Why is it important to write readable code?
• How do you make your code more readeble?
• If you want to assign your Birth Year to a variable which variable name would be more appropriate: let x or let myBirthYear.