Function js JavaScript complete principles and advance
Ease in and understanding of function js
Table of contents
A function is a set of statement or procedure on how to perform a particular task or calculate the value of a given parameters.
Function Lite
Function contain parenthesis with enclose parameters(or rather a function with an arguments) or none parameter and body of procedures or statements to perform a given task.
A function call runs every program of a given function body.
Princple/basic code of function
//General formular =>
function parenthesis(parameters) {
body of statement or procedure...
return ...
}
//calling a function
parenthesis(parameters);
//Clear example:
function add(number) {
let solution = number + number;
return solution;
}
console.log(add(5)) //10
Declaring or defining a function
These are means of naming a function that run set of program, it can either be Anonymous & Non anonymous.
Anonymous function
It's a function with no defined name or parenthesis.
//Ordinary Function:
(function() {
console.log(2);
})();
Function can either be an ordinary or arrow, they both have similar objective but different code structure.
The use of (); at every end of a function, it's called invoking a function. This is a function calling itself automatically.
( () => {
console.log('Hello World');
}) ();
Function expression
The step of using the keyword let
, const
& var
to declare a variable, which in return this variable is use to store a function
as the value to be executed.
const multiply = function (num) {
return num * num;
}
console.log(multiply(5));//25
Non anonymous
Simply a defined function with parenthesis.
//Ordinary Function:
function add(num) {
return num + num;
}
console.log(add(5));//10
//Function expression:
const operation = function sub(num) {
return num - 1;
}
console.log(operation(5)); //4
Default parameters
A stand-by define parameter use or an assigned value for a given parameter.
function greeting(name, message = 'Good morning') {
const typing = message + name;
return typing;
}
console.log(greeting(' John')); //Good morning John
Return
This gives the value of the body of function to be executed to a function call.
Any code after return
will not execute or run within the function scope.
Function scope
This basically talks about the user access to a variable or function inside or outside a scope {}
.
Function can access a variable outside it scope
{}
and also modify it(make changes on it).Variable declared inside a function or condition statement can not be accessed outside it scope
{}
If two variable are defined either inside or outside function scope with the same name, then the function only pick or access the one inside the scope
{}
of a function.
Note: In hoisting, a variable declared using only var
or fuction call before it statement of function or body of code(except using function expression), will run code without any expected error.
Calling a function
It's accomplished when the body of function is program on the procedure of how a task should be executed, so the expected output must be called, to show result to the user.
It contain the name of the function with defined argument.
function admin(user) {
return user = `${user} is a junior officer`;
}
alert(admin('James')); //James is a junior officer
Equivalent in function call
Simple description is...
const clothVendor = function sharonWares(rate) {
return ...;
}
clothVendor() == sharonWares() == arguments.callee()
Arrow function
Arrrow function are always anonymous and the ES6 syntax for function.js.
const person= (name)=> {
return name + ", He is eloquent";
}
console.log(person("John")); //John, He is eloquent
There syntax are always short in expression and does not have its own this
, arguments
, super
, or new.target
.
function Person() {
this.age = 0;
setInterval(() => {
this.age++; //the use of `this` refers to the Person object
}, 1000);
}
let sequence = new Person();
console.log(sequence);
In ordinary function, this approach is different due to their working principles.
function Person() {
// define this as a variable
const self = this;
self.age = 0;
setInterval(function growUp() {
// The callback refers to the `self` variable as the Person object
self.age++;
}, 1000);
}
const incr = new Person();
console.log(incr) //1
The next step doesn't perform the function of this
in object js.
function Person() {
// The Person() constructor defines `this` as itself.
this.age = 0;
setInterval(function ageBracket() {
/*In nonstrict mode, the ageBracket() function defines `this` as the global object, which is different from the `this` defined by the Person() constructor, so then this result to zero as defined */
this.age++;
}, 1000);
}
const incr = new Person();
console.log(incr) //0
Hardcore function js JavaScript
Conditional function
Function can be declare in a conditional statement.
Recursive function
This is a function that call itself. Just for instance, looping with while
loop can run code for infinite number of times but when break
keyword is applied, it prevent such from happening, likewise recursive function can be infinite.
Using if
...else
statement ends infinite recursion.
Callback function
This is simply when an arguments is passed as a function call in another function
.
with function expression
Reusable function
Array method runs as function
These are some array method like map, reduce, filter, slice ... are use as a function.
const number = [10, 20, 30, 40, 50];
//adding 100 to each value in number
const result = number.map(
(num) => num += 100
)
console.log(number); // [10, 20, 30, 40, 50]
console.log(result); // [110, 120, 130, 140, 150]
Review my article on all JavaScript method; array methods...
Click now 👆
Arguments in function call
It's when many argument are pass to a function along with a seperator like ,
;
:
-
_
using arguments[i]
; this simply means array of argument from 0 to any positive number.
It have a similarity in rest parameters. To get the total number of arguments passed use the keyword arguments.length
Rest parameters
This is when a function call many parameter with it parenthesis.
Nested function
Simply refer to as function in a function.
function divide(x) {
function value(y) {
return x / y;
}
return value;
}
console.log(divide(10)(5)); //2
With two parameter
It also form a closure, meaning the inner function
(second function) can only be accessed with in the outer function
and can make use of the arguments and variables of the outer function
(first function) while outer function
can not access variables or define function inside a inner function
.
Function closure
These are inner function
in a outer function
.
Without parameter
Function Curry
This is a sequence of function
that runs each containing a single parameter and then return many argument
. It's function
that return other function
with single parameter each.
Function Composition
This is applying more than one function to a function call.
It's shows similarities to mathematical derivations in function.
Function Decorator
This is a function
that takes one function
as an argument and return another function
with variation of argument of the function
as an argument .
This is refers to as a design pattern, that wraps function in another function.
It can also be use in Class decorator and Class member decorators, it's deep in learning and widely used in TypeScript.
When use in JavaScript it needs some tools like Babel and TypeScript compiler.
unary function
Multiple nested function
A function with many inner function.
The article of method in JavaScript is super awesome Loading...