07/11/2023

Functions in JavaScript Tutorials Updated 2024

Functions in JavaScript are the same as in any other programming language. In this article, we are going to discuss functions in depth in JavaScript. Before you study JavaScript you need HTML and CSS the reason behind JavaScript is one of the three(HTML, CSS, Javascript) languages that every web designer or developer must learn.

What is a Function in Javascript:


A function is a block of code which can be reused anywhere in the program. The main benefit of writing a function is that we don’t need to write the same block of code again and again. Also, functions give us the modular approach of programming where we can break a large line of code program into small modules. Even though JavaScript itself provide modular programming we have many inbuilt functions which are written once in JavaScript and we can use them anywhere in the program. Being a web designer these 6 Facts You Should Know About Web Design.

Table of Content


  • What is a Function in Javascript
  • Javascript details image 
  • Defining a Function in Javascript
  • The syntax of Functions in Javascript
  • Example of a Function in Javascript
  • Explanations of Functions in Javascript
  • Parameters of a Function in Javascript
  • Calling of a Function in Javascript
  • Return Statement in Javascript


Suggestions: Before reading this article about functions in JavaScript, you have to know about Conditional Statements in JavaScript(IF ELSE SWITCH). below is some example of predefined javascript functions.

For example: alert(), getElementbyId(), write() etc. Here we can write our functions too.

functions tutorials in javascript with diagram and list

Defining a Function in Javascript:


The most common way to define a function in JavaScript is to use the function keyword before the function name, The parameter list can be empty or can contain a list of parameters and a block of code of the function is written inside the curly braces.

Syntax of a Function in Javascript:


<script type="text/javascript">
        function function-name(parameters)
      {
         Block of code;
      }
  </script>

Example of a Function in Javascript:


<script type="text/javascript">
      function WelcometoPWB()
      {
         alert("Welcome to Programming With Basics");
      }
</script>

Calling of a Function in Javascript:


Calling means invoking or using a function somewhere in the JavaScript code. A function is called simply by writing the name of that function if there are some parameters then pass those parameters.

Example:

<html>
   <head>
 
      <script type="text/javascript">
         function WelcomeToPWB()
         {
            alert ("Welcome To Programming With Basics!");
         }
      </script>     
   </head>
   <body>
      <p>Click Here </p>     
      <form>
         <input type="button" onclick="WelcomeToPWB()" value="Welcome To PWB">
      </form>       
   </body>
</html>

Parameters of Function in Javascript:


In the Early Examples, we use functions without parameters, but as we said earlier we can pass parameters to a function. These parameters are to be used inside the function and on the basis of the values of these parameters some manipulation inside a function can be done. A function can take more than one parameter separated by a comma.

Example:

<html>
   <head> 
      <script type="text/javascript">
         function sum(num1, num2)
         {
         var sum=num1+num2;
            document.write ("Sum is" + "  " + sum);
         }
      </script>     
   </head>
   <body>
      <form>
         <input type="button" onclick="sum(700, 7)" value="calculate Sum">
      </form>
   </body>
</html>

Return Statement:


JavaScript Function can also have a return statement, But this is optional. If you want a value to return after the function execution you can Write a return statement at the end of the function in the previous example you want to return the sum of two numbers a return statement can be used.

Example :

<html>
   <head>
      <script type="text/javascript">
         function sum(num1, num2)
         {
            var result
             result= num1 + num2
            return result
         }
       
         function NewFunction()
         {
            var total;
            total = sum(700,7);
            document.write("Sum Returned by the called function is" + "  " + total)
         }
      </script>     
   </head> 
   <body>     
      <form>
         <input type="button" onclick="NewFunction()" value="Click Here">
      </form> 
  </body>
</html>

Author:


This in-depth tutorial on Functions in Javascript is written by Suman Yadav. Submit your article and be a member of our Programming With Basics | A Programming Solutions Blog Family.
Previous Post
Next Post

post written by:

Hi, I’m Ghanendra Yadav, SEO Expert, Professional Blogger, Programmer, and UI Developer. Get a Solution of More Than 500+ Programming Problems, and Practice All Programs in C, C++, and Java Languages. Get a Competitive Website Solution also Ie. Hackerrank Solutions and Geeksforgeeks Solutions. If You Are Interested to Learn a C Programming Language and You Don't Have Experience in Any Programming, You Should Start with a C Programming Language, Read: List of Format Specifiers in C.
Follow Me

1 comment:



  1. best blog time just went on reading the article please publish more article

    <a href="https://www.catamerica.com/application-development/>Web Application Development Company </a>

    ReplyDelete