I wasn't joking when I said I nerd out on mnemonic devices. If a checklist can be turned into an acronym, I will find a way. Having ready-to-go lists of things to do to get back on track when I hit a challenge is one of the best ways I've found to boost my productivity.
Today the mnemonic I'd like to share is one for beginners. It will help you identify what's going wrong with your code when here aren't helpful enough cues from the console, your IDE, or the test suite.
SCRUPLES
Is your syntax right?
Did you call the function you need, or just declare it?
Does the function return what it needs to?
Could there be unintended consequences to your code?
Did you put things in the right order?
Do your loops increment correctly?
Is there a way for your loops to end?
Are there issues with scope?
Syntax
When you're starting out, 99% of your problems are going to be solved right here. The browser console & your IDE provide error messages about syntax, but they aren't always clear and sometimes can be misleading. Make sure there isn't a , where there should be a ;, and that your {} and [] are nested correctly. Little things like inconsistent capitalization of variables, plural/singular typos, or incorrect formatting of fat arrow callback functions can also cause issues that can be hard to locate. If you're doing web development and setting styles, check that the values you're passing are modified with the right units (px, %, vw, etc.)
Call Your Functions
I still make this mistake more than I'd like to admit. I'll write an incredibly complicated function, then fail to ever actually call it in the code. Think of the function declaration like a recipe - you can write down the recipe for grandma's peanut butter fudge, but writing down the recipe (declaring the function) is not the same as actually making the fudge (calling the function.)
Return something from the function
If you need a function to return something, make sure it actually returns that thing. Setting the variable result = true; inside your isUserLoggedIn() function does you no good unless isUserLoggedIn() actually returns that value!
Unintended consequences
Watch out for unintended consequences. Certain methods mutate the original variable while others return a copy. If you have a function that increases a counter or increases the value of a variable, that effect will take place even if you are just logging the result of the function to the console. You'll learn over time, with practice, what to look out for. I had to learn a hard lesson about Array.forEach() and splicing/deleting array elements. I still forget that String.replace() needs to be assigned to a variable and doesn't mutate the original string.
Put things in the right order
Function declarations can appear later in the code than where they are called, but fat arrow function expressions must appear before they are called. Variables need to be declared earlier in the code than when they are used or mutated. Beyond these functional issues, consider trying to write your code like a story so that when you return to it in the future you have an easier time figuring out what you were trying to do and how.
Loops
Make sure your loops increment the way they're supposed to. This is especially important for while loops - if a counter isn't increasing or something isn't being mutated each loop, you're unlikely to ever hit the condition to exit the while loop.
End your loops
Somewhat related to the last one - make sure your loops have a way to exit. Don't be me and start a for loop with for (let i = arr.length - 1; i >= 0; i++). If your loop is taking a very long time to run, check whether you can add in a way for it to end early (if you're searching a 20,000 element array for the first index of a specific value, and you find that at i = 2, make sure you're not iterating through the entire remaining 19,997 values before ending the loop.)
Scope
Check that the scope of your variables and functions works for where you are trying to use them. If you define a helper function inside of a function declaration, that helper function is not going to be available outside of that declaration. If you're looking for the highest value in an array, but declare the variable highestValue inside the for loop you're using to scan the array, that variable will get torn down and rebuilt with each loop.
Above all, be kind to yourself. Don't beat yourself up over any of these mistakes. As I've interacted with more and more senior people in the industry, I've learned that everyone makes these mistakes. You'll be much more successful at learning to quickly identify and correct mistakes like these, than you will at training yourself not to make these mistakes at all, so focus your effort where it will make the most impact.
But my code still doesn't work!
This list isn't comprehensive. It's a checklist of the most common errors I had to train myself not to make when starting out. Your mileage may vary. You might also be less of a beginner than you think (and are encountering more complex issues.)
Think of it as a way to organize your thoughts & analysis. Especially in moments of frustration, I find it helpful to have a plan of attack.
What do you think - are there common errors I missed? Do you have your own version of 'scruples' that you use?
Top comments (2)
Nice! Commenting a bit later but as someone who is starting out, I'm definitely guilty of not calling out my functions and not ending the loops. Coding is supposed to be logical..but it definitely takes a certain kind of logic.
What do you think of code reviews? Where do they come in this process?
Nice little guide! 👍 I think this is a good pattern for devs, esepecially beginners to use. Half the time the solution to my problems are "S" or "C" lol.