Write code that clearly communicates its intent through expressive method names and simplified control flow. Replace complex inline conditions with descriptive method calls that encapsulate the logic, and use early returns to reduce cyclomatic complexity and focus functions on their primary responsibility.
Key practices:
project.isBrowserState(Project.BROWSER_OPEN)
instead of project.browserState === 'opened'
)Example:
// Before: Complex inline condition
if (project.browserState === 'opened' || project.browserState === 'opening') {
// main logic
}
// After: Expressive method encapsulation
if (project.isBrowserState(Project.BROWSER_OPENING, Project.BROWSER_OPEN)) {
// main logic
}
// Before: Nested conditional logic
function _closeBrowserBtn() {
if (this.props.project.browserState === 'opened') {
return (
<li className='close-browser'>
// button JSX
</li>
)
}
}
// After: Early return with expressive method
function _closeBrowserBtn() {
if (!this.props.project.isBrowserState(Project.BROWSER_OPEN)) return null
return (
<li className='close-browser'>
// button JSX
</li>
)
}
This approach makes code more readable, maintainable, and self-documenting while reducing complexity.
Enter the URL of a public GitHub repository