Functions in JS before learning React

Hello Everyone 👋
Thanks for all the ❤️ 🔖 and 🦄 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

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.
   

   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.
   

    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.
   

    function* name(A1, A2..) {}
   

   Generator Function Expression
   

     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.
   

      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.
   
   

      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.

 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

 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()

  const Arr = [1, 2, 3, 4];

  const sum = Arr.reduce((last, current) 
  => {  
    return last + current;
    });

  console.log(sum); //will print sum

.filter()

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

.map()

  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 😊.
github ⭐ linkedIn ⭐ Twitter

Comments

[António Fraco]

In reduce example, the argument "current" should be changed to "currentValue" or parameter "currentValue" should be changed to "current".

[Jakub T. Jankiewicz]

It's worth using strings as arguments for Function constructor, so you know exactly how it works:

new Function('A1', 'A2', 'return A1 + A2');