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.
Table of Contents
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; } |
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.
Leave a Reply