Functions and best practices

Hi, been learning functions in javascript and there is something it doesn’t make sense to me.

the normal function is :
function function_name (params)
{ function body }

then there is the arrow version
const function_name = (params) =>
{ function body }

and its derivates
const function_name = (params) => return_expression

which is the correct one to use as good practice?

And also do you have to use “;” after each line of code? I have the habit of not using them due to some practicing in python before javascript

So first to address semi-colons, the short answer is no they’re not required. Javascript can operate just fine without a semi-colon at the end of every line of code, however it’s considered best practise as most programming languages do require semi-colons for their respective compilers to know when a line of code has actually ended. I also came to JS from Python and it was a bit of a learning curve, but if you ever want to learn Java, or C/C++/C# or any of those languages, you’ll thank yourself for getting in the habit of doing semi-colons.

As for function syntax, it entirely depends on personal preference however there are some guides that suggest you use them in a certain way for consistency. The way I use them is as follows:

function foobar(foo, bar) {
    return foo + bar;
}

This syntax is the classic way of writing functions and the type of declaration you’ll find in most other languages. Generally I like to use this syntax when writing a regular function that requires some work in the body, e.g. imagine writing a function to calculate a score in a sports game.

const foobar = (foo, bar) => {
    return foo + bar;
}

Clearly we can see that using an arrow function like this looks very similar to the traditional function syntax. And in fact it does work mostly the same, with a few exceptions when using objects. However for our purposes right now, they are functionally identical. I used to use these as a replacement for standard function declarations however I no longer do this for backwards compatibility and also just personal preference. Feel free to use this instead of the standard declaration.

Then finally,

const foobar = (foo, bar) => foo + bar;

This is clearly more compact and for the example function we’ve been using likely best practise. Usually this is the type of arrow function I’ll use when I do use an arrow function, and specifically this can only be used this way when the only line you require is the return line from the function. I find this to be a lot cleaner and easier to read when a function is short and it just prevents the code getting too bloated to read through unnecessarily. If you have 20 standard functions, they’ll take up likely 80 lines (4 per function) if you are using the whitespace in the normal way. Whereas 20 compact arrow functions will use 20 lines, making it much easier to read.

Hopefully that helps and let me know if you have any other questions!

2 Likes

I personally like the classic way with function rather than declaring a constant as a function. I noticed that all the functions at my course level in JS are declared using const and wasn’t sure if this is the right way to do it as a professional.

I don’t know exactly what you mean by backward compatibility and what is the difference between the 2 methods, but that’s probably because I didn’t reach that stage.

Thanks for your help

Backwards compatibility is becoming less of an issue as we get further from 2015, which was the year that arrow functions were introduced, however it can still be something to consider. There are still some browser and Javascript versions in use which don’t support arrow functions. Although these are so few and far between it’s not as much of a worry as it once was.

The right way just depends on what the situation calls for. The main place arrow functions get an advantage is when working with objects as in the article I linked, however that’s pretty advanced stuff and won’t be something you need to worry about until much later on. As long as the code can make sense to you and other people you work with, then that’s what’s important.