What is a Function in JavaScript? Beginner Guide

Learn what functions are in JavaScript and why they matter. Covers function basics, syntax, return values, parameters, naming conventions, and how functions organize your code into reusable building blocks.

JavaScriptbeginner

RuneHub Team

February 26, 2026

10 min read

RuneHub Team

Feb 26, 2026

10 min read

A function is a reusable block of code that performs a specific task. Instead of writing the same instructions over and over, you wrap them in a function, give it a name, and call that name whenever you need that task done. Functions are the primary way JavaScript organizes code. Every real application uses them constantly: handling button clicks, processing form data, calculating totals, formatting dates, and sending API requests.

This guide explains what functions are, why they exist, how to write your first function, and the core concepts (parameters, return values, naming) that every JavaScript developer needs to understand before moving forward.

Why Functions Exist

Without functions, you would copy and paste the same code every time you need it:

javascript

// Without functions: repeated code
const price1 = 29.99;
const tax1 = price1 * 0.08;
const total1 = price1 + tax1;
console.log(`Total: $${total1.toFixed(2)}`);
 
const price2 = 49.99;
const tax2 = price2 * 0.08;
const total2 = price2 + tax2;
console.log(`Total: $${total2.toFixed(2)}`);
 
const price3 = 9.99;
const tax3 = price3 * 0.08;
const total3 = price3 + tax3;
console.log(`Total: $${total3.toFixed(2)}`);

With a function, you write the logic once and reuse it:

javascript

// With a function: write once, use many times
function calculateTotal(price) {
  const tax = price * 0.08;
  const total = price + tax;
  console.log(`Total: $${total.toFixed(2)}`);
}
 
calculateTotal(29.99); // Total: $32.39
calculateTotal(49.99); // Total: $53.99
calculateTotal(9.99);  // Total: $10.79

Without functions	With functions
Code is duplicated every time	Code is written once
Bug fix requires updating every copy	Bug fix happens in one place
Hard to read and understand	Clear structure with named operations
Files grow quickly	Code stays compact

Anatomy of a Function

A JavaScript function has four parts:

javascript

function greet(name) {
  const message = `Hello, ${name}!`;
  return message;
}

Part	Example	Purpose
`function` keyword	`function`	Tells JavaScript you are defining a function
Name	`greet`	Identifier used to call the function later
Parameters	`(name)`	Inputs the function accepts (inside parentheses)
Body	`{ ... }`	The code that runs when the function is called

Functions Are Values

In JavaScript, functions are first-class values. You can store them in variables, pass them to other functions, and return them from functions. This makes JavaScript extremely flexible compared to languages where functions are only standalone declarations.

Your First Function

Defining a Function

javascript

function sayHello() {
  console.log("Hello, world!");
}

This creates a function named sayHello. The code inside the curly braces does not run yet. It is stored and waiting.

Calling a Function

javascript

sayHello(); // Hello, world!
sayHello(); // Hello, world!
sayHello(); // Hello, world!

Adding () after the function name executes it. Each call runs the body from top to bottom.

The Difference Between Defining and Calling

javascript

// This DEFINES the function (stores it)
function add(a, b) {
  return a + b;
}
 
// This CALLS the function (runs it)
const result = add(3, 5);
console.log(result); // 8

A common beginner mistake is forgetting the parentheses:

javascript

console.log(add);      // [Function: add] (the function itself, not the result)
console.log(add(3, 5)); // 8 (the function's return value)

Parameters and Arguments

Parameters are the names listed in the function definition. Arguments are the actual values you pass when calling:

javascript

//              parameters
//              vvvvvvvvvv
function multiply(a, b) {
  return a * b;
}
 
//                arguments
//                vvvvvv
const result = multiply(4, 7);
console.log(result); // 28

Multiple Parameters

javascript

function createUser(name, age, email) {
  console.log(`Name: ${name}`);
  console.log(`Age: ${age}`);
  console.log(`Email: ${email}`);
}
 
createUser("Alice", 28, "alice@example.com");
// Name: Alice
// Age: 28
// Email: alice@example.com

What Happens with Missing Arguments

javascript

function greet(name, greeting) {
  console.log(`${greeting}, ${name}!`);
}
 
greet("Alice", "Hello"); // Hello, Alice!
greet("Bob");            // undefined, Bob!

When you call a function with fewer arguments than parameters, the missing parameters become undefined. This is where default parameters become useful.

