• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Understanding Javascript Function in 5 minutes (Definitive Guides)

Understanding Javascript Function in 5 minutes (Definitive Guides)

By Sigit Prasetya Nugroho ∙ July 5, 2019 ∙ Javascript ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

Function is a block code that aims to perform a specific task in programming. If your application is quite complex, the function help the developer to parse and rearrange the formulated code. So, the presence of function in programming is speeding up the build of the application. Create the Javascript apps, you always use the function. Let’s learn Javascript Function together.

If you are beginners, may confuse how to use function in the right way. But don’t panic, this article will help you to understand how to create and how to use Javascript function.

Tutorial Javascript Function Complete Reference

Table of Contents

  • 1 What is a Function?
  • 2 How to create a Javascript function
    • 2.1 1. General Function
    • 2.2 2. Anonymous function
    • 2.3 3. Arrow function
  • 3 Create a function with parameters
  • 4 How to running the Javascript Functions
  • 5 Return values in Javascript Function
  • 6 Conclusion

What is a Function?

The Javascript function is a block code that can be reused both in internal or external file code. A function in Javascript is an object.

The function is the basis of class. Javascript class has many functions. I will not discuss “Class” in this post, we will focus on Javascript Function.

The purpose of function in build Application

  • Decipher complicated codes into simpler.
  • Prevent the duplicate code in the application.
  • Easy to track the error code

How to create a Javascript function

Below is the 3 The most frequently ways to create the Javascript function.

1. General Function

This method is most often used (I always use this method)

1
2
3
function nameFunc(){
// code to be executed
}

2. Anonymous function

Anonymous function will located in a variable. Because of Javascript Function is an object, then it can be declared in the variable.

1
2
3
var functionName = function(){
// code to be executed
}

3. Arrow function

Declare a new function with an arrow sign

1
2
3
var nameFunc = () =>{
// code to be executed
}

This method used in the ES6 Standard (a standardized scripting language (Javascript) created by the European Computer Manufacturers Association (ECMA))

As beginners, You should focus on how to create a function with the general method

Create a function with parameters

The parameter is one or a set of variables (Please check out the article: What is a variable in Javascript here) that used to capture the value and then processed in the function scope.

example:

1
2
3
function Add(a,b){
    console.log("result a + b = "+a+b)
}

How to running the Javascript Functions

We can call the function directly by writing the function name.

In addition we can call the function through event attribute in HTML
Example:

1
2
3
4
function printconsole(str){
    console.log(str)
}
printconsole("hello world")

Return values in Javascript Function

Besides, to execute the code, a function can return the value too.

Example:

1
2
3
4
function add(a,b){
    return a+b;
}
console.log(add(5,6)) // result 11

Until here, the JavaScript function tutorial has been completed, as a bonus article, I will give an example of how to create a simple CRUD using the Javascript function (I have another article about How to create CRUD with PHP and JQuery plus bonus source code).

HTML

1
2
3
4
5
6
7
8
9
10
<h2>To-do List App to understand Javascript Function</h2>
    <div class="form-group">
        <label>Description</label>
        <div class="form-control">
            <input type="text" id="text-description"><button id="btn-add">Add</button>
        </div>
    </div>
 
    <h3>To-Do List</h3>
    <ul id="todo-list"></ul>

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var content = [];
        document.getElementById("btn-add").addEventListener('click',function(){
            create();
        });
 
 
        function create(){
            let data = document.getElementById("text-description").value
            content.push(data)
            read();
        }
        function read(){
 
            let todoList = '';
            for (let i = 0; i < content.length ; i++){
                let btnEdit = "<a href='#'  oclick='update("+i+")' id='btn-edit'>Edit</a>"
                let btnDel = "<a href='#'  oclick='del("+i+")' id='btn-delete'>Delete</a>"
                todoList += "<li>"+content[i]+" | "+btnEdit+" "+btnDel+"</li>";
            }
            document.getElementById("todo-list").innerHTML = todoList
            document.getElementById("text-description").value = ''
            document.getElementById("text-description").focus()
        }
        function update(i){
            let data = prompt("Update to-do list :")
            content[i] = data;
            read();
        }
        function del(i){
            content.splice(i,1)
            read()
        }

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.form-group{
            margin-top: 10px;
            margin-bottom: 10px
        }
        ul{
            list-style-type:upper-alpha;
        }
        ul li{
            padding: 10px;
 
        }
        ul li a{
            color:red;
        }

Complete Reference Javascript Function Crud Example

Conclusion

Function is a mandatory syntax that must be learned. Also, the time used to make the application more effective.

You should use the general method to create a function. In my opinion, this method is the easiest to read and understand

Thus my article about complete reference Javascript Function.

Another Javascript Related Post :

  • React-Table Not Updating or Refreshing Data, The Solution ?
  • How To Custom React Datepicker In Bootstrap
  • Tutorial Create Simple POS Using ReactJS And Laravel Lumen Part 1
  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com