Writing Scalable Code for Self-Taught Developers

Introduction

I began my coding career by teaching myself JavaScript and ReactNative to build appointment arrival management systems for medical clinics. I felt I had built the skills to pursue a job in tech, but upon meeting with a recruiter I discovered I had a lot to learn, particularly in the realm of building readable, scalable, future-proof code.

We decided to pursue a coding bootcamp where I could learn these principles, amongst other things. I keep a separate tab in my study binder for tips, principles, and conventions of building scalable code. I figured I would share them here for other self-taught programmers looking to elevate their craft and I’ll try to update it as I learn more.

Code examples are given in JavaScript, but the principles are applicable to most development languages.

Easier Debugging

• Test-Driven Development: Decide how you want a function to act and what you want it to return given certain parameters. Then write the test use-case using Mocha BEFORE writing the function solution.
• Always use const when creating new variables, then change to let later on if you decide that variable should be mutable. In a concise program, variables will be const more often than you expect.
• Only reflect changes in your frontend once they have been accepted by the backend. For example, don’t increment a “thumbs-up counter” until the server confirms that it received your user’s “thumbs-up”.
• Functions should only perform one task. These means breaking up long functions into smaller helper functions and then calling them within a parent function. This will help you trace bugs to their responsible function, makes code more reusable and more readable!
• Take the time to get to know the developer tools in your web browser for debugging. They do more than your console.log() ever could!

Nondestructive Modification

It actually takes less computer-brain-power to create and play with a new object than modify preexisting objects in most cases. This is because the computer has to check to see if the memory space allocated for the original object is large enough to handle modification before it can actually modify it, whereas it can allocate as much memory as necessary for a new object. Because of this, it’s important to understand methods of nondestructive modification.

• Use the spread operator or Object.assign() to create a copy of the original object, not just a copy of the reference to the memory location of the old object. Side note: these only create shallow copies. For more information on that, see here.

let newObject = {…oldObject}; 
// makes a copy of the data in oldObject
// modifying newObject leaves oldObject alone

let newObject = Object.assign(oldObject);
// makes a copy of the data in oldObject
// modifying newObject leaves oldObject alone

let newObject = oldObject; // Avoid This!!
// copies the memory location of oldObject
// modifying newObject will still modify oldObject

• Use functions such as .map and .filter to iterate over an array and return a new one without changing the original

Documentation

• When using Github, commit frequent updates with compartmentalized update messages and content

1: Initialize Repo

2: Add basic HTML and CSS

3: Write initial HTML Content

4: Add CSS classes and rules

5: Add new color scheme to CSS

6: Finish writing About Me section

7: Add Download Resume button and link

8: Add JS Event Listeners

…

53: Finish and publish website

• Only use comments to describe what is happening in your code if the variable names and functions are unconventional, which shouldn’t be very often!

Readability

Readability ≥ Efficiency

• Variable and function names should be self explanatory. If you have to write out a long comment to explain what your function is doing it can probably be broken down into smaller, more understandable functions.
• Your code should read like English. The more stable item being compared is named AFTER the less stable one, just like in English.

if (newUser.age > 15)

You would never say "15 is younger than the age of my brother." You would just say "My brother is older than 15."

if (newUser.age > oldUser.age)

This example is a little more ambiguous than the age example, because age is constant whereas the two ages being compared here are not. However, if we're changing something about the newUser and using the oldUser as a benchmark for comparison, the oldUser should be considered the more stable open.

• if…else statements are much easier to read than nested if statements.
• Use functions that are self-explanatory to communicate to other developers and your future self what to expect from the function. This also makes debugging simpler.

let squaredArray = array.map( item => item ** 2 );
// iterates through array and squares each number
// nondestructively returns new array as squaredArray
// .map tells other developers to expect a new array to be returned

let squaredArray = [];
array.forEach( item => squaredArray.push(item ** 2) );
// iterates through array and squares each item then adds it to squaredArray
// not wrong, but forEach doesn't tell a developer what to expect as a result

• When using HTML, CSS, and JS together, keep content and presentation separate by using HTML and CSS properly.

Other Tips for Self-Taught Programmers

• The 5 iterator functions are forEach, filter, find, map, and reduce. Understand them thoroughly and never use a for loop again!
• array.reduce() is very commonly used by JS developers. Get extra comfortable with it.