“Functions are the very best part of JavaScript. It's where most of the power and the beauty of this language is.” - Douglas Crockford.
A JavaScript function is a subprogram/subroutine that can be called in other parts of the program. In other programming languages, we know a method, class, constructor, and module. In JavaScript, we can do all that just using a function.
Here's how I'll try to show you how to use the function in JavaScript.
Why do we need to use a function?
Before we learn more about JavaScript functions, we must know a few reasons why we should use a function.
It is because the JavaScript function is :
- Reusability (DRY: Do not Repeat Yourself). It means we don't need to rewrite the code of a program. With a function, we only need to use one block of a program that can be used repeatedly.
- Decomposition / Abstraction. It means to hide the complexity of the program that we write.
- Modularity. When we hide the complexity by changing the program to subprograms or modules, that can help us find an error.
The 'function' is divided into two categories. Built-in function and User-defined function.
A built-in function is a function made by JavaScript, like:
- alert()
- confirm()
- prompt()
- and etc.
Built-in function - string
It is an example Built-in function in JavaScript related to the string.
- charAt(), slice(), split(), toString(), toLowerCase(), toUpperCase(), and etc.
There are so many functions in JavaScript that you can use. I will show you one of the uses of an example built-in function that I have mentioned above.
Use charAt() to know what character is in a string:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Function</title>
</head>
<body>
<script>
let name = "Ridwan Fadilah";
console.log(name.charAt(5));
</script>
</body>
</html>It is used to determine what the fifth character is from the string we have.
The index starts from 0 (zero). Then the function above will produce "n" as the fifth character:
Built-in function - Math
It is an example Built-in function in JavaScript related to math :
- sin(), cos(), tan(), random(), round(), floor(), ceil(), log(), and etc.
Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Function</title>
</head>
<body>
<script>
let num = Math.random();
console.log(num);
</script>
</body>
</html>It will produce random numbers from 0 - 1 (zero to one) like this:
That's a basic example of a built-in function. Next, we'll introduce the user-defined function.
User-defined function
A user-defined function is a function created by the user. Before we learned, let's know some of the following about this function:
- The function must contain the "function" keyword
- We can add the name of the function (optional)
- In this function, we can add a parameter/argument
- Function body placed at { }. The body contains a set statements
- The function can return a value or not
To create a user-defined function are two ways. First, using the function declaration or using the function expression.
That's some of the following about how to create a function by ourselves.
Now, let's start with a function declaration.
Function Declaration
I'll make a program that uses a function declaration. For example, I want to create a program that calculates the sum of two numbers. The function will have a "function" keyword, a function name, a parameter, a variable in the function body, and return a value from calculating the sum of numbers.
It's the structure of the function:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Function</title>
</head>
<body>
<script>
function myFunction(a, b) {
let total;
total = a + b;
return total;
}
alert(myFunction(12, 10));
</script>
</body>
</html>The browser will show a total of the sum from calculating the number in a pop-up window like this:
Functions can be called repeatedly in one program.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Function</title>
</head>
<body>
<script>
function myFunction(a, b) {
let total;
total = a + b;
return total;
}
alert(myFunction(12, 10));
alert(myFunction(30, 20));
alert(myFunction(50, 50));
</script>
</body>
</html>The browser will display three popups one by one:
Function Expression
Not much different from the function declaration, the difference are function expression is placed in a variable.
For example, I create a variable with a name like the function name that we used before, contains a "function" keyword, and returns a value.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Function</title>
</head>
<body>
<script>
let myFunction = function (a, b) {
let total;
total = a + b;
return total;
}
alert(myFunction(1200, 300));
</script>
</body>
</html>result:
That's just a basic tutorial to create and run a JavaScript function. I will show you more examples of the JavaScript function as soon as possible.
You can get the full source code from our GitHub.
That's just the basics. If you need more deep learning about HTML, CSS, JavaScript, or related, you can take the following cheap course:
- HTML & HTML5 For Beginners (A Practical Guide)
- Web - HTML
- Learn HTML, CSS, JAVASCRIPT
- JavaScript:
- Learn JavaScript Fundamentals
- Learning JavaScript Shell Scripting
Thanks for reading this post!