JavaScript Function Declaration

What is Function Declaration?

Function declaration is the most traditional way to define a function in JavaScript. It uses the function keyword followed by the function name, parameters in parentheses, and the code block in curly braces.

Function declarations are hoisted to the top of their scope, meaning you can call them before they are defined in your code. This is one key difference from function expressions.

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Alice")); // Hello, Alice!

Function Declaration Syntax

The syntax consists of the function keyword, function name, parameters in parentheses, and the body in curly braces.

function add(a, b) {  // function keyword, name, parameters
  const sum = a + b;  // function body
  return sum;         // return value
}

// Call the function
const result = add(5, 3); // result = 8

Parameters and Arguments

Parameters are placeholders for values you want to use in the function. Arguments are the actual values you pass when calling the function.

// Parameters (in definition)
function multiply(x, y) {
  return x * y;
}

// Arguments (in function call)
console.log(multiply(4, 5));  // 20
console.log(multiply(10, 2)); // 20

// Multiple parameters
function describe(name, age, city) {
  return name + " is " + age + " years old and lives in " + city;
}

console.log(describe("John", 30, "NYC")); // John is 30 years old and lives in NYC

Function Hoisting

Function declarations are hoisted, meaning they're moved to the top of their scope before code execution. You can call them before they appear in code.

// You can call the function BEFORE it's declared
console.log(sayHi("World")); // Hello, World!

// Function declaration (gets hoisted)
function sayHi(name) {
  return "Hello, " + name + "!";
}

// This works but isn't shown before - it's hoisted by JavaScript interpreter

// Function declaration - HOISTED, works before declaration
console.log(add(2, 3)); // 5

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

// Function expression - NOT hoisted, error if called before
console.log(multiply(2, 3)); // ReferenceError: multiply is not defined

const multiply = function(a, b) {
  return a * b;
};

Scope and Closures

Functions create their own scope. Variables declared inside a function are only accessible within that function, unless they reference outer scopes.

function outer() {
  const color = "blue"; // outer scope
  
  function inner() {
    const size = "large"; // inner scope
    console.log(color); // can access outer scope
  }
  
  inner();
  console.log(size); // ReferenceError: size is not defined
}

outer();
console.log(color); // ReferenceError: color is not defined

Return Values

Functions can return values using the return keyword. If no return statement is specified, the function returns undefined.

function isEven(num) {
  if (num % 2 === 0) {
    return true;  // Explicitly return true
  }
  return false;   // Explicitly return false
}

console.log(isEven(4)); // true
console.log(isEven(5)); // false

function noReturn() {
  console.log("This function has no return");
}

const result = noReturn(); // undefined
console.log(result); // undefined

Best Practices

Write clear, reusable functions with meaningful names and single responsibilities.

• Use descriptive function names that explain what they do
• Keep functions focused on a single responsibility
• Use parameters instead of relying on global variables
• Always return consistent types (don't return string sometimes and number other times)
• Document complex functions with comments
• Keep functions reasonably small (<20 lines is ideal)
• Avoid side effects when possible (functions that modify external state)

Common Mistakes

• Missing return statement: If you want to return a value, explicitly use return. Without it, function returns undefined.
• Forgetting parameters: If a function needs data, define it as a parameter instead of relying on global variables.
• Too many parameters: If a function has more than 3-4 parameters, consider using an object to group related parameters.

FAQ

Related Topics