1. What is a Function?

Imagine you have a machine that makes sandwiches. Every time you want a sandwich, you just press a button, and it makes it for you. A function in JavaScript is like that button press: it’s a way to get something done without having to repeat all the steps every time.

In JavaScript, we write functions by naming them and telling them what to do. javascript Copy code

    function makeSandwich() {
    console.log("Here’s your sandwich!");
  }
                

Now, whenever we say makeSandwich(), it will print “Here’s your sandwich!” on the screen.

2. Function Declaration and Expression

There are two main ways to create functions in JavaScript:

• Function Declaration: This is when we start with the word function. We name the function and tell it what to do. We can use this function anywhere in our code, even before it’s written. javascript Copy code
    function sayHello() {
    console.log("Hello!");
  }
                  

• Function Expression: This is when we create a function but store it inside a variable. We can only use it after it’s created. javascript Copy code
    const sayHello = function() {
    console.log("Hello!");
  };           
                  

Both do similar things, but the function expression needs to be defined before we use it.

3. Arrow Functions

Arrow functions are just a quicker way to write functions. They look a bit different, using => instead of function.

    const sayHello = () => {
    console.log("Hello!");
  };          
                

Arrow functions are especially useful when writing short functions. Here’s an even shorter version: javascript Copy code

    const sayHello = () => console.log("Hello!");
                

4. Parameters and Return Values

A function can take parameters, or special ingredients, that tell it what to use. Let’s say we want our sandwich-making machine to make sandwiches with different fillings. javascript Copy code

    function makeSandwich(filling) {
    console.log(`Here’s your ${filling} sandwich!`);
  }
                

If we say makeSandwich("peanut butter"), it will print “Here’s your peanut butter sandwich!” The filling is the parameter.

We can also make functions return values, meaning they give something back to us. For example: javascript Copy code

    function add(a, b) {
    return a + b;
  }
  
  const sum = add(5, 3); // sum will be 8
                

5. Immediately Invoked Function Expressions (IIFE)

An IIFE is a function that runs as soon as it’s created. It’s like a firework that goes off right after lighting. javascript Copy code

    (function() {
    console.log("This function runs immediately!");
  })();
                 

This can be useful if we want some code to run right away without calling it separately.

6. Scope and Closures

• Scope: Think of scope like where you can use a toy in your house. Some toys can only be used in your room (local), while others can be used anywhere in the house (global). Variables in JavaScript work in a similar way. Variables inside a function can only be used in that function; they’re “local.” Variables outside are “global.” javascript Copy code
    let globalToy = "Racecar"; // global

  function play() {
    let localToy = "Doll"; // local
    console.log(globalToy); // Can use globalToy here
    console.log(localToy); // Can use localToy here
  }
  
  console.log(globalToy); // Can use globalToy here
  console.log(localToy); // Error! localToy only exists in `play` function
                   

• Closures: Closures happen when a function remembers the variables around it even after it’s done running. It’s like a special backpack that remembers its toys. javascript Copy code
    function outer() {
    let outerVariable = "I’m outside!";
  
    function inner() {
      console.log(outerVariable); // inner function remembers outerVariable
    }
  
    return inner;
  }
  
  const remember = outer();
  remember(); // Prints "I’m outside!"            
                   

Closures are powerful and let us do things like keeping track of data between function calls.

7. Higher-order Functions and Callbacks

A higher-order function is a function that either takes another function as a parameter or returns a function. It’s like using a helper to make things easier.

Callbacks are functions that get passed into other functions to be called back later.

For example, setTimeout is a higher-order function because it uses a callback to wait before running code: javascript Copy code

    setTimeout(() => {
    console.log("This message shows after 3 seconds");
  }, 3000);          
                

Higher-order functions are super useful in JavaScript, especially when working with data or making things happen at specific times.