Function js JavaScript complete guide
Tags: webdev, javascript, beginners, programming
Published: 2023-04-17 11:56:43

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

<u>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 be executed or run code without any expected error.</u>

### 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`;
}
console.log(admin('John'));
```

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
```