AngularJS is a popular front-end framework, and with so many people maintaining the code, readability and maintainability should be a top priority. When reviewing the source, I have found that their focus is on small and performance. Let’s discuss the code they have for the shallow copy function.
This code is compact, short and sweet. But, it also leaves some confusion and ambiguity as to what is the intent, something I have noticed shortcode tends to leave behind. First, I start my refactor to bring out the code for copying an object to a separate method, and substitute, the original function is shorter, and also it is beginning to tell us the intent.
Next, I perform the same refactor and extract the code for the array shallow copy to a separate method. Now the function for shallow copy is short and sweet, plus we know what is going to happen when we execute it. If we have a source as an array it will copy the collection to the destination, if it is an object, it will copy object properties to the target, and finally, if it is not either an object or an array and the destination is null the source will be returned otherwise return the destination value. That is a long sentence describing the intent of this method, but the purpose is to decide what to return, not to choose and perform the copy. The created helper functions handle the copying for the data types.
The code is already more readable and easier to maintain, but there is some code that requires you to evaluate it in your head before you understand what its intent is. Here, we are testing the first two characters of the key and seeing if it is ‘$$,’ this way may be the performant way of performing this check, but I wonder if you just supply a regex pattern to collect all keys that do not match that pattern and you would not need this if statement, but I digress. I extracted this out to a separate method with a clear name, so we know what it is doing, and future refactoring can occur more quickly.
Finally, I take the code in the for loop for the copy object to a separate method so I can have a clearer understanding of what is to occur each iteration. Is this refactor needed? That is a good question, and I cannot give you a simple yes or no answer. I am making a judgment call here to say I want to read what the code is doing quickly without having to read the technical details. In other words, I am letting the function names tell me the intent, and when I need to understand the details, I can read the content of that function.
This exercise for the shallow copy method in AngularJs was fun and also revealing. When you write code to be as short as possible, you make it harder to understand the intent. You may ask a few questions of the refactored code:
- Does this code perform as fast as the original? I don’t see where the extraction would slow down the performance. This refactoring did not alter how the task executed; it just extracted out parts of that code into separate functions. And since JavaScript is a language designed with functions in mind, I cannot see how adding one-three function calls will hurt the performance of the code.
- You have increased the code size, so did you slow the download time for the browser? Another good question and this has been answered by those who write the frameworks we build our front-ends. With proper gzipping and minification, the code added will not adversely affect the download speed for the browser.
I rather error on my code being overly verbose then hard to read. At the end of the day, it your time that you are spending decide how you want to spend it, rediscovering what you and others had written in the past before you can fix that bug or write that feature, or working on the new code and features more and quickly understanding what exists before you today?
If you have a snippet of code that you would like refactored on split code leave a comment below with the code snippet or link to where to obtain it.
