DEV Community

Cover image for Enough JavaScript to get you Started : #11 Functions
Adarsh Pandya
Adarsh Pandya

Posted on

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;
var num3 = propmt("Enter no : ");
var num4 = propmt("Enter no : ");
res = num3+num4;
var num5 = propmt("Enter no : ");
var num6 = propmt("Enter no : ");
res = num5+num6;
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 ();
// outputs 7
Enter fullscreen mode Exit fullscreen mode


πŸ‘‰ 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
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++) {
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

Top comments (8)

xementor profile image

nice feature image

whoadarshpandya profile image
Adarsh Pandya

Thank you so much buddy, glad you liked it ...

stormkid2009 profile image
Anwar Ahmed

Hello, this statement in sum function
var res = num1+num2;
You forgot to return res
So sum(2,5) wont return anything

whoadarshpandya profile image
Adarsh Pandya

Corrected* ! Thanks ahmed :)

shrvnk profile image
Shravan Acharya

Nice one. What after this?

whoadarshpandya profile image
Adarsh Pandya

Object oriented JavaScript, which will help you guys in frontend interviews

realtoughcandy profile image

Enjoying your series - nice work.

whoadarshpandya profile image
Adarsh Pandya

Hey @realtoughcandy .io that's so nice of you😍 this is going to be the best thing ever happened during the series.

The best part is when you see someone commenting on your blog who's absolute inspiration for you and you grew up watching their videos on YouTube πŸ”₯

Thank you so much 😊