Enough JavaScript to get you Started : #11 Functions

whoadarshpandya

Adarsh Pandya

Posted on January 17, 2021

Enough JavaScript to get you Started : #11 Functions

How to ruin your code (story) ? ☠

πŸ‘‰ As i said earlier , when i was beginning with programming i was so foolish to not to follow coding principles like DRY (don't repeat yourself).

πŸ‘‰ One definition was assigned to me , which was "write a program where have to do addition of 2 numbers 3 times"

πŸ‘‰ The code i wrote earlier :

var num1 = propmt("Enter no : ");
var num2 = propmt("Enter no : ");
var res = 0;
res = num1+num2;
console.log(res);
var num3 = propmt("Enter no : ");
var num4 = propmt("Enter no : ");
res = num3+num4;
console.log(res);
var num5 = propmt("Enter no : ");
var num6 = propmt("Enter no : ");
res = num5+num6;
console.log(res);
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ This does make sense as a beginner , but when you think in terms of performance optimization , speed and quality of code - this doesn't make any sense.

πŸ‘‰ After that i was introduced to concept known as Function

Functions :

πŸ‘‰ According to internet , Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedureβ€”a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.

πŸ‘‰ To put it more simply and making it clear we'll go to our previous definition of 3 times of addition. so what we can say is that a perfect function is a mechanism to reduce that 3 times repeating code into simple block of code which can work for 3 or 30 or even 300 times depending on logic inside it. function simply means act of writing a reusable code.

Syntax of function

πŸ‘‰ Making a function can be defined in three steps

  1. Function Definition : telling your compiler that there's a function in our program.

  2. Function Body : Block of code to be executed when function gets called.

  3. Function Call : Calling a function simply tells your compiler that execute the code written in function body in respective context.

How does that looks like?

Artboard – 9.png

πŸ‘‰ functions takes parameters as input process it in function body and returns output.

πŸ‘‰ Parameters simply means input values which function is expecting for further process.

πŸ‘‰ Arguments means actual value passed to the respective parameter

πŸ‘‰ Example

// sum is name of function
// num1 and num2 are params
function sum(num1,num2){
    // function body
   var res = num1+num2;
   return res;
}

//2 and 5 are actual arguments
// function call ();
sum(2,5);
// outputs 7
Enter fullscreen mode Exit fullscreen mode

Rules

πŸ‘‰ Name of function should be unique

πŸ‘‰ Function should be defined somewhere in program before calling it

πŸ‘‰ Function may or may not take parameters

πŸ‘‰ Function may or may not return value

πŸ‘‰ Function can take 0 to n number of parameters depending on need

πŸ‘‰ Function can be called multiple times during execution

πŸ‘‰ Example of function without params and return statements

function greet(){
      console.log("Good Morning");
}

// can be called n number of times
greet();
greet();
greet();
Enter fullscreen mode Exit fullscreen mode

Let's make it more optimized 😎

πŸ‘‰ We'll take our addition program and turn it into a super optimized code

πŸ‘‰ in app.js

function sum()
{
      var num1 = +prompt("Enter no : ");
      var num2 = +prompt("Enter no : ");
      return num1+num2;
}

//calls function 3 times
for(var i=0;i<3;i++) {
      sum();
}
Enter fullscreen mode Exit fullscreen mode

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to thriving developer community :)

Keep Coding ❀

Hey , Let' ConnectπŸ‘‹

Twitter / Github

πŸ’– πŸ’ͺ πŸ™… 🚩
whoadarshpandya
Adarsh Pandya

Posted on January 17, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related