REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

Function Declaration

AI & DATA SCIENCE // function-declaration

Function declarations define named functions using the function keyword. They are hoisted to the top of their scope.

Syntax

function name(param1, param2) {
  // body
  return result;
}

Deep Dive Course

A **function declaration** creates a named function that is **hoisted** — the entire function (name and body) is moved to the top of its scope. This means you can call a declared function before its definition in the source code. Function declarations are block-scoped in strict mode.

1Understanding Function Declaration

A function declaration creates a named function that is hoisted — the entire function (name and body) is moved to the top of its scope. This means you can call a declared function before its definition in the source code. Function declarations are block-scoped in strict mode.

💡

Function declarations are hoisted. Function expressions are NOT. This is why calling a function before its declaration works with declarations but throws ReferenceError with const/let expressions.

editor.html

// Hoisting: can call before declaration
const result = add(3, 4); // works!
console.log(result); // 7

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

localhost:3000

2Practical Example

Here is a real-world application of Function Declaration showing how it is used in production JavaScript code.

editor.html

// Default parameters (ES6+)
function greet(name, greeting = 'Hello') {
  return `${greeting}, ${name}!`;
}
console.log(greet('Alice'));          // Hello, Alice!
console.log(greet('Bob', 'Hi'));      // Hi, Bob!

localhost:3000

3Best Practices

Follow these guidelines when working with Function Declaration:

1. Use declarations for main named functions

2. Use descriptive verb-noun names: getUserById, formatDate

3. Keep functions small with a single responsibility

⚠️

Tip: Function declarations are hoisted. Function expressions are NOT. This is why calling a function before its declaration works with declarations but throws ReferenceError with const/let expressions.

editor.html

// Hoisting: can call before declaration
const result = add(3, 4); // works!
console.log(result); // 7

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

localhost:3000

Examples

Example 01Basic Usage

// Hoisting: can call before declaration
const result = add(3, 4); // works!
console.log(result); // 7

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

Example 02Advanced Example

// Default parameters (ES6+)
function greet(name, greeting = 'Hello') {
  return `${greeting}, ${name}!`;
}
console.log(greet('Alice'));          // Hello, Alice!
console.log(greet('Bob', 'Hi'));      // Hi, Bob!

Best Practices

Use declarations for main named functions
Use descriptive verb-noun names: getUserById, formatDate
Keep functions small with a single responsibility

Interview Question

What is function hoisting and why does it matter?▼

Hint: The JavaScript engine processes declarations before execution.

During the creation phase of an execution context, the JS engine hoists function declarations by moving them (name and body) to the top of their scope. This allows calling functions before they appear in source code. Only function declarations are fully hoisted — function expressions and arrow functions assigned to variables are not.

Exercises

MediumPractice using Function Declaration in a real scenario.

View Solution

// Hoisting: can call before declaration
const result = add(3, 4); // works!
console.log(result); // 7

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

Frequently Asked Questions

What is function hoisting and why does it matter?▼

Related Functions

Function-ExpressionsArrow-FunctionsHoistingReturn