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
Top comments (4)
Hey @frugencefidel , Thank you for this cool demonstration.
I just noticed an error in your code in Default Function Arguments section.
The last expression should output 13 not 12
Thank you for your time. 💖
Thanks for that buddy. I will fix it soon
Thanks this was so helpful
You are welcome buddy