# Javascripts Functions

# Introduction

Imagine building a machine where every button triggers a specific action—whether it's brewing coffee or turning on the lights. In JavaScript, **functions** are like these buttons. They encapsulate logic, execute tasks, and make our code more organized and reusable.

But JavaScript functions aren’t just simple tools; they are **first-class citizens**—meaning you can assign them to variables, pass them as arguments, and even return them from other functions. This flexibility unlocks **functional programming**, **event-driven code**, and even **asynchronous operations** like fetching data from an API.

Whether you're writing a basic script or architecting a large-scale application, functions are at the core of JavaScript. In this guide, we’ll break down **everything**—from basic syntax to advanced concepts like closures, recursion, and function composition. By the end, you’ll not only understand functions but also master the art of writing cleaner, more efficient code.

# Functions

Ever felt like you’re writing the same piece of code over and over again? Imagine if every time you wanted to send a message, you had to type out the entire "Hello, world!" manually. That would be exhausting, right?

Enter **functions**—your personal code assistants! They let you wrap a task inside a reusable block, so instead of repeating yourself, you just call the function and let it do the work. Whether it’s crunching numbers, handling user input, or making API calls, functions are at the heart of every JavaScript program.

But here’s the catch: JavaScript doesn’t have just *one* way to create functions. There are **function declarations, expressions, arrow functions, callbacks, closures**, and more. Each has its own quirks and superpowers.

Let’s dive deep and break it all down—starting from the absolute basics and moving all the way to the pro-level tricks. Ready? 🚀

## 1️⃣ Declaring a Function

JavaScript provides multiple ways to declare a function:

### 📝 Function Declaration

A function declaration defines a function using the `function` keyword. It is the most commonly used and **hoisted**, meaning you can call the function before its declaration.

```javascript
function functionNamw (a,b){
    return (a+b)
} // Normal traditional functional declaration

function Hello (){
    return console.log("Hello World!!")
}

//Calling the function
functionName(10,22)
Hello()
```

✅ **Advantages:**  
✔️ Readable and beginner-friendly syntax.  
✔️ Hoisted, meaning you can call it before defining it.

🔴 **Disadvantages:**  
❌ Cannot be used inside expressions directly.

### **📝 Function Expression** (Assigning Functions to Variables)

A function expression involves storing a function inside a variable. Unlike function declarations, these are **not hoisted**, meaning they must be defined before they are used.

```javascript
const example = function() {
    console.log("This is an example of function expression")
}
//calling this function 
example()

const addition = function(num1, num2){
    return (num1 + num2)
}
```

✅ **Advantages:**  
✔️ Can be assigned to variables, making it flexible.  
✔️ Used in callbacks and event listeners.

🔴 **Disadvantages:**  
❌ Not hoisted, so must be defined before use.

### 📝 Arrow Functions (ES6 – Concise & Modern)

Arrow functions provide a **shorter syntax** for writing functions and behave differently with `this`. Arrow functions are tricky and interesting topic to discuss. As we are discussing about the functions in a brief manner, then we will cover the arrow functions in-depth detail in another blog. Here is just the basic syntax how arrow functions are looked like.

```javascript
const example = () => console.log("This is arroe function")
example()

const multiply = (a, b) => {
    let result = a * b;
    return result;
};
console.log(multiply(4, 2)); // Output: 8
```