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 :
-
Function Declaration
The most typical method, it allows hoisting i.e. can be used
before declaration.
function funcName(A1, A2...){}
-
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..){ };
-
Generator Function Declaration
A function that usesyeild
keyword to return a Generator-
Iterator object on whichnext
method can be called later.
function* name(A1, A2..) {}
Generator Function Expression
function* function_name(A1,A2..){}
-
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');
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. Alsofunction
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
Top comments (2)
In reduce example, the argument "current" should be changed to "currentValue" or parameter "currentValue" should be changed to "current".
It's worth using strings as arguments for Function constructor, so you know exactly how it works: