Fun with Functions : The JavaScript Way – Part 1

JavaScript as we all know is one of the most versatile yet most unknown language to developers. There a lot of functionality that is given to us by the mighty JavaScript. And it’s very easy for developers to over look the roads less traveled in JavaScript. Today I will show you one such road. The JavaScript functions. Functions being the bread and butter of JavaScript plays a huge role. Join me in this blog and let’s have some fun with functions.

1. Writing a Basic Normal Function

Let us start with a very basic normal function that takes two argument and gives us an output. The function is very straight forward. It takes two numbers, adds them up and returns us the result. And we are displaying the result in our console.

Just FYI : If you want to read more about consoles, check this out.


//1. Normal Function Declaration
function add(number1, number2) {
    return number1 + number2;
}
result = add(3,5);
console.log(result);


Now there is another way of creating function. Here we store the function in a variable or constant(since ES6) and then use that variable as our function name. See the code snippet below.

//2. Storing function in a constant/variable
const subtract = function (number1, number2) {
    return number1 - number2;
};
result = subtract(5,2);
console.log(result);

Here we have a const called subtract which points to a function that take two arguments, subtracts them and gives us back the result.

2. Writing an Arrow Function

ES6 introduced us with arrow function. These are functions that can take any number of arguments, it has a function body and these two are connected by an arrow symbol. i.e., () => {}

We will take different scenarios and see how to write arrow functions for each scenarios.

First is when the function takes one argument. In this case we write the function as below

let square = (number) => {
    let result = number * number;
    return result;
 }
 result = square(5);
 console.log(result);

Here in this example we are passing one argument, number inside ( and ). Here number is the function argument. Inside { and } is my function definition which creates a variable result and multiplies the two given number and then returns the number. It’s that simple. Now here is the fun part. If you have only one argument, one and only one, not zero, not two, not three, but only one argument then ( and ) can be removed. Also if the function definition also has only one line of code then {, } and the return keyword can be removed. See the code below

 const cube = number => number * number * number;
 result = cube(7);
 console.log(result);

Here in this example the number before the arrow( => ) is the argument, in this case 7, which is sent to the function. number * number * number is the function definition, which returns the cube of the number. See there is no return keyword, and that is not required when your function has only single line. It implicitly returns the result of the function definition.

If we have zero arguments then () is required. If we have more that one line of code then {} with return statement is required(assuming you want to return something). See the code below.

const noarg = () => {
     return 'This is a no argument functions';
 }

3. Writing a function using the Function Class

I bet you did not see that coming, did you? Do we have a function class to create a function.? As a mater of fact we do have a function class. It helps us create functions. See the below code snippet as well as the sample output.

let body = "return Math.PI * radius * radius";
let circle = new Function("radius", body);
result = circle(5);

console.log(circle);
console.log(typeof circle);
console.log(result);

Here we have a variable called the body which is essentially is the function’s body but in string format. All it does is finds the area of the circle and returns it. The next variable is the circle which creates a new instance of the Function class and passes the function argument and the function body. In turn it gets a function definition which can be used just like a normal function. Now the circle function is called with parameter 5 and we have a result ready for us. Isn’t that cool.

Is that all for functions? No there is not. This is just the beginning. We have lot more to cover and will do that in part 2 of this series.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: