DEV Community

Heru Hartanto
Heru Hartanto

Posted on • Updated on

Clean your function ๐Ÿงผ

Use descriptive name

Again, name your function descriptively, it's okay if your function name are lengthly as long as describe what the functions actually does.
function name usually has a form of action verbs

// โŒ Don't 

function switch(){

}

function declined(user){

}

// โœ… Do

function toggleSwitchDarkMode(){

}

function isDecline(user){

}

Enter fullscreen mode Exit fullscreen mode

Add default arguments for extra save

Default argument can prevent your function from returning undefined , actually you can do short-circuiting as well but default argument is more cleaner

// โŒ Don't

function printFromDirectory(dir){
    return dir 
}

printFromDirectory()


// โœ… Do

function printFromDirectory(dir = './print'){
    return dir 
}

printFromDirectory()


Enter fullscreen mode Exit fullscreen mode

Limit number of arguments

function argument should only have zero, one or two arguments, more than that mean your functions is to complex and need to devided to smaller one.
if you want to pass data through function you can use object

// โŒ Don't 

function sendUserData(name,state,sex,age){

}

sendUserData('John','Canada','Male','32')

// โœ… Do

const userData={
    name:'John',
    state:'Canada',
    sex:'Male',
    age:'32'
}
sendUserData(userData)

Enter fullscreen mode Exit fullscreen mode

Avoid multiple action in function and avoid using flag as arguments

A function should done one thing at a time, this rules reduces function size and complexity, with make it easier to debug and refactor.

Generally the line number of a function should not more than 20-30 lines if possible, also a flag in arguments mean the function can still be
simplified

// โŒ Don't 
function calculate(x, y, operation){
    if(operation === 'add'){
        return x + y;
    }
    if(operation === 'substract'){
        return x - y;
    }
    if(operation === 'multiply'){
        return x * y;
    }
    if(operation === 'divide'){
        return x / y;
    }
}

// โœ… Do
function addNumber(x,y){
    return x+y;
}

function substractNumber(x,y){
    return x-y;
}

function multiplyNumber(x,y){
    return x*y;
}

function devideNumber(x,y){
    return x/y;
}

Enter fullscreen mode Exit fullscreen mode

Don't repeat yourself

Duplicate code is not a good sign, if you repeat yourself you will have to update multiple places wherever there is logic change

// โŒ Don't 

function getTrucksList(trucks) {
    trucks.forEach(truck)=>{
        const {price, size, numberOfWheel} = truck
        render({price,size,numberOfWheel})
    }
}

function getCarsList(cars) {
    cars.forEach(car)=>{
        const {price, numberOfDoors} = car
        render({price,numberOfDoors})
    }
}

// โœ… Do

function getVehichlesList(vehicles){
    vehicles.forEach(vehicle){
        const price = vehicle.price
        const data = {price}

        if(vehicle.type ==='truck'){
            data.size = vehicle.size
            data.numberOfWheel= vehicle.numberOfWheel
        }
         if(vehicle.type ==='car'){
            data.numberOfDoors= vehicle.numberOfDoors
        }
        render({data})
    }
}

Enter fullscreen mode Exit fullscreen mode

Avoid side effects

Side effects can resulting undesirabled behaviours all side effets have to centralized

// โŒ Don't 
let date = "11-08-2021";

function splitIntoDayMonthYear() {
  date = date.split("-");
}

splitIntoDayMonthYear();


// โœ… Do
function splitIntoDayMonthYear(date) {
  return date.split("-");
}

const newDate = splitIntoDayMonthYear(date)

Enter fullscreen mode Exit fullscreen mode

Discussion (0)