Enough JavaScript to get you Started : #11 Functions

Adarsh Pandya - Jan 17 '21 - - Dev Community

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

. . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player