2nd/10_Wiki/Topic_JavaScript/JavaScript_Arrow_Function.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-arrow-functions	JavaScript Arrow Functions	Frontend	draft	conceptual		JS arrow functions arrow function syntax fat arrow => functions lexical this concise functions		B	0.88	2026-06-23	2026-06-23			javascript js web frontend w3schools functions arrow-functions this	https://www.w3schools.com/js/js_arrow_function.asp

JavaScript Arrow Functions

🎯 한 줄 통찰 (One-line insight)

Arrow functions give a shorter syntax for function expressions and do not have their own this — they inherit it from the surrounding code, which makes them great for callbacks but poor as object methods. [S1]

🧠 핵심 개념 (Core concepts)

• Shorter function expressions — arrow functions let you skip the function keyword, the return keyword, and the curly brackets. [S1]
• Always an expression — an arrow function uses => and is always written as a function expression. [S1]
• Implicit return — a single-statement body returns its value automatically without return or braces. [S1]
• Parentheses rules — one parameter can omit parentheses; zero or multiple parameters require them. [S1]
• No own this — arrow functions do not have their own this; they inherit it from the surrounding code, so they are unsuitable as object methods. [S1]
• Not hoisted — arrow functions are expressions, must be assigned to a variable, and cannot be used before they are defined. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Concise one-liner — const multiply = (a, b) => a * b; collapses an expression into a single statement with implicit return. [S1]
• Single-param shorthand — drop the parentheses for exactly one parameter: const square = x => x * x;. [S1]
• Always-keep-braces habit — because implicit return only works for a single statement, keeping { return ... } avoids accidental undefined. [S1]

📖 세부 내용 (Details)

Arrow functions allow a shorter syntax for function expressions. You can skip the function keyword, the return keyword, and the curly brackets. [S1]

Arrow Function Syntax An arrow function uses the => symbol and is always written as a function expression. [S1]

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

Shorter Syntax If the function body contains only one statement, you can remove the word function, the curly brackets, and the return keyword. Before arrow: [S1]

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

With arrow: [S1]

const multiply = (a, b) => a * b;

With arrow: [S1]

const hello = () => "Hello World!";

Before arrow: [S1]

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

Arrow Functions with One Parameter If a function has only one parameter, you can omit the parentheses. With parentheses: [S1]

const square = (x) => x * x;

Without parentheses: [S1]

const square = x => x * x;

With parentheses: [S1]

const hello = (val) => "Hello " + val;

Without parentheses: [S1]

const hello = val => "Hello " + val;

Arrow Functions Return Value by Default If the function has only one statement that returns a value, you can remove the brackets and the return keyword. This works only if the function has only one statement. [S1]

const hello = () => "Hello World!";

Arrow Function Parameters If you have parameters, you pass them inside the parentheses: [S1]

const hello = (val) => "Hello " + val;

If you have only one parameter, you can skip the parentheses as well: [S1]

const hello = val => "Hello " + val;

Arrow Functions with No Parameters If there are no parameters, parentheses are required: [S1]

const hello = () => "Hello World!";

You can only omit the return keyword and the curly brackets if the function is a single statement. Because of this, it might be a good habit to always keep them: [S1]

// This will return undefined
const myFunction = (x, y) => { x * y };

// This will return undefined
const myFunction = (x, y) => return x * y;

// This will return the expected result
const myFunction = (x, y) => { return x * y };

Arrow Functions Are Not Declarations Arrow functions are always expressions and must be assigned to a variable. They cannot be used before they are defined: [S1]

hello(); // Error

const hello = () => "Hello";

Arrow functions must be defined before they are used. [S1]

Arrow Functions and the this Keyword Arrow functions do not have their own this value. They inherit this from the surrounding code. [S1]

const person = {
  name: "John",
  greet: function() {
    return this.name;
  }
};

Using an arrow function as a method often gives unexpected results: [S1]

const person = {
  name: "John",
  greet: () => {
    return this.name;
  }
};

In this case, this does not refer to the person object. [S1]

When to Use Arrow Functions For short functions; for callbacks and array methods; when you do not need your own this. [S1]

When Not to Use Arrow Functions As object methods; when you need your own this; when using function declarations. [S1]

Common Mistakes Forgetting parentheses rules (parentheses are required for zero or multiple parameters); using arrow functions as methods (arrow functions do not bind this); expecting hoisting (arrow functions are not hoisted). [S1]

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

Situation	Use arrow function?	Reason
Short functions, callbacks, array methods	Yes	Concise syntax; no own this needed
Object methods	No	Arrow functions do not bind this to the object
Need your own this	No	Arrow this is inherited from surrounding code
Function declarations	No	Arrow functions are always expressions, not declarations

🛠️ 적용 사례 (Applied in summary)

The page's own snippets are the canonical applied examples — multiply, square, and hello concise forms, plus the person.greet method comparison demonstrating the this pitfall. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Concise single-expression arrow:

const multiply = (a, b) => a * b;

Single-parameter without parentheses:

const square = x => x * x;

Explicit-return habit (avoids accidental undefined):

const myFunction = (x, y) => { return x * y };

⚖️ 모순 및 업데이트 (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 Function Expressions, JavaScript Function Arguments, JavaScript Object this
• 참조 맥락: Referenced when writing concise callbacks and when reasoning about this binding in object methods.

📚 출처 (Sources)

• [S1] W3Schools — JavaScript Arrow Functions — https://www.w3schools.com/js/js_arrow_function.asp

📝 변경 이력 (Change history)

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