Understanding JavaScript Functions
Tags: javascript, beginners, webdev
Published: 2019-01-19 23:14:50

---
title: Understanding JavaScript Functions
published: true
description: 
tags: #JavaScript #newbies #webdev
---
This post is originally published to [my blog](http://frugencefidel.com/blog/understanding-javascript-functions).


## What is the function

Function is the group of statements used to perform certain task. Functions are very useful when perform a repeated task.

For example, we want to output certain song lyrics.

```js
// Declare functions
function verse1() {
  console.log('First verse goes here');
}

function verse2() {
  console.log('Second verse goes here');
}

function chorus() {
  console.log('Chorus goes here');
}

// Call them
// Use this pattern functionName()
verse1(); // First verse goes here
chorus(); // Chorus goes here
verse2(); // Second verse goes here
chorus(); // Chorus goes here
```

As you can see, function chorus can be repeated as many as you want.

## Defining function

Function can be defined in the following ways, namely Function Declaration and Function Expression

```js
// Function Declaration
function verse1() {
  console.log('First verse goes here');
}
verse1(); // First verse goes here

// Function Expression
let chorus = function() {
  console.log('Chorus goes here');
};
chorus(); // Chorus goes here
```

## Returning value

Here is how you can output result from function

```js
let chorus = function() {
  return 'Chorus goes here';
};
console.log(chorus()); // Chorus goes here

function sum() {
  return 1 + 1;
}
console.log(sum()); // 2
```

## Function scope

If you declare variable inside the function, it can not be leak outside of that function. But function can access outside variables(global variables).

```js
const amOut = 'Coming from outside';

function testScope() {
  const amIn = 'Coming from inside';

  console.log(amOut);
  console.log(amIn);
}

console.log(testScope()); // Coming from outside, Coming from inside
console.log(amIn); // amIn is not defined
```

## Parameters vs Arguments

Parameters are used when defining a function while Arguments are used when calling a function. On my side, Arguments are the values of parameters, while Parameters are variables of arguments. Both helps function to take inputs.

```js
// 'a' and 'b' are paremeters
function sum(a, b) {
  return a + b;
}

// 5 and 7 are arguments
console.log(sum(5, 7));
```

## Default Function Arguments

Default Function Arguments are used when arguments are undefined.

```js
function sum(a = 5, b = 7) {
  return a + b;
}

// If all arguments are undefined, then pass nothing
console.log(sum()); // 12

// If all arguments are not undefined
console.log(sum(6, undefined)); // 13
```

## Rest Function Parameters

Rest parameters help to pass arguments as many as you want, no matter how function is defined. Rest parameters collect arguments into array.

```js
// Without rest paremeters
function sum(a, b) {
  return a + b;
}

console.log(sum(5, 7, 6, 8)); // 12
console.log(sum()); // NaN

// With rest paremeters
function sum(...nums) {
  console.log(nums); // [5, 7, 6, 8]
  let total = 0;
  for (num of nums) {
    total += num;
  }
  return total;
}

console.log(sum(5, 7, 6, 8)); // 26
console.log(sum()); // 0
console.log(sum(5)); // 5
console.log(sum(5, 7)); // 12
```

## High order vs callback function

High order function is the function that take other function as parameter while Callback function is the function that passed into other function as parameter.

```js
function callback() {
  console.log('Coming from callback');
}

function highOrder(func) {
  console.log('Waiting for callback');
  func();
  console.log('Callback is called');
}

highOrder(callback);

// Waiting for callback
// Coming from callback
// Callback is called
```

## Anonymous function

Anonymous function is the function with no name.

```js
const anoyms = function() {
  console.log('I am Anonymous function');
};

setInterval(anoyms, 2000);
```

## Arrow functions

Arrow functions are introduced in ES6, they have shorter syntax compared to Expression functions. Arrow functions are always anonymous and non-binding 'this'.

```js
// Expression function
const sum = function(a, b) {
  return a + b;
};
console.log(sum(5, 7)); // 12

// In Arrow function
const sum1 = (a, b) => {
  return a + b;
};
console.log(sum1(5, 7)); // 12

// In Arrow function(Implicity return)
const sum2 = (a, b) => a + b;
console.log(sum2(5, 7)); // 12
```