Functions in JS before learning React
Tags: react, javascript, beginners, webdev
Published: 2021-09-04 13:01:02

Hello Everyone :wave:
Thanks for all the :heart: :bookmark: and :unicorn: on the [previous post] (). I use this space to share beginner friendly stuff about front-end development.
Today, let's talk about functions concepts in _JavaScript_ and _React_.

-----

#Functions
A short introduction to JavaScript functions.
In JavaScript, functions are actually objects. They have attributes and methods too. The only thing that differentiates them from objects is that they can be called.
__syntax__
```javascript
function sum(a, b) {
  return a + b;            
}
```
##Ways to Declare Function in JavaScript
The most common ways are by using __function declaration__ or by __function operator__. 
Following are the different ways to declare a function :
1. __Function Declaration__ 
   The most typical method, it allows hoisting i.e. can be used 
   before declaration. 
    ```javascript
    function funcName(A1, A2...){}
    ```

2. __Function Expression__
   It is most suitable to use when you want to assign your 
   function as an object to a variable.
    ```javascript
     var var_name = function funcName(A1,A2..){
     };
    ```
3. __Generator Function Declaration__
    A function that uses `yeild` keyword to return a Generator- 
    Iterator object on which `next` method can be called later.
    ```javascript
     function* name(A1, A2..) {}
    ```
    __Generator Function Expression__ 
    ```javascript
      function* function_name(A1,A2..){}
    ```
4. __Function Constructor__
    The Function keyword is actually a constructor which creates 
    a new function. This is the least preferred method.
    ```javascript
       var var_name = new Function(A1,A2..,'FunctionBodyString');
    ```
5. __Arrow Function__
   This function is used for its shorter syntax and to get rid of 
    `this` value.
   ```javascript
      var var_name = (A1, A2..) => {};
   ```

-----
##Arrow Functions in React
Arrow Functions are a more concise way of writing functions, and are frequently used in React.
* If there is only one statement inside function body then 
   `return` and `{}` can be omitted. Also `function` keyword is 
   not used. 
* In case of only one parameter, parameter parentheses is not 
  used.
* Use of Arrow functions prevent any errors caused by making use 
  of this within callbacks.
   

```javascript
 const arrowFunc = () =>
  'Hello';
 console.log(arrowFunc());
```

-----


##Higher-Order Functions 
A __“higher-order function”__ is a function that accepts functions as parameters and/or returns a function. A __higher-order component (HOC)__ is an advanced technique in React for reusing component logic. __HOC__ is easier to understand when knowing __Higher-order functions__ beforehand.

__Example__
```react
 import React from 'react';
  export const doIncrement = state =>
      ({ counter: state.counter + 1 });
```
* Map, filter, and reduce are some examples of HOF — and make
  transforming, searching, and summing easier!

#####.reduce()
```javascript
  const Arr = [1, 2, 3, 4];
 
  const sum = Arr.reduce((last, current) 
  => {  
    return last + current;
    });
 
  console.log(sum); //will print sum
```

#####.filter()
```javascript
  
   const Num = [1, 7, 2, 8, 9];
   const filterArr = Num.filter(n => {  
    return n > 5;
    });

```

#####.map()
```javascript
  const usernames = ['A', 'B', 'C', 'D'];
  const message  = usernames.map(member => {
  return member + ' hello.';
   })
```
After learning about higher-order functions, all the fundamental knowledge is established to learn about React’s higher-order components.


-----


####Thanks for Reading
I hope it was helpful. See you on next post :blush:.
[github](https://github.com/RajshreeVats) :star: [linkedIn](https://www.linkedin.com/in/rajshree-vatsa-6493371b8/) :star: [Twitter](https://twitter.com/RajshreeVatsa/)