Return Values

Functions can send data back using the return keyword:

javascript

function square(number) {
  return number * number;
}
 
const result = square(5);
console.log(result); // 25

return Stops Execution

Everything after return in the function body is skipped:

javascript

function checkAge(age) {
  if (age < 0) {
    return "Invalid age";
  }
 
  if (age >= 18) {
    return "Adult";
  }
 
  return "Minor";
  console.log("This never runs"); // unreachable code
}
 
console.log(checkAge(25));  // "Adult"
console.log(checkAge(-1));  // "Invalid age"
console.log(checkAge(12));  // "Minor"

Functions Without return

If a function has no return statement, it returns undefined:

javascript

function logMessage(msg) {
  console.log(msg);
  // no return statement
}
 
const result = logMessage("Hello");
console.log(result); // undefined

Returning Objects

When returning an object literal, wrap it in parentheses to avoid syntax confusion:

javascript

function createProduct(name, price) {
  return {
    name: name,
    price: price,
    taxIncluded: price * 1.08,
  };
}
 
const laptop = createProduct("Laptop", 999);
console.log(laptop.taxIncluded); // 1078.92

Function Naming Conventions

Good function names describe what the function does:

Pattern	Example	When to use
Verb + noun	`getUser()`, `sendEmail()`	Most functions
is/has + adjective	`isValid()`, `hasPermission()`	Functions returning booleans
on + event	`onClick()`, `onSubmit()`	Event handlers
calculate/compute	`calculateTax()`, `computeTotal()`	Mathematical operations
format/parse	`formatDate()`, `parseJSON()`	Data transformation

javascript

// Good: clear what each function does
function validateEmail(email) { /* ... */ }
function formatCurrency(amount) { /* ... */ }
function isLoggedIn(user) { /* ... */ }
function handleFormSubmit(event) { /* ... */ }
 
// Bad: vague or misleading names
function process(data) { /* ... */ }   // process how?
function doStuff() { /* ... */ }       // what stuff?
function x(a) { /* ... */ }            // meaningless

Use camelCase

JavaScript convention for function names is camelCase: calculateTotal, getUserById, isEmptyArray. Start with a lowercase letter, capitalize each subsequent word. Do not use snake_case (calculate_total) or PascalCase (CalculateTotal) for regular functions. PascalCase is reserved for constructor functions and classes.

Functions as Building Blocks

Real applications compose small functions into larger operations:

javascript

function sanitizeInput(input) {
  return input.trim().toLowerCase();
}
 
function isValidEmail(email) {
  return email.includes("@") && email.includes(".");
}
 
function formatResponse(success, message) {
  return { success, message, timestamp: new Date().toISOString() };
}
 
// Composing functions together
function processRegistration(rawEmail) {
  const email = sanitizeInput(rawEmail);
 
  if (!isValidEmail(email)) {
    return formatResponse(false, "Invalid email address");
  }
 
  return formatResponse(true, `Registered: ${email}`);
}
 
console.log(processRegistration("  Alice@Example.COM  "));
// { success: true, message: "Registered: alice@example.com", timestamp: "..." }
 
console.log(processRegistration("not-an-email"));
// { success: false, message: "Invalid email address", timestamp: "..." }

Each function has a single responsibility. sanitizeInput cleans data. isValidEmail checks validity. formatResponse structures the output. processRegistration orchestrates them.

Scope: Variables Inside Functions

Variables declared inside a function are only accessible within that function:

javascript

function calculateDiscount(price, percent) {
  const discount = price * (percent / 100);
  const finalPrice = price - discount;
  return finalPrice;
}
 
const result = calculateDiscount(100, 20);
console.log(result);      // 80
// console.log(discount);  // ReferenceError: discount is not defined
// console.log(finalPrice); // ReferenceError: finalPrice is not defined

This is called local scope. Variables created inside a function are "local" to that function and invisible outside it.

Common Beginner Mistakes

Forgetting Parentheses When Calling

javascript

function getGreeting() {
  return "Hello!";
}
 
// Bug: references the function, doesn't call it
const message = getGreeting;
console.log(message); // [Function: getGreeting]
 
// Fix: add parentheses to call
const message = getGreeting();
console.log(message); // "Hello!"

Forgetting to return a Value

javascript

// Bug: calculates but doesn't return
function addTax(price) {
  const total = price * 1.08;
}
 
console.log(addTax(100)); // undefined
 
