> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript Function Declaration

A function declaration defines a named function, binding an identifier directly to a function object within the current lexical environment. Unlike function expressions, declarations are parsed and instantiated in the environment record before the execution phase of the containing scope begins.

```javascript theme={"dark"}
function identifier(param1, param2, ...paramN) {
  // statements
}
```

## Technical Characteristics

**Hoisting**
During the compilation phase, the JavaScript engine hoists function declarations to the top of their enclosing scope. Both the function identifier and the function body are fully initialized in the execution context's variable environment before any step-by-step code execution occurs. This allows the function to be invoked lexically before its actual declaration in the source code.

```javascript theme={"dark"}
// Valid execution due to hoisting
invokeMe(); 

function invokeMe() {
  return true;
}
```

**Scoping Rules**
The visibility of a function declaration depends on the strictness of the execution context:

* **Strict Mode (`'use strict'`):** Function declarations are block-scoped. They are only accessible within the lexical block `{ ... }` in which they are defined.
* **Non-Strict Mode:** Function declarations are scoped to the enclosing function or the global scope, bypassing block boundaries (though modern engine implementations may exhibit complex legacy behaviors in this scenario).

**Internal Methods and Prototype**
Functions defined via declaration inherit from `Function.prototype`. They are created with both `[[Call]]` and `[[Construct]]` internal methods. Because they possess the `[[Construct]]` method and a `prototype` property, they can be invoked as constructors using the `new` keyword.

**Context Bindings**
Upon invocation, a function declaration generates a new execution context. This context automatically provisions two implicit local bindings:

1. `arguments`: An array-like object containing all arguments passed to the function.
2. `this`: A dynamically bound reference determined by the call site (how the function is invoked), rather than where it is lexically defined.

**Return Behavior**
If the execution of the function body completes without evaluating a `return` statement, or if a `return` statement is evaluated without an accompanying expression, the function implicitly returns `undefined`.

<div
  style={{ 
display: "flex", 
justifyContent: "space-between", 
alignItems: "center", 
maxWidth: "754px", 
padding: "1rem 0",
marginBottom: "24px"
}}
>
  <span style={{ fontWeight: "bold", fontSize: "1.25rem", color: "var(--tw-prose-headings)", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" }}>Tired of Poor JavaScript Skills? Fix That With Deep Grasping!</span>

  <a
    href="https://syntblaze.com"
    target="_blank"
    style={{ 
  marginLeft: "24px",
  textDecoration: "none", 
  backgroundColor: "#007AFF",
  color: "#ffffff", 
  padding: "6px 16px", 
  borderRadius: "16px",
  fontSize: "0.9rem",
  fontWeight: "600",
  textAlign: "center",
  transition: "background-color 0.2s ease"
}}
  >
    Learn More
  </a>
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/skill-tracking.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=b9b0305c93bb501c9e767b5c76c88835" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/skill-tracking.png" />

  <img src="https://mintcdn.com/syntblazellc/23tyuOzaWS88qFlc/images/nuggets.png?fit=max&auto=format&n=23tyuOzaWS88qFlc&q=85&s=c86c80197299762989e9b882419b2109" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/nuggets.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/bite-sized-exercises.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=a65f9a38c37ff28ab73ed783c53c60e3" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/bite-sized-exercises.png" />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/mastery-chain.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=748a1763454713e679260fbb95f154a2" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/mastery-chain.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-previews.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=242f61448ff5dd6deaaab2dccc13b507" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-previews.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-explanations.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=cf0fc1c31f9cd0fc26716781be05fbc9" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-explanations.png" />
</div>
