← Back to JavaScript Course | Chapter 2: Functions & Objects | Lesson 4 of 10

JS Functions

Think of a coffee machine, you put in water and coffee grounds, press a button, and out comes a cup of coffee, every single time, without you needing to know exactly how the machine works internally. A function in JavaScript is that same idea, a reusable block of code that takes some input, does something with it, and optionally hands back a result, letting you avoid rewriting the same logic over and over. Functions are everywhere in real JavaScript, from calculating a total to greeting a visitor by name on a page like cookiescursor.com.

In this page:

  1. Function Declaration
  2. Parameters and Arguments
  3. Return Values
  4. Default Parameters
  5. Function Expressions and Hoisting
Syntax
javascript 
function functionName(parameter1, parameter2) {
  // body
  return value;
}

functionName(argument1, argument2);

Function Declaration

A function declaration defines a named, reusable block of code using the function keyword, which can then be called by that name anywhere it's in scope.

Note: Name functions with verbs that describe their action, like calculateTotal or greetUser, it makes calling code self-explanatory.
Warning: Two function declarations with the same name in the same scope silently overwrite each other, only the last one remains callable.

Example: Function Declaration

javascript 
// Define the function `greetUser` with no parameters
// Define the function `greetUser` with no parameters
function greetUser() {
  // Print "Hello!" to the console
  // Print "Hello!" to the console
  console.log("Hello!");
}
// Call `greetUser()`
// Call `greetUser()`
greetUser();

Parameters and Arguments

Parameters are the named placeholders listed in a function's definition, while arguments are the actual values supplied when the function is called, parameters describe what a function expects, arguments provide it.

Note: A function can accept multiple parameters separated by commas, and you can name them anything that clearly describes their purpose.
Warning: Calling a function with fewer arguments than parameters simply leaves the missing ones as undefined, JavaScript does not throw an error by default.

Example: Parameters and Arguments

javascript 
function add(a, b) {
  console.log(a + b);
}
add(2, 3); // 2 and 3 are arguments

Return Values

The return keyword sends a value back out of a function to whatever called it, and as soon as return runs, the function stops executing immediately, skipping any code after it.

Note: Store a function's returned value in a variable so you can use it later, rather than only logging it directly inside the function.
Warning: Without an explicit return statement, a function always produces undefined, even if it internally calculates something useful.

Example: Return Values

javascript 
// Define the function `square` taking `n`
// Define the function `square` taking `n`
function square(n) {
  // Return `n * n` from this function
  // Return `n * n` from this function
  return n * n;
}
// Print `square(4)` to the console
// Print `square(4)` to the console
console.log(square(4));

Default Parameters

Default parameters let you specify a fallback value directly in the function definition, which is used automatically whenever the caller doesn't provide an argument for that parameter.

Note: Default parameters are a cleaner alternative to manually checking if (value === undefined) inside the function body.
Warning: A default parameter only applies when the argument is undefined or omitted, passing null explicitly does not trigger the default.

Example: Default Parameters

javascript 
// Define the function `greet` taking `name`
// Define the function `greet` taking `name`
function greet(name = "Guest") {
  // Print `Hello, ${name}!` to the console
  // Print `Hello, ${name}!` to the console
  console.log(`Hello, ${name}!`);
}
// Call `greet()`
// Call `greet()`
greet();
// Call `greet("Amit")`
// Call `greet("Amit")`
greet("Amit");

Function Expressions and Hoisting

A function expression stores a function inside a variable rather than giving it a standalone name, and unlike function declarations, which are hoisted and callable anywhere in their scope, function expressions are only usable after the line where they're defined.

Note: Function expressions are especially useful when you need to pass a function as a value, like into another function or an event handler.
Warning: Calling a function expression before its definition line throws an error, since only the variable itself, not its function value, is hoisted.

Example: Function Expressions and Hoisting

javascript 
// Declare the constant `sayHi`, set to `function () {`
// Declare the constant `sayHi`, set to `function () {`
const sayHi = function () {
  // Print "Hi!" to the console
  // Print "Hi!" to the console
  console.log("Hi!");
};
// Call `sayHi()`
// Call `sayHi()`
sayHi();
Live Example
Related Topics

JS Arrow Functions · JS Higher Order Functions · JS Data Types · JS Objects

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting the return keyword, a function without an explicit return always produces undefined, even if it looks like it computes something.
  2. Confusing a function's parameters, the placeholders in its definition, with its arguments, the actual values passed in when it's called.
  3. Calling a function expression before its declaration line, unlike function declarations, expressions are not hoisted the same way.
Chapter Summary
  • A function declaration defines a reusable, named block of code that can accept parameters and return a value.
  • Default parameters let a function fall back to a preset value when an argument isn't provided.
  • Function declarations are hoisted and usable before their definition line, function expressions are not.
Browser Support

Function declarations, expressions, and default parameters are all standard JavaScript features supported in every modern browser.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson JS Data Types Next Lesson → JS Objects

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.