JavaScript Functions
A JavaScript function declaration defines a named function using the
functionkeyword.
This is the most common way to create a function.
A declared function can be called from anywhere in the same scope, even from a line above it.
Example
javascript
function double(number) {
return number * 2;
}
console.log(double(8));In this example, double is a function declaration.
The output is 16.
A function declaration starts with the word function, followed by a name.
It is a statement, so it does not need a semicolon at the end.
The name is used to call the function later.
Syntax
javascript
function name(parameters) {
// code to run
return value;
}The parameters and the return line are both optional.
A function declaration is moved to the top of its scope before the code runs.
This means you can call it before the line where it is written.
Example
javascript
console.log(square(4));
function square(n) {
return n * n;
}This works and prints 16.
Function expressions do not behave this way, which is covered in the next lesson.
A declaration does not need any parameters.
Example
javascript
function showDate() {
return "Today is a good day";
}
console.log(showDate());The brackets are still required, both when defining and when calling.
Separate parameters with commas.
Example
javascript
function fullName(first, last) {
return first + " " + last;
}
console.log(fullName("Ada", "Lovelace"));Here, two values are passed in and one string is returned.
If you declare two functions with the same name, the second one replaces the first.
This is a common source of bugs in long files.
Example
javascript
function greet() {
return "First";
}
function greet() {
return "Second";
}
console.log(greet());The output is Second, because the later declaration wins.
Declaring a function inside an if block behaves differently across browsers.
It is safer to declare functions at the top level of a scope.
Example
javascript
function checkAge(age) {
if (age >= 18) {
return "Adult";
}
return "Minor";
}
console.log(checkAge(20));Here, the function is declared once and the branch happens inside it.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Function Declarations</title>
</head>
<body>
<h1>JavaScript Function Declarations</h1>
<p id="result"></p>
<script>
function fullName(first, last) {
return first + " " + last;
}
document.getElementById("result").innerHTML = fullName("Ada", "Lovelace");
</script>
</body>
</html>Run the above example in the Try It Editor.
Try adding a middle name:
Add a third parameter and include it in the returned string.
function keyword and has a name.A function declaration is the standard way to define a named function in JavaScript.
Because declarations are hoisted, the order of definitions in a file matters less.
Understanding declarations helps you organise your code and avoid name clashes.