Different types of Functions in JavaScript
Tags: javascript, beginners
Published: 2018-11-03 12:22:14

---
title: Different types of Functions in JavaScript
published: true
description: A JavaScript function is a block of code designed to perform a particular task.
tags: #JavaScript, #Beginners, 
---

# Different types of Functions in JavaScript
![leaf](https://thepracticaldev.s3.amazonaws.com/i/ttlwr60fom463mm0vzcm.png)
Photo by [Markus Spiske](https://unsplash.com/photos/QVVXPNbjLrI?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/)


A JavaScript function is a block of code designed to perform a particular task.

## MDN Says:
*Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure — a set of statements that performs a task or calculates a value. To use a function, you must define it somewhere in the scope from which you wish to call it.*

A JavaScript function is executed when “something” invokes it (calls it).

### Example:
```javascript
function square(x) {
  return x * x;
}
square(10); // 100
```

### Basic Syntax:
```javascript
function validFunctionName(parameter) {
  return statement;
}
```

A function can have multiple parameters or no parameters at all. In the following example, bark does not list any parameter names, whereas power lists two:

`bark( )`
```javascript
function bark() {
  return "woof-woof";
}
bark(); //   woof-woof
```

`power( )`
```javascript
function power(base, exponent) {
  let result = 1;
  for(let count = 0; count < exponent; count++) {
    result *= base;
  }
  return result;
}
power(2, 10); // 1024
```

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

```javascript
var fullName = function(firstName, lastName) {
 return `${firstName} ${lastName}`;
}
fullName("Jamal", "Uddin"); // Jamal Uddin
```

### Arrow Function:
An Arrow Function Expression is a shorter syntax for writing function expressions. Arrow functions do not create their own value.

We can write the arrow function in multiple ways:

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

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

#### Second:
Omit the return keyword

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

#### Third:
If our function have no parameter
```javascript
const noise = () => console.log("Pling");
noise(); // Pling
```

##### or

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

#### Fourth:
If we have two or more parameter, you can must be used parenthesis
```javascript
const addAll = (x, y, z) => x + y + z;

addAll(10, 20, 30); // 60
```

#### Fifth:
We can use default value in our parameters
```javascript
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
```

JavaScript is extremely broad-minded about the number of arguments you pass to a function. If you pass too many, the extra ones are ignored. If you pass too few, the missing parameters get assigned the value undefined.

#### Return:
Remember, the return keyword can ONLY be used inside of a function. let's take a look at another example.
```javascript
function returnOnlyOnce(){
  return "Hello";
  return "Goodbye";
}
returnOnlyOnce(); // "Hello"
```

We see from this example that the return keyword can only be executed once in a function. Once it is executed, the function is complete and no other lines of code will be executed.

#### Function Shorthand methods:
Shorthand method definition can be used in a method declaration on object literals and ES6 classes. We can define them using a function name, followed by a list of parameters in a pair of parenthesis (para1, ..., paramN) and a pair of curly braces { ... } that delimits the body statements.

The following example uses shorthand method definition in an object literal:

```javascript
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(...)`.

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

Note: async/await is based on generators. Read more [here](https://tc39.github.io/ecmascript-asyncawait/).

#### Example:
```javascript
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.

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

### Source of truth:

 - [MDN JavaScript Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function)
 - [Eloquent JavaScript functions chapter](https://eloquentjavascript.net/03_functions.html)
 - [w3schools](https://www.w3schools.com/js/js_function_definition.asp)

*P.S: English is not my native language and this is my very first English article so if you have found any mistake please pardon me also hearts to encourage me to write more articles.*


Happy Programming! :)

## Who Am I?
This is [Md. Jamal Uddin](https://jaamaal.com/) working as a Software Developer based in Dhaka, Bangladesh. I love to learn new things and share them with others. Playing with cutting technologies is my hobby and working with legacy is my day job :). Connect me on [Twitter](https://twitter.com/jamal_uddin95) and [LinkedIn](https://www.linkedin.com/in/jamal-pb95/)