Function js JavaScript complete principles and advance

Function js JavaScript complete principles and advance

Ease in and understanding of function js

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 {}.

  1. Function can access a variable outside it scope {} and also modify it(make changes on it).

  2. Variable declared inside a function or condition statement can not be accessed outside it scope {}

  3. 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.

Image description

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.

Image description

Callback function

This is simply when an arguments is passed as a function call in another function.

Image description

with function expression

Image description

Reusable function

Image description

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

Image description

Rest parameters

This is when a function call many parameter with it parenthesis.

Image description

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

Image description

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.

Image description

Without parameter

Image description

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.

Image description

Function Composition

This is applying more than one function to a function call.

It's shows similarities to mathematical derivations in function.

Image description

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.

Image description

unary function

Image description

Multiple nested function

A function with many inner function.

Image description

The article of method in JavaScript is super awesome Loading...