Introduction
This article explains JavaScript function in detail and followed the previous JavaScript article Learn JavaScript__Part1. Therefore if you are not familiar with JS basics, you may check the mentioned articles.
What are Functions in JavaScript?
Functions are containers that hold reusable code and perform a particular task. Not just JavaScript but almost all programming languages have a concept of functions and every developer must deal with that while coding.
Functions are independent pieces of code and manage the large code. Before moving on how it performs a task, let's see how we can create a function.
In javaScript the function keyword is used to declare a function, to identify a function it should have a name.
Here is the syntax for function declaration
function name(){
YOUR_CODE
}
Here is the example, the function "sayHi" can be created using a function keyword followed by "sayHi" [function name] and a set of parentheses, the function code will be written inside the curly braces. Whenever the function is called, it performs whatever instruction is written inside it, here I created this function that whenever it is called it should print I like JavaScript.
function sayHi(){
console.log("I like JavaScript")
}
sayHi();
// I like JavaScript
Here is another function example
function myFunction(){
console.log("Hello world");
let c = 3 + 5;
console.log(c);
}
myFunction();
/*
Hello world
8
*/
JavaScript functions can be used as reusable code. In below example, I don't need to type the code every time I need it, I can just call the function.
function myFunction(){
console.log("Hello world");
let c = 3 + 5;
console.log(c);
}
myFunction();
myFunction();
/*
Hello world
8
Hello world
8
*/
Functions also accept parameters - parameters are the symbolic name for "data" that goes into a function. A function can have one or more parameters.
In the below example, the function has a parameter called num, num accepts a value and performs the function task based on that value. The parameter value will be initialized while calling the function.
function myFunction(num){
console.log(num * num)
}
myFunction(3);
myFunction(10);
/* 9
100
*/
You don't need to console.log in functions, the " return " is used to return the function statements.
function myFunction(a, b){
return a + b;
}
console.log(myFunction(3, 5));
// 8
What are the arrow functions?
ES6 introduced more cleaner and proper method for declaring function, let's compare these two functions.
// Normal function
const square = function(number){
return number * number;
}
//Arrow function
const square = number=> number * number;
I write the function called square in an arrow function method. To convert a JavaScript function to an arrow function method, you need to remove the function keyword and after the parenthesis we need a (=>), if there is no parameters for the function, just add an empty parenthesis.
If the return is just a single line, you can remove the return and curly braces.
You can read the arrow function as " number goes to number times number".
Conclusion
That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.
Feel free to contact me on Twitter
Top comments (3)
Thanks for your comment, I just edited the article and added the arrow functions concept too :)
Talk about Higher Order function in Javascript
Thank you, Yes it worths but that is the ES6 concept and might confuse some beginners.