Improve code readability and maintainability by decomposing large, complex functions into smaller, focused ones. When a function handles multiple responsibilities or becomes difficult to understand at a glance, extract logical parts into well-named helper functions.
Improve code readability and maintainability by decomposing large, complex functions into smaller, focused ones. When a function handles multiple responsibilities or becomes difficult to understand at a glance, extract logical parts into well-named helper functions.
For example, instead of a single large function like:
const getCssTagsForChunk = (chunk, toOutputPath, seen = new Set(), parentImports, circle = new Set()) => {
const tags = [];
if (circle.has(chunk)) return tags;
circle.add(chunk);
let analyzedChunkImportCss;
const processImportedCss = (files) => {
// 20+ lines of processing logic...
}
// Another 30+ lines handling imports and more processing...
return tags;
}
Break it down into smaller, focused functions:
const toStyleSheetLinkTag = (file, toOutputPath) => ({
tag: 'link',
attrs: {
rel: 'stylesheet',
crossorigin: true,
href: toOutputPath(file),
},
});
const getCssFilesForChunk = (chunk, seenChunks = new Set(), seenCss = new Set()) => {
// Logic to collect CSS files from chunks
}
const getCssTagsForChunk = (chunk, toOutputPath) =>
getCssFilesForChunk(chunk).map(file =>
toStyleSheetLinkTag(file, toOutputPath)
);
This approach:
When refactoring complex logic, also consider extracting helper functions that handle setup tasks or conditional logic blocks to make the main function flow more obvious.
Enter the URL of a public GitHub repository