Functional Programming with JavaScript chapter 3 Notes
Tags: javascript, functional, webdev, beginners
Published: 2023-04-25 09:17:37

JavaScript supports _functional programming_ because JavaScript functions are **first-class citizens**.

**What is first-class citizens?**

First-class citizens or as called first-class object means that functions can do the same things that variables can do.

It can be stored whether in a variable, array or object.
And that functions can be passed as an argument to the functions and be returned by the function.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irtuv94esfqh1mif87ff.png)


> for a better tracking of the following examples' output,I am using a `h4` with _id_ equals **ch3**.

```html
<div class="body" style=" height: 1000px; ">
    <h1 style="color: brown; align-items: center; text-align: center;" class="mt-5">Learning react</h1>
    <h4 class="display-6 text-center mt-4" id="ch3"></h4>
</div>

<script src="./ch3.js"></script>
```

```js
let content = document.getElementById("ch3");
``` 

## 1- Store function in a variable.

We can declare functions with the var or let  keyword the same way you can declare strings, numbers, or any other variables:

```js
var log = function (msg) {
  console.log(msg);
  content.innerText += `\n  ${msg}`;
};

log("In JavaScript functions are variables");
// In JavaScript, functions are variables
```
With ES6, we can write the same function using an arrow function

```js
// using an arrow function

var log = (msg) => {
  console.log(msg);
  content.innerText += `\n  ${msg}`;
};

log("In JavaScript functions are variables using an arrow function");
```

## 2- Store functions in objects

Since functions are variables, we can add them to objects:

```js
// Since functions are variables, we can add them to objects:
const obj = {
  msg: "adding functions to objects",
  message: "They can be added to objects like variables",
  log(msg) {
    console.log(msg);
    content.innerText += `\n  ${msg}`;
  },
};
obj.log(obj.msg);
obj.log(obj.message);
```
In the previous example we store a function in a variable called **log**.

## 3- Store functions in arrays.

We can also add functions to arrays in JavaScript

```js
// Since functions are variables, we can add them to arrays:

const arr = [
  "adding functions to arrays",
  (log) => console.log(log),
  "like variables",
  (msg) => {console.log(msg);
    content.innerText += `\n  ${msg}`;
},
  (test) => {
    console.log(test);
    content.innerText += `\n  ${test}`;
  },
  "They can be inserted into arrays",
];

arr[4](arr[5]);
arr[1](arr[0])
arr[3](arr[2])
// They can be inserted into arrays
// like variables
```

## 4- Pass functions as arguments.
 Functions can be sent to other functions as arguments.

```js
const insideFn = logger => logger("They can be sent to other functions as arguments");
insideFn(log);
```

## 5- Return Functions by the function.

Functions can be also returned from other functions, just like variables:

```js
const createScream = function(logger) { 
    // getting logger functions as a parameter
    console.log('new func return');
    return function(msg){ 
        // getting a normal msg text as an argument
        logger(`${msg} from return function  !!!`);
    }
}
```
_Using ES6 syntax, we could describe the same createScream_

```JS
const createScreamarrow = logger => message =>
logger(message.toUpperCase() + "!!!")
```