Think functions are optional plumbing you can skip?
They’re not.
They’re the backbone of every tidy JavaScript project.
In this post we’ll strip functions down to three key syntaxes: declarations, expressions, and arrow functions.
You’ll see clear, hands-on examples that show parameters, returns, scope, and the hoisting quirks that trip people up.
Read on and you’ll stop copying code and start writing reusable, testable pieces that make your apps easier to fix and extend.
Core Explanation of JavaScript Functions
A JavaScript function is a reusable block of code you write once and run whenever you need it. You call the function by name, and it does its job. Functions can take input values (parameters), do something with them, and give you back a result (a return value). They’re what keep your code from turning into a mess of repeated instructions.
Think of it like a recipe. You write down the steps once. Then you follow that same recipe every time you want the dish.
Here’s a simple function that adds two numbers:
function addNumbers(a, b) {
return a + b;
}
const result = addNumbers(5, 3);
console.log(result); // prints 8
In this example, addNumbers is the function name. a and b are parameters. The return a + b; line sends the sum back to wherever you called the function from. You run the function by writing its name and passing values inside parentheses.
Understanding Function Declarations
A function declaration is the most common way to define a function. You start with the function keyword, add the function’s name, list any parameters in parentheses, then write the code inside curly braces. Function declarations get hoisted, which means JavaScript treats them like they’re at the top of their scope. You can call the function before the line where you actually wrote it.
Hoisting feels weird at first. But it’s useful. You can tuck helper functions at the bottom of a file and still call them from the top.
Here’s what that looks like:
greet("Alice"); // prints "Hello, Alice"
function greet(name) {
console.log("Hello, " + name);
}
Even though greet("Alice") appears first, JavaScript hoists the function to the top when it runs. No errors.
JavaScript Function Expressions
A function expression assigns a function to a variable. Unlike declarations, these don’t get hoisted. You can’t call them before the line where they’re defined. JavaScript reads top to bottom, and the variable doesn’t exist until it hits that assignment.
Function expressions can be named or anonymous. Anonymous means there’s no name after the function keyword. You’ll see these assigned to const or let variables all the time.
Here’s an example:
const multiply = function(x, y) {
return x * y;
};
console.log(multiply(4, 5)); // prints 20
multiply is a variable holding an anonymous function. Try calling multiply(4, 5) before this line and you’ll get a ReferenceError.
Arrow Functions Overview
Arrow functions are shorter syntax from ES6. You write them with parentheses for parameters, the => symbol, then the function body. If the body’s just a single expression, you can skip the curly braces and the return keyword. The expression’s value gets returned automatically.
The big difference? Arrow functions don’t create their own this binding. They inherit this from wherever they’re defined. Super useful for callbacks where you want this to stay put.
Here’s an arrow function with implicit return:
const square = (n) => n * n;
console.log(square(6)); // prints 36
Because the body is just n * n, that result gets returned automatically. Need multiple statements? Use curly braces and an explicit return:
const greetUser = (name) => {
const message = "Welcome, " + name;
return message;
};
Parameters and Arguments in Practice
Parameters are the variable names you list when defining a function. Arguments are the actual values you pass when calling it. If you write function add(a, b), then a and b are parameters. When you call add(2, 3), those numbers are arguments.
You can also set default parameters. If someone doesn’t pass an argument, the function uses the fallback value you specified. Prevents undefined from sneaking in.
Quick rules:
- Parameters are local variables inside the function. You can’t access them from outside.
- Default parameters use
=in the signature, likefunction greet(name = "Guest"). - Default parameters come after regular ones so JavaScript knows what maps where.
Example:
function introduce(name, age = 18) {
console.log(name + " is " + age + " years old");
}
introduce("Sam"); // prints "Sam is 18 years old"
introduce("Jordan", 25); // prints "Jordan is 25 years old"
Using Return Values Effectively
The return statement sends a value back to whoever called the function. Once JavaScript hits return, the function stops. Any code after that line won’t run. If you don’t include a return statement, the function returns undefined by default.
You can store the returned value in a variable, pass it to another function, or use it in an expression. Return values let you chain operations and move data between different parts of your program.
Here’s a function that calculates a discount:
function applyDiscount(price, discount) {
return price - (price * discount);
}
const finalPrice = applyDiscount(100, 0.2);
console.log(finalPrice); // prints 80
The return value 80 gets stored in finalPrice. You can use it anywhere.
Function Scope and Variable Access
Each function creates its own scope. Variables you declare inside a function using let, const, or var are local. They can’t be accessed from outside. Try to reference them from global scope or another function and you’ll get a ReferenceError.
Variables declared outside a function are accessible inside it. This is lexical scoping. Inner functions can “see” variables from their parent scopes. But parent functions can’t see variables declared inside their child functions.
Simple example:
function calculate() {
const result = 42;
console.log(result); // works fine
}
calculate();
console.log(result); // ReferenceError: result is not defined
The variable result only exists inside calculate. Once the function finishes, it’s gone. Trying to access it from outside throws an error.
Practical Use Cases for JavaScript Functions
Functions are everywhere in JavaScript. You use them to process data, handle clicks, organize messy logic, talk to servers. Breaking code into functions makes debugging way easier and lets you reuse the same logic across your project.
They also make working with other developers simpler. When each function has a clear job, people can understand what it does without reading your entire codebase. You can test functions independently, which speeds things up and cuts down on bugs.
Real scenarios where you’ll use functions constantly:
- Event handling – Attach functions to button clicks, form submissions, keyboard input. Respond to what users do.
- Data transformation – Filter arrays, format strings, calculate totals, map over collections.
- API interactions – Wrap fetch requests in functions so you can reuse the same request logic everywhere.
- DOM manipulation – Update page content, toggle CSS classes, insert new elements on the fly.
- Validation and error checking – Verify user input, check data types, handle edge cases before doing anything risky.
Every time you’re copying and pasting similar code, that’s your cue to pull it into a function. Functions keep projects clean, testable, and way easier to maintain as they grow.
Final Words
You wrote functions, ran declarations and expressions, tried arrow functions, and practiced parameters, returns, and scope.
Each section gave a simple definition and a short code example. It showed practical rules like hoisting, when to use anonymous functions, default parameters, return behavior, and local vs global variables.
Keep experimenting. These javascript functions are tools you’ll reuse across event handlers, calculations, and API work. Small steps build confidence, keep coding and you’ll see real progress.
FAQ
Q: What are the functions of JavaScript?
A: The functions of JavaScript are to add behavior and interactivity to web pages: manipulate the DOM, handle events, validate input, run calculations, and talk to servers (AJAX/fetch) for dynamic content.
Q: What are the 4 types of functions?
A: The four types of functions in JavaScript are function declarations (named), function expressions (can be anonymous), arrow functions (shorter syntax), and generator functions (pausable, use *).
Q: What are the 63 keywords in JavaScript?
A: The 63 keywords in JavaScript are reserved words like break, case, class, const, export, import, return, await; the exact full list depends on the ECMAScript version—consult a current language reference.
Q: What does ‘%’ mean in JavaScript?
A: The ‘%’ operator in JavaScript is the remainder (modulo) operator, returning the remainder after division; for example 7 % 3 is 1, and negative results follow the dividend’s sign.
