- Home
- /
- Tutorials
- /
- JavaScript Tutorial
- /
- JavaScript Function Declarations
JavaScript Functions
JavaScript Function Declarations
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
Example
javascript
function double(number) {
return number * 2;
}
console.log(double(8));In this example, double is a function declaration.
The output is 16.
What is a Function Declaration?
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
Syntax
javascript
function name(parameters) {
// code to run
return value;
}The parameters and the return line are both optional.
Declarations are Hoisted
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
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 Function with No Parameters
A declaration does not need any parameters.
Example
Example
javascript
function showDate() {
return "Today is a good day";
}
console.log(showDate());The brackets are still required, both when defining and when calling.
A Function with Several Parameters
Separate parameters with commas.
Example
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.
Redeclaring a Function
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
Example
javascript
function greet() {
return "First";
}
function greet() {
return "Second";
}
console.log(greet());The output is Second, because the later declaration wins.
Declarations Inside Blocks
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
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
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>Try It Yourself
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.
Important Points
- A function declaration starts with the
functionkeyword and has a name. - It does not need a semicolon at the end.
- Declarations are hoisted, so they can be called before they appear.
- Declaring the same name twice means the later one wins.
- Declare functions at the top level of a scope rather than inside blocks.
Conclusion
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.
