Functions And Arrow Functions

What are functions?

If we want to put it in simple words, they are one of the main building blocks of JavaScript. They are used to organize your code into smaller, reusable bits that we can reuse to avoid rewriting the same logic over and over again. Throughout this article, we’ll be breaking down what functions are, how to use them, and what are the differences between regular and Arrow Functions.

Why do functions exist?

At their core, functions are a way to store repeatable work to make it consistent. Think of them as a little machine; you give it an input, it does some work, and then spits out a result.

This is tied to one of the Core Programming Principles, the DRY (Don’t Repeat Yourself) principle, which in short states that if you need to repeat the same process multiple times through your code you don’t rewrite it every time, instead you wrap the process in a function and then call the function whenever it is needed.

This really helps make your code easier to read, maintain and, later on, debug. Think of it like a coffee machine: once you got the machine you don’t need to get a new machine or re-build your current one every time you want coffee. You just press a button.

Declaring a function

Alright, now that we know why functions exist in the first place, let’s see how to actually write one. The most common way to write a function is with the function keyword‍

/*Function with no arguments*/
function showGreet(name) {
	return `Hello world!`;
}

/*Function with argument name*/
function showPersonalizedGreeting(name) {
	return `Hello, ${name}!`;
}

While functions can be named however you want, it is important to keep a standard in order to keep your codebase clean, you’d be surprised how often unclear function names cause bugs.

Function Naming Best Practices:

• Keep a naming convention of preference, my personal preference is camelCase.
• Since functions tend to perform actions, their names should typically be verb phrases  (e.g., calculateTotal, filterResults, checkValidation)
• Make sure the name is descriptive (e.g., avoid vague names like doSomething or myAmazingFunction)
• Use common Prefixes to signal the functions purpose when possible:
  • get: to retrieve data (getUser)
  • set: to modify data (setUserName)
  • handle: to handle events (handleFormSubmission)
  • is, has, can: for predicate functions returning a boolean (canLogin, isNumber, hasRequiredFlag)
  • Avoid non-obvious abbreviations to maintain readability.

Calling Functions

Alright, now you know how to write a function, in order to use it we need to call it which we do as follows:

/*Function with no arguments*/
function showGreet() {
	return `Hello world!`;          // returning the value
}

/*Function with argument name*/
function showPersonalizedGreeting(name) {
	return `Hello, ${name}!`;       // returning the value
}

/*Call function to store the value in a variable:*/
let simpleGreeting = showGreet();  // Hello world!
let greeting = showPersonalizedGreeting('Friend'); // Hello, Friend!

/*Call function directly in a console:*/
console.log(showPersonalizedGreeting('Friend'));   // Hello, Friend!

Passing Arguments

As you can tell from the functions we’ve been defining above, you can pass information through arguments. This is a way to send information from outside the function to process it. Let’s take the following example:

const width  = 15;
const height = 20;
let area ;

function calculateArea(_width, _height) {
	return _width * _height; // returning the calculation
}

area = calculateArea(width, height); // area = 300

Return Values

An important thing to note is that functions can return results when using the return keyword. If you don’t explicitly return anything, the function gives back undefined.

Function Expressions

Instead of declaring a function directly, you can assign it to a variable:

const multiply = function (a, b) {
  return a * b;
};

console.log(multiply(4, 2)); // 8

This is called a function expression. Function expressions are useful when you want to pass a function around as values; for example trying to pass a function into another function.

Arrow Functions

Introduced in ES6, Arrow Functions are a shorter way to write function expressions.

const divide = (a, b) => {
	return a / b;
};

It looks simpler, right? well this is what most people thought about them. The syntax is slightly different and it looks cleaner, which is right as long as you keep it that way. Now, let’s take a look at the syntax differences:

• There is no function keyword.
• It uses an “arrow” => between the parameters and the body.
• If the function has only one parameter you can skip the parentheses:‍

const square = x => x * x;

Implicit Returns

If your function body is a single expression, Arrow Functions can implicitly return it (no return keyword needed):‍


const add = (a, b) => a + b;

When Should I use Arrow Functions?

Generally speaking, Arrow Functions are great if you are writing short functions but there are some specifics in which they are commonly used. These may not make too much sense right now but we’ll get there during this series.

• Callbacks like map, filter or event listeners.
• Useful inside of classes as they don’t bind their own this.

When should I avoid Arrow Functions?

• Not ideal in cases in which you need to bind this.
• If a function is long and complex (while Arrow Functions look clean on their own they can reduce readability if the logic within is difficult).

In a Nutshell

Let’s Wrap it up!

Functions let you keep your code clean and reusable, while Arrow Functions give you a shorthand syntax that’s especially handy in modern JavaScript. Use regular functions when you need clarity or access to this, and Arrow Functions when you want brevity.

Now that you know how to use functions remember, next time you find yourself writing the same logic multiple times, remember: it’s probably time to wrap it in a function.

Next Up

Now we know how to create functions and how to create the type of variable we want, it is time to start adding some logic to it! In the next article “JavaScript 101 - Control Flow Basics” we’ll be going through the simplest way we can control how our code works through if, else if and else.

‍