Why Do We Use Functions in JavaScript?
Published: 2024-01-08 20:28:47

Why Do We Use Functions in JavaScript?

I know that for me to be interested on a subject I have to strongly understand for what is it for, what is the propose and how this subject will help my daily life. So here I am studying JavaScript functions and this was my first question: why do we use these functions? So here is a brief and simple explanation from a junior dev😊 (by the way, thank you functions for making my code looks cleaner and easy to follow, just like tidying up a messy room.)

You can think of functions as a way to group a set of instructions together and execute them as a single unit.

A function is a block of code that performs a specific task. JavaScript functions are basically used to encapsulate logic, making that code more reusable and easier to understand.

The syntax for creating a function in JavaScript is quite simple. Functions can take input in the form of parameters and can return a value or output.

Functions help you organize and structure your code. They also allow for code reuse and make it easier to understand and maintain large codebases.

**Code Reusability: Imagine a Magical Clone Machine**

 We can think of these exemple below: 

```
// CODE USING NO FUNCTIONS

// Various Arrays
 var brands = ["Acer", "Apple", "Sony", "Samsung"];
 var heroes = ["Black Panther", "Cyborg", "Black Canary", "Donna Troy", "Huntress", "Blue Beetle", "Captain Atom"];
 var booksOnMyShelf = ["Calculus Early Transcendentals", "Ravens", "The Self Illusion", "Harry Potter"];
 var thingsInFrontOfMe = ["Laptop", "Beanbag", "Cats", "Slippers"];
 var howIFeel = ["Sleep Deprived", "Wired on Coffee", "Excited"];

 // For Loop for Brands
 for (var i = 0; i < brands.length; i++) {
   console.log(brands[i]);
 }
 console.log("---------");

 // For Loop for Heroes
 for (var j = 0; j < heroes.length; j++) {
   console.log(heroes[j]);
 }
 console.log("---------");

 // For Loop for booksOnMyShelf
 for (var k = 0; k < booksOnMyShelf.length; k++) {
   console.log(booksOnMyShelf[k]);
 }
 console.log("---------");

 // For Loop for thingsInFrontOfMe
 for (var l = 0; l < thingsInFrontOfMe.length; l++) {
   console.log(thingsInFrontOfMe[l]);
 }
 console.log("---------");

 // For Loop for howIFeel
 for (var m = 0; m < howIFeel.length; m++) {
   console.log(howIFeel[m]);
 }
 console.log("---------")
```

- Above we can see that to loop in each of the arrays we need to run the loop multiple times, like that we loose a long time and have to repeat the process for each array, generating lots of line of code for only one functionality.

```
// CODE USING FUNCTIONS 

// Various Arrays
var brands = ["Acer", "Apple", "Sony", "Samsung"];
var heroes = ["Black Panther", "Cyborg", "Black Canary", "Donna Troy", "Huntress", "Blue Beetle", "Captain Atom"];
var booksOnMyShelf = ["Calculus Early Transcendentals", "Ravens", "The Self Illusion", "Harry Potter"];
var thingsInFrontOfMe = ["Laptop", "Beanbag", "Cats", "Slippers"];
var howIFeel = ["Sleep Deprived", "Wired on Coffee", "Excited"];

// FUNCTIONS
// ========================================================================================

// Here we create a "Function" that allows us to "call" (run) the loop for any array we wish.
// We pass in an array as an "argument".
function consoleInside(arr) {

  // We then loop through the selected array.
  for (var i = 0; i < arr.length; i++) {

    // Each time we print the value inside the array.
    console.log(arr[i]);
  }
  console.log("---------");
}

// FUNCTION CALLS (Execution)
// =======================================================================================

// Here we call the function to run our for-loop code on each of the following arrays.
consoleInside(brands);
consoleInside(heroes);
consoleInside(booksOnMyShelf);
consoleInside(thingsInFrontOfMe);
consoleInside(howIFeel);

```
- Instead of writing the same code over and over, you write it once inside a function and then call it whenever you need it. Like magic!
- It's like having a reusable blueprint for common tasks, saving time and effort.

**Testing and Debugging Made Easier: Like Troubleshooting a Machine**

- Functions can be tested individually to ensure they work correctly, making it easier to find and fix bugs.

[What is Debugging? How to Debug Your Code for Beginners](https://www.freecodecamp.org/news/what-is-debugging-how-to-debug-code/)

**JavaScript Functions: Beyond Boring Calculations**

JavaScript functions aren't just about crunching numbers. Here are some cool things you can create with functions: 

- Rock, Paper and Scissors Game

[Rock, Paper and Scissor Game using Javascript - GeeksforGeeks] (https://www.geeksforgeeks.org/rock-paper-and-scissor-game-using-javascript/)

- Compliment Generator

[Compliment Generator](https://codepen.io/sirjessthebrave/pen/WbrzGp)

- Simple Calculator

[JavaScript Calculator - GeeksforGeeks](https://www.geeksforgeeks.org/javascript-calculator/)

I will reproduce some of these tools and will be back with my review of the process. Thank you for reading up to here! Keep up the studies everybody!