Functions in JavaScript

Functions are a fundamental building block in JavaScript, making it a powerful and efficient language. Functions are blocks of code that are reusable and can be called multiple times with different inputs. This article is intended to help beginners understand the concept of functions in JavaScript by using analogies and code examples.

DRY principle 🍂

The DRY principle is an important concept in software development. DRY stands for "Don't Repeat Yourself." The principle encourages developers to write reusable, modular code that avoids duplication. This not only makes code easier to maintain, but also improves performance by reducing redundant calculations and operations.

One example of repeated code blocks in JavaScript is when you need to perform the same calculation multiple times in your code. For example, suppose you have a website that calculates the total cost of items in a shopping cart. You might find that you need to perform this calculation in several different parts of your code. Here's an example:

const item1 = 20;
const item2 = 30;
const item3 = 40;

const total1 = item1 + item2 + item3;
console.log(total1);

const item4 = 50;
const item5 = 60;
const item6 = 70;

const total2 = item4 + item5 + item6;
console.log(total2);

As you can see, the code to calculate the total is repeated twice. This violates the DRY principle, and makes the code harder to maintain. To avoid this issue, we can refactor the code by using a function.

Related articles: Understanding the DRY Principle: A Beginner's Guide

Declaring a Function

Declaring a function in JavaScript is as easy as writing the keyword function followed by the function name and a set of parentheses that can accept inputs, or arguments. The code inside the function is enclosed in curly braces .

Here is an example of a simple function that adds three numbers together:

function calculateTotal(num1, num2, num3) {
  return num1 + num2 + num3;
}

In JavaScript syntax, apart from using the function keyword, you could also declare a function using an arrow =>, which is known as an arrow function.

const calculateTotal = (num1, num2, num3) => {
  return num1 + num2 + num3;
}

Calling a Function

To call a function, you simply need to write the function name followed by a set of parentheses and any inputs that you want to pass to the function.

// This will print the result 90 in the console.
console.log(calculateTotal(20, 30, 40)); 

We can also call the function to refactor the code example above, which contains repeated code blocks.

const total1 = calculateTotal(20, 30, 40);
console.log(total1);

const total2 = calculateTotal(50, 60, 70);
console.log(total2);

Conclusion

Functions are a fundamental concept in JavaScript that can greatly simplify your code. By breaking down a task into smaller, reusable blocks of code, you can write more efficient and organized programs. Understanding functions and how to declare and call them is a crucial first step in mastering JavaScript.