Skip to main content

JavaScript Functions

JavaScript Function Declarations

Written by Published

A JavaScript function declaration defines a named function using the function keyword.

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 function keyword 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.