Enough JavaScript to get you Started : #11 Functions

#javascript #100daysofcode #webdev #beginners

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);

👉 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

Function Definition : telling your compiler that there's a function in our program.
Function Body : Block of code to be executed when function gets called.
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?

👉 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

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();

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();
}

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 ❤