5 WAYS TO IMPROVE YOUR FUNCTIONS IN JAVASCRIPT
7 min
Mar 30 2021
When calling JavaScript functions, you pretty much always need to provide arguments. But these turn into a mess pretty quickly if you’re not careful. So I’ve listed a few ways for you to make your life as a JavaScript developer easier, make your code easier to read and let your co-workers read your work faster too! Just imagine a basic function with 3 arguments that does some magic with your data and returns a result. Pretty straightforward right? I’m sure you can find a function in your code that fits that description. I’m going with a fictional function that just does something silly.
function myFunction(a, b, c) {
    const result = a*b;
    const code = ${c}-${result};
    return code;
}

const answer = myFunction(2,3,'A');
console.log(answer);
This will output A-6 , but you can’t know that by reading the arguments. You could perhaps interpret that by changing the function name, but that only improves readability only so much.

1. Proper Function and Variable Names

This might seem obvious, but having proper function and variable names can tell a lot. myFunction() doesn’t tell you anything, at all. What would’ve been a good name in this situation? Probably something like generateSystemCodeFromBaseValue() . Yeah that is pretty long, but seriously, does that matter? Are we limited by character length in any situation? On top of that, whenever you publish your code you should probably minimize it, which will strip away most function names again anyways. So use proper names! They don’t have to be short, they have to be descriptive. You have to know what a function does by just reading the name. Doing this will prevent you from actually needing a comment above it.

2. Named Arguments

Named arguments is not something we have in JavaScript. But, you can implement it anyways using object notation. If you specify object notation in both the function and the calling line, you will have named properties implemented. I’ve rewritten the same code to have named arguments.
function generateSystemCodeFromBaseValue({baseValue, multiplier, category}) {
    const result = baseValue*multiplier;
    const code = ${category}-${result};
    return code;
}

const answer = generateSystemCodeFromBaseValue({baseValue: 2, multiplier: 3, category: 'A'});
console.log(answer);
As you can see, you can already understand what is going on here, and you actually know what kind of data you’re sending in. And if you change the order of the arguments in the object, that doesn’t even matter, the end result will be the same regardless.

3. Default Values

Once you’ve configured your function calling to use object notation with named arguments like above, you can also start to specify default values easily. You only have to define what the values of the defaults should be, and you can override these with calling the function. This means you can specify some defaults without having to always know what to specify when calling the function. I’ve added some defaults to the previous code, and stripped away an argument because I’m fine with the default. The end result is still A-6 .
function generateSystemCodeFromBaseValue({baseValue = 1, multiplier = 3, category = "A"}) {
    const result = baseValue*multiplier;
    const code = ${category}-${result};
    return code;
}

const answer = generateSystemCodeFromBaseValue({baseValue: 2, multiplier: 3 });
console.log(answer);

4. Cut up long functions

If your function does multiple things, you should cut it up in 2, and define proper names (see point 1) for both of them. Let’s take our code from the previous step, that is a function that is compact, does one thing, and is easily understandable without any comments. However, let’s say the category “code” is defined based on the result of the multiplication we’re doing. Even if nowhere else in our code we require this to be calculated, you should still put it in a separate function for readability reasons. Just compare both options here. The first is squeezing everything in a single function, the second option is splitting it up in two functions.
// option 1, a single function
function generateSystemCodeFromBaseValue({baseValue = 1, multiplier = 3}) {
    const result = baseValue*multiplier;
    let category;
    if (value % 5 === 0) {
        category = 'A';
    } else if (value === 7) {
        category = 'B'
    } else {
        category = 'C'
    }
    
    const code = ${category}-${result};
    return code;
}

// option 2, split it in 2 functions
function getCategoryForValue({value = 0}) {
    if (value % 5 === 0) return 'A';
    if (value === 7) return 'B';
    return 'C';
}

function generateSystemCodeFromBaseValue({baseValue = 1, multiplier = 3}) {
    const result = baseValue*multiplier;
    const category = getCategoryForValue(result);
    const code = ${category}-${result};
    return code;
}
I would say the second option would be much cleaner. Not only is there no need for the if/else statement, you can also use return to just break out of the function to make for cleaner reading too. This is also less error-prone. With if/else statements you can sometimes forget to add “else” and just add another if-statement later, which can cause you to override the variable. And because you then start to have to use let instead of const it actually is allowed to override it.

5. Return multiple variables

You can actually return multiple variables with JavaScript the same way you can provide multiple named arguments to a function. Let’s say you can both the category and the value returned from the function, instead of just a single code, then you can return multiple variables.
function getCategoryForValue({value = 0}) {
    if (value % 5 === 0) return 'A';
    if (value === 7) return 'B';
    return 'C';
}

function generateSystemCodeFromBaseValue({baseValue = 1, multiplier = 3}) {
    const result = baseValue*multiplier;
    const category = getCategoryForValue(result);
    return category, result;
}

const category, result = generateSystemCodeFromBaseValue({baseValue: 2, multiplier: 3 });
console.log(category, result);
This way you can use both variables outside the function without any issues or changes to code! Isn’t that easy?

In Conclusion

There are so many easy-wins with JavaScript code, but these 5 should help you write better functions!
BLOG LATEST
Popular articles
GOT AN IDEA? LET'S DISCUSS!
Share your project’s scope, timeline, technical requirements, business challenges, and other details you consider necessary. Our team will study them and contact you soon. Let’s make an exciting product together!
By sending this form I confirm that I have read and accept the Privacy Policy
WELCOME TO OUR OFFICES
Georgia
Russia