JavaScript Functions

A function is a subprogram designed to perform a particular task. Functions are executed when they are called. This is known as invoking a function. Functions always return a value. In JavaScript, if no return value is specified, the function will return undefined. Functions are objects. A function can have multiple or no parameters at all.

Different type of functions in JavaScript

1. Function declaration | Basic Syntax

The function declaration function isEven(num) {...} create a variable isEventhat is hoisted to the top of the current scope. isEven variable holds the function object and isEven.num contains the function name: 'isEven'.

// function declaration
function isEven(num) {
  return num % 2 === 0;
}

2. Function Expression

A Function Expressions defines a named or anonymous function. An anonymous function is a function that has no name.

var fullName = function(firstName, lastName) {
 return `${firstName} ${lastName}`;
}
fullName("Abhay", "Jain"); // Abhay Jain

3. Arrow Function

First:

it just looks like a regular function expression but have arrow (=>) key.

const double = (value) => {
  return value * 2
}
double(10); // 20

Second:

Omit the return keyword

const double2 = value => value * 2;
double2(10); // 20

Third:

If our function have no parameter

const noise = () => console.log("Pling");
noise(); // Pling

or

const noise2 = _ => console.log("Pling");
noise2(); // Pling

Fourth:

If we have two or more parameter, you can must be used parenthesis

const addAll = (x, y, z) => x + y + z;
addAll(10, 20, 30); // 60

Fifth:

We can use default value in our parameters

const multiply = (a = 2, b = 3, c = 1) => a * b * c;
multiply(2, 2, 2); // 8
multiply(2, 2);    // 4
multiply(3);       // 9
multiply();        // 6

Function Shorthand methods:

Shorthand method definition can be used in a method declaration on object literals and ES6 classes. The following example uses shorthand method definition in an object literal:

const fruits = {  
  items: [],
  add(...items) {
    this.items.push(...items);
  },
  get(index) {
    return this.items[index];
  }
};
fruits.add('mango', 'banana', 'guava');  
fruits.get(1); // banana

add() and get() methods in fruits object are defined using short method definition. These methods are called as usual: fruits.add(...) and fruits.get(...).

4. Generator Function:

ES6 introduced a new way of working with functions and iterators in the form of Generators (or generator functions). A generator is a function that can stop midway and then continue from where it stopped. In short, a generator appears to be a function but it behaves like an iterator.

function * generatorFunction() { 
  yield 'Hello, ';
console.log('I will be printed after the pause');  
  yield 'World!';
}
const generatorObject = generatorFunction();
console.log(generatorObject.next().value);
console.log(generatorObject.next().value);
console.log(generatorObject.next().value);
// output should be following below.
// Hello, 
// I will be printed after the pause
// World!
// undefined

Function with: new Function

The Function constructor creates a new Function object.

var sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 6)); // 8