2nd/10_Wiki/Topic_Programming/Topic_JavaScript/JavaScript_Function_Expressions.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
javascript-function-expressions	JavaScript Function Expressions	Frontend	draft	conceptual		JS function expressions anonymous functions function declaration vs expression hoisting named function expression callbacks		B	0.88	2026-06-23	2026-06-23			javascript js web frontend w3schools functions expressions hoisting	https://www.w3schools.com/js/js_function_expressions.asp

JavaScript Function Expressions

🎯 한 줄 통찰 (One-line insight)

A function expression is a function stored in a variable — it behaves like a value (great for callbacks) but, unlike a function declaration, it is not hoisted and cannot be called before it is defined. [S1]

🧠 핵심 개념 (Core concepts)

• A function expression is a function stored in a variable. [S1]
• Often anonymous — functions stored in variables do not need names; the variable name is used to call the function. They can still be named. [S1]
• It is a statement — a function expression usually ends with a semicolon. [S1]
• Used as a value — because it is stored in a variable, it can be passed to other functions (callbacks). [S1]
• Hoisting difference — function declarations are hoisted and can be called before they are defined; function expressions are not hoisted and cannot. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Store-then-call — assign a function to a const, then invoke through the variable name (sayHello()). [S1]
• Callback passing — pass a function expression as an argument so another function can invoke it (run(sayHello)). [S1]
• Define-before-use ordering — because expressions are not hoisted, declare them above the point of first call. [S1]

📖 세부 내용 (Details)

What is a Function Expression? A function expression is a function stored in a variable. A standard function: [S1]

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

A function expression: [S1]

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

After storing in a variable, the variable can be used as a function: [S1]

let z = multiply(4, 3);

Anonymous Functions Function expressions commonly create anonymous functions. The function is actually a function without a name; functions stored in variables do not need names — the variable name is used to call the function. However, function expressions can also be named: [S1]

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

Function Expressions Use Semicolons A function expression is a JavaScript statement. That is why it usually ends with a semicolon. [S1]

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

Functions Stored in Variables Because a function expression is stored in a variable, it can be used like a value. This is useful when passing functions to other functions (callbacks). [S1]

function run(fn) {
  return fn();
}

const sayHello = function() {
  return "Hello";
};

run(sayHello);

Functions vs. Function Expressions JavaScript functions are defined with the function keyword and can be defined in different ways. They both work the same when you call them; the difference is when they become available in your code. [S1]

Function Declarations vs Function Expression A function declaration uses the function keyword, has a function name, parameters in parentheses, and a code block in brackets: [S1]

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

A function expression uses the function keyword, parameters in parentheses, and a code block in brackets: [S1]

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

Example: [S1]

const sayHello = function() {
  return "Hello World";
};

sayHello();

The function above is stored in the variable sayHello. To run it, you call sayHello(). [S1]

Hoisting Function declarations can be called before they are defined. Function expressions can not be called before they are defined. Function declarations are hoisted: [S1]

let sum = add(2, 3); // Will work

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

Function expressions are not hoisted: [S1]

let sum = add(2, 3); // ⛔ Will generate error

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

Key Differences Syntax: function declarations require a name; function expressions can be anonymous. Hoisting: function declarations are hoisted, function expressions are not. Flexibility: function declarations offer more flexibility in how and where they are used. [S1]

When to Use Each Use function declarations for general-purpose functions; use function expressions when assigning functions to variables; use function expressions in callbacks and event handlers. [S1]

Later in this Tutorial Function expressions enable several advanced techniques: arrow functions (modern concise => syntax for function expressions), callbacks (passing functions as arguments), closures (accessing variables from the containing scope), and IIFEs (functions that execute immediately upon definition). [S1]

Common Mistakes Forgetting the semicolon (expressions are statements and should end with semicolons); expecting hoisting (expressions are not hoisted, cannot call before definition); confusing reference and call (sayHello is the function, sayHello() calls it); confusing function names and variables (in expressions, the variable name provides the function reference). [S1]

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

Aspect	Function Declaration	Function Expression
Name	Required	Can be anonymous
Hoisting	Hoisted (callable before definition)	Not hoisted (must define first)
Flexibility	More flexible in how/where used	Used as a value (callbacks, variables)
When to use	General-purpose functions	Variable assignment, callbacks, event handlers

🛠️ 적용 사례 (Applied in summary)

The page's own snippets are the canonical applied examples — multiply/add expressions, the run(sayHello) callback pattern, and the hoisting error/success comparison. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Function expression stored in a variable:

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

Passing a function expression as a callback:

function run(fn) {
  return fn();
}

const sayHello = function() {
  return "Hello";
};

run(sayHello);

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.88
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: JavaScript Tutorial
• 관련 개념: JavaScript Arrow Functions, JavaScript Function Arguments, JavaScript Objects
• 참조 맥락: Referenced when choosing between declaration and expression syntax, and as the foundation for arrow functions, callbacks, and closures.

📚 출처 (Sources)

• [S1] W3Schools — JavaScript Function Expressions — https://www.w3schools.com/js/js_function_expressions.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript Function Expressions" page (Astra wiki-curation, P-Reinforce v3.1 format).