JavaScript Function Name: Syntax, Usage, and Examples

A JavaScript function name identifies a block of reusable code. It’s how you reference and call a function later in your program.

How to Use a Function Name in JavaScript

The basic syntax of a named function in JavaScript looks like this:

function greetUser() {
  console.log("Hello!");
}

The function name here is greetUser. It follows the camel case naming convention: lowercase first word, uppercase first letter of each subsequent word.

You can then call the function using its name, followed by parentheses:

greetUser(); // Output: Hello!

Function names are case-sensitive and must begin with a letter, underscore _, or dollar sign $. Digits are allowed, but not at the beginning.

When to Use a Function Name in JavaScript

Function names in JavaScript are important for organizing and reusing code. Use them when:

1. Repeating Logic

If you need to perform the same task multiple times, wrap it in a function and name it.

function calculateTotal(price, tax) {
  return price + price * tax;
}

You can now reuse this logic whenever needed.

2. Making Code More Readable

Descriptive names help you understand what a block of code is doing at a glance.

function fetchUserData() {
  // ...
}

Compare this to using anonymous or poorly named functions, it’s much harder to understand quickly.

3. Structuring Larger Applications

Named functions make it easier to break complex logic into smaller, understandable pieces. You might have a file with several related functions:

function validateEmail(email) { ... }
function registerUser(user) { ... }
function showWelcomeMessage() { ... }

Each of these is easy to identify and manage.

Examples of Function Names in JavaScript

Example 1: Greeting a User

function greetUser(name) {
  console.log(`Hello, ${name}!`);
}

greetUser("Lee"); // Output: Hello, Lee!

This is a simple, reusable pattern for personal greetings.

Example 2: Logging a Timestamp

function logCurrentTime() {
  const now = new Date();
  console.log("Current time:", now.toLocaleTimeString());
}

logCurrentTime();

Clear naming helps describe exactly what this function does.

Example 3: Math Utility

function square(num) {
  return num * num;
}

console.log(square(4)); // Output: 16

Short, accurate function names like square make utility functions easy to use and understand.

Learn More About JavaScript Function Names

JavaScript Function Name Best Practices

Following consistent naming conventions makes your code easier to read and maintain. Most developers use camel case for function names:

function getUserData() { ... }
function sendEmailNotification() { ... }

Avoid abbreviations that make code harder to understand:

function gU() { ... } // Not clear

Choose names that describe what the function does.

Reserved Words and Naming Restrictions

You can't use JavaScript reserved words like function, return, or class as function names.

These are invalid:

function return() { ... } // ❌ Syntax error

Function names also can’t begin with numbers:

function 123start() { ... } // ❌ Invalid

But these are valid:

function _initApp() { ... }
function $fetchData() { ... }

Function Expression Naming

Not all functions require a name. JavaScript allows anonymous functions:

const logHello = function() {
  console.log("Hello");
};

Here, logHello is a variable name, not the function name itself. But you can still give the function an internal name:

const logHello = function logMessage() {
  console.log("Hello");
};

This can help with debugging stack traces, although it’s not common unless you're writing more advanced JavaScript.

Arrow Functions and Naming

Arrow functions are anonymous by default. When you assign one to a variable, the name of the function is derived from the variable name:

const sayHi = () => {
  console.log("Hi!");
};

Here, sayHi becomes the function name implicitly.

The name Property of a Function

Every function in JavaScript has a name property:

function greetUser() {}
console.log(greetUser.name); // Output: greetUser

const showDate = () => {};
console.log(showDate.name); // Output: showDate

This can be useful for logging or debugging.

Naming Async Functions

If your function performs asynchronous work, include async in the function name when possible to make it obvious:

async function fetchUserProfile() {
  const response = await fetch("/profile");
  return response.json();
}

This isn’t required, but naming conventions like this can help prevent confusion later.

Functions Inside Objects

Function names can also appear as part of object methods:

const user = {
  sayHello: function() {
    console.log("Hello!");
  }
};

In ES6 shorthand:

const user = {
  sayHello() {
    console.log("Hello!");
  }
};

In both cases, sayHello is the function name in JavaScript.

Functions in Classes

Inside a class, function names become methods:

class User {
  greet() {
    console.log("Hi!");
  }
}

Here, greet is the function name inside the class context.