“Refactoring” is a term for changing the structure of code without changing its behavior. This is often necessary because since it’s hard enough getting code to do what we want without worrying about how nicely it is structured it’s easy to end up with code that is functional and but also kind of a mess.
Refactoring can be as small as changing the name of a variable to something more accurate or descriptive or as big as a complete reorganization of a whole program.. Below I describe some refactoring patterns that we’ll use in this class.
The names of variables (including function names) are purely for the benefit of human readers of your code, including that most important human of all: you. It is always worth changing a variable name to be more descriptive of its true purpose, especially because it’s so easy.
One of the simplest but most powerful refactoring patterns is to extract a function. Sometimes we extract a function because the same code is repeated multiple places and we want to remove the duplication. But it’s also worth extracting functions because smaller functions are easier to understand and to make sure we’ve gotten them right. It’s almost always better to have one two-line function that calls two different ten-line functions than a single twenty-line function that does the same thing. So if you have a twenty-line function you should look for ways to extract some smaller functions using this refactoring.
const and the
closing } should be in the leftmost column of the file.)
const functionName = () =>
{ and after it, put a closing }. Often you will already
have a good idea what to call the new function, but if you don’t it’s fine
to use a placeholder name to start with. Sometimes with particularly hairy
code, you’ll only figure out what it’s actually doing after you’ve finished
extracting it.
return it. (If
there are multiple such variables you maybe grabbed to much code for one
function and need to go back and try again with less code.) Not all
functions will have a return value—if the code is just for side effects such
as drawing on the screen there may be no need to return anything.
const
or let. The need to be declared which just means you need to
add a const or let in front of the variable name
the first time it is assigned. Prefer const but
use let if the variable is assigned to more than once in the
new function.
return then you should replace
the same assignment in the original code to assigning the value of calling
the function. If the code was duplicated, replace all the copies with calls
to this function.
Anytime the code of a function contains a literal value (e.g. number
like 10), you should ask whether the function would make sense if
the value was replaced with a different value. I.e. would changing the value
change the bahivor of the function without completely breaking it?
If the answer is yes, it may be a good idea to replace the literal value with a variable and add that variable as an argument to the function.
Extracting a function, as described above, works to remove duplication if you have two exact copies of the same code—after extracting one copy into a new function you can use that function to replace all the occurrences of that code.
Sometimes, however, you have almost duplicated code—code that is basically the same but with maybe different values in a few places. When that’s the case, we want to combine extracting a function with generalizing it in order to extract a function that can handle all of those instances of almost duplicated code.