// Fix: add return
function addTax(price) {
  return price * 1.08;
}
 
console.log(addTax(100)); // 108

Modifying Outer Variables Unnecessarily

javascript

// Avoid: function modifies external state
let count = 0;
 
function increment() {
  count++; // depends on and changes external variable
}
 
// Better: function returns a new value
function increment(current) {
  return current + 1;
}
 
let count = 0;
count = increment(count); // 1
count = increment(count); // 2

Types of Functions (Preview)

JavaScript offers several ways to create functions. This article covers the standard function keyword. The next articles in this series cover each type in detail:

Type	Syntax	Key characteristic
Function declaration	`function name() {}`	Hoisted, available before definition
Function expression	`const name = function() {}`	Not hoisted, assigned to variable
Arrow function	`const name = () => {}`	Short syntax, no own `this`
Method	`object.method()`	Function inside an object
Constructor	`new Function()`	Rarely used, created from strings

Rune AI

Key Insights

Functions are reusable code blocks: define once with function name() {}, call anywhere with name()
Parameters receive inputs, return sends outputs: missing arguments become undefined, missing return gives undefined
Scope keeps variables private: variables declared inside a function are invisible outside it
Name functions descriptively: use verb-noun patterns like calculateTotal() and isValid() in camelCase
Compose small functions into larger operations: each function should have a single, clear responsibility

Frequently Asked Questions

What is the difference between a function and a method?

method is a function that belongs to an object. When you write `console.log()`, `log` is a method of the `console` object. When you write `"hello".toUpperCase()`, `toUpperCase` is a method of the string. A standalone function like `function greet() {}` is just called a function. The distinction is about where the function lives, not how it works.

Can a function call itself?

Yes, this is called [recursion](/tutorials/programming-languages/javascript/how-to-use-recursion-in-javascript-full-tutorial). A function can call itself with different arguments to solve problems that have a repeating structure, like traversing a tree or calculating a factorial. Recursion requires a base case (a condition that stops the self-calling), or it will loop forever and crash with a [stack overflow](/tutorials/programming-languages/javascript/preventing-stack-overflow-in-javascript-recursion) error.

How many parameters should a function have?

There is no hard limit, but best practice is to keep it under three or four. Functions with many parameters are harder to call correctly and harder to test. If you need more than four inputs, consider passing an object with named properties instead, which makes the calling code more readable.

Do functions have to return something?

No. Functions that perform actions (logging, updating the DOM, sending a request) often return nothing. These are sometimes called "void" functions. JavaScript automatically returns `undefined` if no `return` statement is present. Only use `return` when the caller needs a value back.

What happens if I call a function before defining it?

It depends on how the function is created. [Function declaration](/tutorials/programming-languages/javascript/how-to-declare-and-call-a-javascript-function)s (using the `function` keyword) are hoisted, meaning JavaScript moves them to the top of their scope before execution. So calling a declaration before its line in the code works fine. Function expressions and arrow functions are not hoisted and will throw a ReferenceError if called before their definition line.

Conclusion

Functions are the core building blocks of JavaScript programs. They let you write code once and reuse it everywhere, accept inputs through parameters, and send results back with return. Good functions have descriptive camelCase names, do one thing well, and keep their variables local. Every concept you learn from here (scope, closures, callbacks, async patterns) builds on this foundation. Master function basics first, and everything else in JavaScript becomes significantly easier to understand.

What is a Function in JavaScript? Beginner Guide

Why Functions Exist

Anatomy of a Function

Functions Are Values

Your First Function

Defining a Function

Calling a Function

The Difference Between Defining and Calling

Parameters and Arguments

Multiple Parameters

What Happens with Missing Arguments

Return Values

return Stops Execution

Functions Without return

Returning Objects

Function Naming Conventions

Use camelCase

Functions as Building Blocks

Scope: Variables Inside Functions

Common Beginner Mistakes

Forgetting Parentheses When Calling

Forgetting to return a Value

Modifying Outer Variables Unnecessarily

Types of Functions (Preview)

Rune AI

Frequently Asked Questions

What is the difference between a function and a method?

Can a function call itself?

How many parameters should a function have?

Do functions have to return something?

What happens if I call a function before defining it?

Conclusion

Tags

More in this topic

OffscreenCanvas API in JS for UI Performance

Advanced Web Workers for High Performance JS

JavaScript Macros and Abstract Code Generation

Stay Updated