DEV Community

Cover image for Function js JavaScript complete guide
Edeke Emmanuel
Edeke Emmanuel

Posted on • Updated on

Function js JavaScript complete guide

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
Enter fullscreen mode Exit fullscreen mode

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);
})();
Enter fullscreen mode Exit fullscreen mode

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');
}) ();
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

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.

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'));
Enter fullscreen mode Exit fullscreen mode

Equivalent in function call

Simple description is...

const clothVendor = function sharonWares(rate) {
return ...;
}

clothVendor() == sharonWares() == arguments.callee()
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

There syntax are always short in expression and does not have its own thisargumentssuper, 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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Top comments (0)