DEV Community

Frugence Fidel
Frugence Fidel

Posted on

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

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

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

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

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

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

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

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

Anonymous function

Anonymous function is the function with no name.

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

setInterval(anoyms, 2000);
Enter fullscreen mode Exit fullscreen mode

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

Discussion (5)

Collapse
budisalah profile image
Budi Salah πŸ‹ • Edited

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

The last expression should output 13 not 12

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

Thank you for your time. πŸ’–

Collapse
frugencefidel profile image
Frugence Fidel Author

Thanks for that buddy. I will fix it soon

Collapse
anasidrissi profile image
anasidrissi

Thanks this was so helpful

Collapse
dev_sky profile image
Sky

Great and simple read , especially for me since I tend to forget easily, these articles help lodge it into my brain more lol , thanks.

Collapse
frugencefidel profile image
Frugence Fidel Author

You are welcome buddy