Introduction
If you been in programming for a while, you probably would know that functions are the important concept of any typical programming language.
And if are familiar with functional programming languages, like JavaScript,
then it is hard to argue with that statement that functions are the bread and butter of
functional programming languages.
In case if you are new to this programming worlds, then bare with throughout this article and in the end you might would get to know something interesting about functions and why it is important.
The concept of functions is fairly simple:
Breaking down large problems in pieces and wrapping them in a value to reduce repetition.
Sounds Bookish ?
Let me simplify it.
Say, you have a problem to find square of some numbers.
The typical approach would be:
let num;
num = 10;
console.log("Square of "+num+" is "+num*num);
num = 11;
console.log("Square of "+num+" is "+num*num);
num = 12;
console.log("Square of "+num+" is "+num*num);
num = 13;
console.log("Square of "+num+" is "+num*num);
num = 14;
console.log("Square of "+num+" is "+num*num);
num = 15;
console.log("Square of "+num+" is "+num*num);
num = 16;
console.log("Square of "+num+" is "+num*num);
num = 17;
console.log("Square of "+num+" is "+num*num);
Doesn't it seems weird ? Repetitive.
Let's see how functions would reduce this repetition.
function findSquare(num) {
console.log("Square of "+num+" is "+num*num);
}
findSquare(10); //Square of 10 is 100
findSquare(11); //Square of 11 is 121
findSquare(12); //Square of 12 is 144
findSquare(13); //Square of 13 is 169
findSquare(14); //Square of 14 is 196
findSquare(15); //Square of 15 is 225
findSquare(16); //Square of 16 is 256
findSquare(17); //Square of 17 is 286
findSquare(18); //Square of 18 is 324
How about that !
This is just a simple example to show you the power of functions, but this not enough.
In fact these days we have functional programming approach to solve a problem.
We'll discuss more about functional programming in future articles.
For now let's play with some basics, to help you to learn fundamental concepts.
Structure of a function:
To use a function:
- first you need to define a function
- then, call the function
In the above example:
Define a function
function findSquare(num) {
console.log("Square of "+num+" is "+num*num);
}
Call the function
findSquare(10);
Components of a function:
Typically a function has three components:
- function name
- parameters
- return values
function name is mandatory, whereas some function do have parameters and some functions don't. Same goes for return values, some function return values some functions don't.
// Without parameter, Without return value
function sayHello(){
console.log("I said hello");
}
sayHello(); // I said hello
//Without parameter, With return value
function greeting(){
return "Hello";
}
console.log(greeting()+ " World!"); // Hello world
//With parameter, Without return
function printDouble(num){
console.log("Double of "+num+" is "+num*2);
}
printDouble(2); // Double of 2 is 4
//with parameter, with return
function giveSquare(num) {
return num*num;
}
console.log(giveSquare(5)); // 25
Each variable created inside a function is only valid only inside that function.
It is called local scope.
Let me show you:
function printFive() {
const num = 5;
console.log(num); //5
}
console.log(num); //ReferenceError: num is not defined
I have written a detailed article on Scope in JavaScript. Check out here 👇
Before I go any further let me draw your attention to parameter and argument.
Sometimes people being confused between parameter and argument,
and treat them as same. But there is a thin line between them which you need to know,
to be a better developer.
Check out below image:
When we pass the value while calling the function, that value is refer as argument,
whereas when we accept the value in the function definition, that value is refer as parameter.
This is all the basics you need to know about function.
But when is comes to JavaScript, you can manipulate function in a different way than any other
functional programming language.
Let me show you:
All functional programming language can do this:
function makeTwice(n) {
return 2*n;
}
console.log(makeTwice(5));
But not all functional programming language can do this:
const makeTwice = function(n) {
return 2*n;
}
let giveMeTwice = makeTwice; //passing makeTwice to giveMeTwice
console.log(giveMeTwice(5));
In JavaScript we can even pass the function to variables like a typical value.
This feature has a several benefits in functional programming with JavaScript
which we'll discuss in future article.
Before I wrap things up, there are some topics which need to discuss.
Optional Argument:
Let me first show you an example:
function makeSquare(n) {
return n* n;
}
console.log(makeSquare(5, "hello", false)); //25
We might pass 3 arguments (5, "hello", false), but out function makeSquare only able to accept 1 parameter.
So you guessed it right, both "hello" and false are optional arguments.
The optional arguments looks like useless, but they are not at all.
Let me show you:
*Say you have a problem where you pass 2 arguments. If function accept two arguments them it give the result of their difference, but if the function accepts only 1 parameter then it result the -ve of that single number.
*
function minus(x, y) {
if (y === undefined)
return -x;
else
return x - y;
}
console.log(minus(10)); // → -10
console.log(minus(10, 5)); // → 5
You can even set the default value of optional parameter.
function multiply(x, y=1) {
return x*y; //here y is 1 by default
}
console.log(multiply(10)); // → 10
console.log(multiply(10, 5)); // 50
The Arguments Array
Like I told you earlier, functions in JavaScript are way advanced than any other.
One of it's cool feature is arguments array.
The arguments array is the default property of a function in JavaScript which
contains all the arguments passed to that function in the form of an array.
Let me show you:
function demo(a,b,c) {
console.log(a); // 10
console.log(b); // 20
console.log(c); // 30
console.log(arguments.length); // 3
console.log(arguments[0]); // 10
console.log(arguments[1]); // 20
console.log(arguments[2]); // 30
}
demo(10,20,30);
The arguments array still works, even if you don't pass anything in the function parameter.
Sounds weird ?
Check this out:
// removing a,b,c from parameter
function demo() {
console.log(arguments.length); // 3
console.log(arguments[0]); // 10
console.log(arguments[1]); // 20
console.log(arguments[2]); // 30
}
demo(10,20,30);
Conclusion:
With that being said, up till here we have covered all the basics you need to know about
functions in JavaScript. Now you are good to go and play with them on your own.
Cause this the only way you can learn even better.
But this is not at all. We still have lot to discuss about functions and some even cool features of them.
More on later articles. Till then keep learning.
Top comments (0)