How to Create a Function in JavaScript

Use functions when a block of logic should be reusable, named, and callable from different parts of your code. Functions are the foundation for calculations, UI actions, API helpers, and data transformations.

What you’ll build or solve

You’ll learn how to create a function in JavaScript using function declarations, parameters, and return values. You’ll also know when to use reusable functions instead of repeating logic inline.

When this approach works best

This approach is the right choice when the same logic appears more than once or needs a clear name.

Common real-world scenarios include:

• Price calculations
• Form validation
• Button click handlers
• Data formatting
• API response cleanup

This is a bad idea when the logic is a one-off single line that becomes less readable after extraction.

Prerequisites

You only need:

• A JavaScript file or browser console
• Basic variables and console knowledge

Step-by-step instructions

Step 1: Create a function with parameters and return a result

Use the function keyword, a name, and parentheses.

function greetUser(name) {
  return `Hello, ${name}`;
}

console.log(greetUser("Alex"));

Parameters let the function stay reusable.

function addNumbers(a, b) {
  return a + b;
}

console.log(addNumbers(4, 6));

What to look for:

• Use function followed by a clear name
• Parameters make the function reusable
• return sends the result back
• Great for repeated business logic
• Name functions by action, like calculateTotal

Examples you can copy

Greeting function

function sayHello(name) {
  return `Hi, ${name}`;
}

Tax calculator

function addTax(price) {
  return price * 1.2;
}

Empty check

function isEmpty(value) {
  return value === "";
}

Common mistakes and how to fix them

Mistake 1: Forgetting parentheses

What the reader might do:

function greetUser {
  return "Hello";
}

Why it breaks: JavaScript requires parentheses after the function name.

Corrected approach:

function greetUser() {
  return "Hello";
}

Mistake 2: Forgetting return

What the reader might do:

function add(a, b) {
  a + b;
}

Why it breaks: the function runs the expression but returns undefined.

Corrected approach:

function add(a, b) {
  return a + b;
}

Mistake 3: Repeating inline logic instead of reusing

What the reader might do:

const total1 = price1 * 1.2;
const total2 = price2 * 1.2;

Why it breaks: repeated logic is harder to update later.

Corrected approach:

function addTax(price) {
  return price * 1.2;
}

Troubleshooting

If the function returns undefined, check for a missing return.

If the function throws a syntax error, verify parentheses and braces.

If repeated logic keeps appearing, extract it into a named function.

If names feel unclear, rename the function based on the action it performs.

Quick recap

• Use function plus a clear name
• Add parameters for reusable input
• Use return for output
• Reuse repeated logic
• Name by action, not generic labels