Understanding JavaScript Functions

This post is originally published to my blog.

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.

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

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

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

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.

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

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.

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

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.

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

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

Comments

[Budi Salah 🐋]

Hey @frugencefidel , Thank you for this cool demonstration.
I just noticed an error in your code in Default Function Arguments section.

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)); // 12

The last expression should output 13 not 12

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

Thank you for your time. 💖

[Frugence Fidel]

Thanks for that buddy. I will fix it soon

[anasidrissi]

Thanks this was so helpful

[Frugence Fidel]

You are welcome buddy