{"id":51858,"date":"2019-03-18T11:46:29","date_gmt":"2019-03-18T06:16:29","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=51858"},"modified":"2019-08-05T11:10:28","modified_gmt":"2019-08-05T05:40:28","slug":"javascript-function","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/javascript-function\/","title":{"rendered":"JavaScript Functions – Concept to Ease your Web Development Journey"},"content":{"rendered":"

Functions are one of the major pillars of JavaScript.\u00a0Basically, a JavaScript function is a set of statements that performs some tasks or do some computation and then returns the result to the user.\u00a0<\/em>Today in this JavaScript tutorial we will cover the fundamentals of JavaScript Functions.<\/p>\n

We will understand what functions are, how to define and use them, and various other terminologies associated with them. Also, we will take a brief look at the function scope and learn a bit about JavaScript\u2019s built-in functions available to the programmers.<\/p>\n

Before starting we would recommend you to take a quick revision on JavaScript Loop Control<\/a>.\u00a0<\/strong><\/em><\/p>\n

\"JavaScript<\/a><\/p>\n

What are JavaScript Functions?<\/h2>\n

A JavaScript function is a procedure or a subprogram, i.e., a block of code that performs a certain task. It is a group of reusable code that you can use anywhere in the code. It helps you to divide a large program into small and manageable functions. With the help of functions, you don\u2019t need to write the same block of code repeatedly. This makes a program a lot more efficient and reduces the code length.<\/p>\n

We used some functions like prompt()<\/strong> and write()<\/strong> in our previous JavaScript Tutorials of this series. These are the built-in functions that JavaScript provides, and you will learn more about them later in this tutorial. For now, let\u2019s move onto the syntax of a JavaScript function.<\/p>\n

Function Definition<\/h3>\n

A function definition (also called a function statement or a function declaration) includes a function keyword, with its syntax as follows:<\/p>\n

function functionName(parameters)\r\n{\r\n  \/\/statements\r\n}<\/pre>\n
It is important to separate the parameters with commas.<\/p>\n
Return Statement<\/h3>\n
This is an optional JavaScript statement that returns a value from the function. Unless specified otherwise, a function returns undefined. We use the keyword return, followed by the statement or expression we want to return. This statement should be the last one in the block because it skips all code in the block written after that. We will make use of this statement in the section of Calling Function.<\/p>\n
The basic syntax of a return statement is as follows:<\/p>\n
return value;<\/pre>\n
Function Expressions<\/h3>\n
The function declaration above is syntactically a statement. We can also create a function using a function expression. These functions can be anonymous, i.e., they don\u2019t have any name. This is one of the features we learned about in our article on Introduction to JavaScript<\/a>.<\/strong><\/em> The syntax for these expressions is as follows:<\/p>\n
variable = function (parameters){ \/\/expression };<\/pre>\n
Calling Functions<\/h3>\n
A defined function doesn\u2019t execute automatically. A function definition only specifies what to do when we execute the function. The actual execution is possible with the help of function invocation or function call. Functions must be in their scope when called and when we are using function expressions in our code. This is because function declarations support hoisting, but function expressions don\u2019t.<\/p>\n
The syntax for function invocation is like this:<\/p>\n
functionName(arguments);<\/pre>\n
Like parameters, we separate arguments of a function call with the use of commas.<\/p>\n
We are now going to wrap up all we\u2019ve learned so far in two JavaScript programs, one with function declaration and the other with function expression.<\/p>\n
Using function declaration:<\/strong><\/p>\n
Code:<\/strong><\/p>\n
<html>\r\n  <body>\r\n\r\n    <script>\r\n      function saySomething(){ \/\/function definition\r\n        alert(\"Hello DataFlair!\"); \/\/create an alert in browser\r\n      }\r\n      document.write(\"Return Type: \" + saySomething()); \/\/calling function and returning type\r\n    <\/script>\r\n\r\n  <\/body>\r\n<\/html><\/pre>\n
Screenshot –<\/strong><\/p>\n
\"calling<\/a><\/p>\n
Output-<\/strong><\/p>\n
\"JS<\/a><\/p>\n
Using function expression:<\/strong><\/p>\n
Code:<\/strong><\/p>\n
<html>\r\n  <body>\r\n\r\n    <script>\r\n      var area = function(height, weight){ \/\/function expression\r\n        return height * weight; \/\/returning area of rectangle\r\n      }\r\n      document.write(\"DataFlair: Using functions<\/br>\");\r\n\r\n      document.write(\"Area of the rectangle is \" + area(4, 9)); \/\/calling function by passing parameters\r\n    <\/script>\r\n\r\n  <\/body>\r\n<\/html><\/pre>\n
Screenshot-<\/b><\/p>\n
\"using<\/a><\/p>\n
Output –<\/strong><\/p>\n
\"using<\/a><\/p>\n
Function Parameters and Arguments<\/h3>\n
When you begin programming, you often hear the terms: arguments and parameters. Many programmers get confused with these terms, but it is crucial that you understand what they are and how are they different from each other.<\/p>\n
Parameters<\/strong> are used inside the parenthesis in a function declaration. It takes whatever value the function arguments contain and work with them for the entirety of the function. The lifetime of parameters is only inside the function. You cannot access or modify them from outside the function. In a function definition, we can pass up to 255 parameters, separated by commas.<\/p>\n
On the other hand, arguments<\/strong> are the actual values that we pass to a function at the time of function call. The names of an argument or parameter can be the same or different, as per your convenience. But you need to make sure that the numbers of arguments and parameters for a function are the same.<\/p>\n
In the above program, height<\/strong> and weight<\/strong> are parameters, while 4<\/strong> and 9<\/strong> are the arguments. height<\/strong> and weight<\/strong> take on the value of 4<\/strong> and 9<\/strong> respectively in this case.<\/p>\n
Function Scope<\/h3>\n
A variable defined inside a function cannot be accessed outside it. But a function can access any variable defined as a global variable. When you define a function inside another function, we call that a nested function. This function is the child function of whichever function it is defined in (the parent function)<\/em>. A child function has access to all the variables defined in the parent function or which the parent has access to; vice-versa is not true.<\/p>\n
Didn’t you check DataFlair’s latest tutorial on JavaScript Variables<\/a>?<\/strong><\/em><\/p>\n
Too much theory? Get ready to understand exactly what I mean with the following code:<\/p>\n
<html>\r\n  <body>\r\n    <h3>DataFlair: Function Scope<\/h3>\r\n\r\n    <script>\r\n      var num1 = 2;\r\n      document.write(\"Value of number 1 is \" + num1 + \". (Global scope)<\/br>\");\r\n      function parentFunction(){ \/\/global function\r\n        var num2 = 4;\r\n        num1 = 8;\r\n        document.write(\"Value of number 1 is \" + num1 + \". (Inside global function)<\/br>\");\r\n        document.write(\"Value of number 2 is \" + num2 + \". (Inside parent function)<\/br>\");\r\n        childFunction(); \/\/child function called\r\n        document.write(\"Value of number 3 is \" + num3 + \". (Inside parent function)<\/br>\");\r\n\r\n        function childFunction(){ \/\/nested function\r\n          var num3 = 0;\r\n          document.write(\"Value of number 2 is \" + num2 + \". (Inside child function)<\/br>\");\r\n          document.write(\"Value of number 3 is \" + num3 + \". (Local scope)<\/br>\");\r\n        }\r\n      }\r\n      parentFunction(); \/\/parent function called\r\n    <\/script>\r\n\r\n  <\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
Screenshot –<\/b><\/p>\n
\"function<\/a><\/p>\n
Output-<\/strong><\/p>\n
\"function<\/a><\/p>\n
Now try the same code again; this time remove the comment from the write function above.<\/p>\n
Code:<\/strong><\/p>\n
<html>\r\n  <body>\r\n    <h3>DataFlair: Function Scope<\/h3>\r\n\r\n    <script>\r\n      var num1 = 2;\r\n      document.write(\"Value of number 1 is \" + num1 + \". (Global scope)<\/br>\");\r\n      function parentFunction(){ \/\/global function\r\n        var num2 = 4;\r\n        num1 = 8;\r\n        document.write(\"Value of number 1 is \" + num1 + \". (Inside global function)<\/br>\");\r\n        document.write(\"Value of number 2 is \" + num2 + \". (Inside parent function)<\/br>\");\r\n        childFunction(); \/\/child function called\r\n        \/\/document.write(\"Value of number 3 is \" + num3 + \". (Inside parent function)<\/br>\");\r\n\r\n        function childFunction(){ \/\/nested function\r\n          var num3 = 0;\r\n          document.write(\"Value of number 2 is \" + num2 + \". (Inside child function)<\/br>\");\r\n          document.write(\"Value of number 3 is \" + num3 + \". (Local scope)<\/br>\");\r\n        }\r\n      }\r\n      parentFunction(); \/\/parent function called\r\n    <\/script>\r\n\r\n  <\/body>\r\n<\/html><\/pre>\n
Screenshot –<\/b><\/p>\n
\"function<\/a><\/p>\n
Output-<\/strong><\/p>\n
\"function<\/a><\/p>\n
Note that in both cases, the browser displays the same output. The difference is that when you run your code the second time, you get an error. You wanted to print the value of num3<\/strong> at last, but that line is missing. This is because parentFunction<\/strong> tried to access a local variable of its child i.e. childFunction.<\/strong><\/p>\n
Types of JavaScript Functions<\/h2>\n
1. Recursive Functions<\/h3>\n
It is possible for a function to call itself directly or indirectly. A function that calls itself during its execution is a recursive function. This allows a function to repeat for multiple iterations, minimizing the code. The problem with these functions is that, if not written properly, they can cause infinite loops<\/strong> and other unexpected results.<\/p>\n
\"Recursive<\/a><\/p>\n
Let\u2019s understand these functions a little better with the help of a JavaScript code to find the factorial of a number. The flowchart below depicts the algorithm for calculating the factorial of a number.<\/p>\n
Do you know how to construct loops in JavaScript<\/a>?<\/strong><\/em><\/p>\n
Code:<\/strong><\/p>\n
<html>\r\n<body>\r\n  <h3>DataFlair: Recursive function<\/h3>\r\n\r\n    <script>\r\n      let fact = 1, num = 5; \/\/initializing variables\r\n      function calculateFactorial(number){ \/\/function definition\r\n        if(number == 0)\r\n          return 1; \/\/ 0! = 1\r\n        else\r\n          return number * calculateFactorial(number - 1); \/\/recursion: calling itself\r\n      }\r\n      document.write(\"The factorial of \" + num + \" is \" + calculateFactorial(num)); \/\/function called with an argument\r\n    <\/script>\r\n\r\n  <\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
Screenshot –<\/b><\/p>\n
\"JS<\/a><\/p>\n
Output –<\/strong><\/p>\n
\"JavaScript<\/a><\/p>\n
2. Arrow Functions<\/h3>\n
An arrow function, introduced with ECMAScript 2015, is a compact way to write JavaScript functions. They have shorter syntax than function expressions and doesn\u2019t work with this<\/strong> keyword. These functions are always anonymous i.e., they have no names. This is why we don\u2019t use them as methods, and the reason we cannot use them as constructors.<\/p>\n
These functions use the => arrow<\/strong> to declare a function rather than the function<\/strong> keyword.
\nLet\u2019s see with an example of how these functions reduce the code length by comparing it with a normal function.<\/p>\n
Code:<\/strong><\/p>\n
<html>\r\n  <body>\r\n\r\n    <script>\r\n      function hello(str){ \/\/function declaration\r\n        return \"Hello \" + str;\r\n      }\r\n      document.write(\"By a regular function:<\/br>\");\r\n      document.write(hello(\"DataFlair<\/br><\/br>\")); \/\/function call\r\n\r\n      var helloAgain = str => \"Hello \" + str; \/\/arrow function\r\n\r\n      document.write(\"By an arrow function:<\/br>\");\r\n      document.write(helloAgain(\"DataFlair\")); \/\/function call\r\n    <\/script>\r\n\r\n  <\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
Screenshot –<\/strong><\/p>\n
\"JavaScript<\/a><\/p>\n
Output-<\/strong><\/p>\n
\"JavaScript<\/a><\/p>\n
These functions are usually helpful in large-scale projects. Using these functions in the program helps programmers to optimize their code. Practice these functions as much as you can to gain mastery over them.<\/p>\n
All the functions we discussed above were the ones you defined. What if we don\u2019t want to do that? Is there a way to use predefined codes to save you time and money? The answer to that question is yes, with the help of JavaScript built-in methods. Methods are nothing, but functions associated with a JavaScript object.<\/a><\/strong><\/em><\/p>\n
3. Built-in Methods<\/h3>\n
JavaScript provides various built-in methods for programmers to use directly. The JavaScript interpreter understands these methods without you having to define them. You can call these methods anywhere in your program directly. It is not possible to know all the built-in methods in a single tutorial. You will learn their use as you code more in JavaScript. Some of the most common built-in functions of JavaScript are as follows:<\/p>\n