In the previous tutorial, we introduced and saw some examples of how to use functions in JavaScript. Now, we'll learn more about JavaScript functions and try to make the code writing more efficient.
Before that, I'll tell you, in this tutorial, we're just learning the basics of functions with some examples that we use often.
Refactoring
Refactoring is a process to change the code to make it more "good" without changing the functionality.
Why refactoring?
The reason why we use refactoring is as this :
- Readability - Because a 'good' program is a program that is easy to read. Not only for the person who made it, but also for the other people who are on the team.
- DRY (Do not Repeat Yourself) - No need to rewrite the code of a program.
- Testability - Code writing that will make it easier when testing.
- Performance - Code writing that upgradable performance.
- Maintainability - Easily managed and developed.
In the previous tutorial, we had an example of a JavaScript function to get a total sum. We'll use that and make a simple example of how to refactor the code.
This is an example:
function myFunction(a, b) {
let total;
total = a + b;
return total;
}
alert(myFunction(12, 10));This function will return to value 22. If you see that, actually, we can use a more efficient way. How to?
Just remove this :
let total;and this :
total = a + b;from the function body, then places the "a + b" in the return total:
return total = a + b;Now the code is more efficient than before:
function myFunction(a, b) {
return total = a + b;
}
alert(myFunction(12, 10));Let's try the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Function</title>
</head>
<body>
<script>
function myFunction(a, b) {
return total = a + b;
}
alert(myFunction(12, 10));
</script>
</body>
</html>The function is still running well and keeps producing the same value as before :
The example above can be refactored again:
function myFunction(a, b) {
return a + b;
}
alert(myFunction(1200, 300));Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Function</title>
</head>
<body>
<script>
function myFunction(a, b) {
return a + b;
}
alert(myFunction(1200, 300));
</script>
</body>
</html>Same as before, the function is still running well :
That's the basis of refactoring a function in JavaScript.
Recursive
The code above will produce an error like this:
It means too many recursive function calls.
For another example, I want to do a countdown by a recursive function.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Function</title>
</head>
<body>
<script>
function countdown(n) {
console.log(n);
return countdown(n-1);
}
countdown(10);
</script>
</body>
</html>The countdown is continuously called until it reaches the maximum calling limit :
If we want to stop the function, then we need to add a base case :
if( n === 0 ) {
return;
}With this, the countdown will stop when the "n" is reached or the same as 0 (zero).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Function</title>
</head>
<body>
<script>
function countdown(n) {
if (n === 0) {
return;
}
console.log(n);
return countdown(n - 1);
}
countdown(10);
</script>
</body>
</html>Now, recursion has stopped :
All of the loopings can be made into a recursion, but recursion can't be made into a loop.
Here's a looping example:
function countdown(n) {
for (var i = n; i >= 1; i--) {
console.log(i);
}
}
countdown(10);That's an example of recursion. For implementing recursive, you can see the implementation below :
- Replacing the looping
- Fibonacci
- Find the structure ofthe data list and tree
- Programming languages that do not have a looping construct like Haskell, Prolog, Erlang, etc
Overall, that's just basic; you can find and try the full source code of these examples on 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!