Functions And Arrow Functions

Source: Dev.to

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

The most common way to write a function is with the function keyword:

/* Function with no arguments */
function showGreet() {
    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. Unclear function names can cause bugs.

Function Naming Best Practices

• Keep a naming convention of preference; a common choice 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 (avoid vague names like doSomething or myAmazingFunction).

Common prefixes to signal a function’s purpose:

• get: retrieve data (e.g., getUser)
• set: modify data (e.g., setUserName)
• handle: handle events (e.g., handleFormSubmission)
• is, has, can: predicate functions returning a boolean (e.g., canLogin, isNumber, hasRequiredFlag)

Avoid non‑obvious abbreviations to maintain readability.

Calling Functions

To use a function you call it:

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

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

/* 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

You can pass information through arguments, sending data from outside the function to be processed:

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

function calculateArea(_width, _height) {
    return _width * _height;
}

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

Return Values

Functions can return results using the return keyword. If you don’t explicitly return anything, the function returns 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 a value, such as passing it into another function.

Arrow Functions

Introduced in ES6, Arrow Functions provide a shorter syntax for function expressions:

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

Key differences:

• No function keyword.
• 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 the 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, Arrow Functions are great for short functions and are commonly used for:

• Callbacks like map, filter, or event listeners.
• Inside classes when you don’t want the function to bind its own this.

When to Avoid Arrow Functions

• When you need to bind this to a specific context.
• When a function is long and complex; the concise syntax can reduce readability.

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: when you find yourself writing the same logic multiple times, it’s probably time to wrap it in a function.

Next Up

Now we know how to create functions and 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 explore the simplest ways to control how our code works through if, else if, and else.