Skip to main content

Clean code in software development

· 4 min read
Marcelo Malacalza

Hey there! In the software development realm, it's not just about getting things to work; it's about getting them to work in a slicker and smarter way. So, have you ever come across "Clean Code"? If not, you're about to discover something truly valuable.

thumbnail image

Clean Code as a convention

First things first, "Clean Code" isn't about rigid rules that we must stick to like glue; it's a bunch of principles or guidelines that make it easier to write code that's intuitive, readable, and simple to tweak. That goes for the person writing it and anyone who might need to read or edit it down the line.

I can't stress this enough, these aren't hard-and-fast rules, but the more we embrace them, the happier and less annoyed we'll become.

Now, with that out of the way, how can we put these principles into action? Here are some examples to kick things off:

Meaningful Names

Name your variables and functions with clear, meaningful names that make sense for their purpose. Like this:

// Bad
const d = 7 // What is 'd'?

function q(x, y) {
// What does 'q' do without reading its code?
return x + y
}

// Good
const daysInWeek = 7 // Clearly, days of the week

function sumNumbers(a, b) {
// Now it's understandable, without reading the code, what the function does
return a + b
}

Short Functions with a single purpose

Divide and rule, dude! Instead of cramming everything into one massive function, split it into smaller functions, each with its own special task. Check this out:

// Bad
function getAndProcessData(params) {
// Validate parameters
// Fetch data from an API
// Handle errors
// Process the data
}

// Good
function validateParams(params) {
// Validate parameters
}

function getData(params) {
// Fetch data from API
}

function checkErrors(params) {
// Handle errors
}

function processData(params) {
// Process the data
}

Avoid obvious comments

In a perfect world, our code should speak for itself without the need for comments. But if you ever find yourself scribbling one down, aim for something that's not just repeating what's obvious in the code. Here's an example:

// Bad: Obvious comment
const total = calculateCartTotal() // Calculate the shopping cart total

// Better: Explanatory comment
const total = calculateCartTotal() // Sum the values of the shopping cart

// Good:
const cartTotal = calculateCartTotal()

The ultimate comment is simply a killer name for your variable or method.

Maintain consistent indentation

Consistency rules. Pick either 2 or 4 spaces for indentation and stick with it everywhere in your code.

// Bad
async function getPokeData() {
const apiResponse = await fetch('https://pokeapi.com/pokemons')
if (!apiResponse.ok) {
console.log('An error occurred')
} else {
const apiData = await apiResponse.json()
return apiData
}
}

// Good
async function getPokeData() {
const apiResponse = await fetch('https://pokeapi.com/pokemons')
if (!apiResponse.ok) {
console.log('An error occurred')
} else {
const apiData = await apiResponse.json()
return apiData
}
}

Avoid passing more than 3 parameters in functions

In an ideal world, we should limit the number of parameters in functions to a max of 3. If we need to pass more, we can bundle them into an object. This trick results in cleaner, more concise code and saves us from the hassle of remembering parameter orders. Like this:

// Bad
function processData(flag, data, id, aFilter, bFilter, cFilter, actionByFilter) {
// My code
}

// Good
const filterParams = {
id,
aFilter,
bFilter,
cFilter,
actionByFilter
}

function processData(flag, data, filterParams) {
console.log(filterParams.id)
console.log(filterParams.actionByFilter)
}

Conclusion

When you put all these tips into action, you'll also be giving your code a makeover, making it cleaner and more organized. It's not just about making your code look "fancier"; it's about leveling up as a more efficient and team-friendly developer. Making your projects easier to grasp, manage, and share benefits everyone. So, go ahead, keep your development as neat as a pin!