C
JavaScript list
Previous8 / 21Next
JavaScript/Functions/Lesson 08

Arrow Functions — *Short and Powerful* Syntax

30 min·theory
This chapter
2/4

Arrow Functions — *Short and Powerful* Syntax

🎯 By the end of this lesson

After completing this lesson, you will be able to confidently do the following 3 things.

  • ▸✅ Understand arrow function this binding (lexical scope)
  • ▸✅ Know when you must use the function keyword
  • ▸✅ Use implicit return + single-line expressions

Keep the learning goals as a checklist — close the lesson only when you can answer all of them.

5 Arrow Function Syntax Patterns

The Core in One Line

Arrow function = a concise function syntax introduced in ES6 (2015). It is much cleaner for simple function expressions.

5 Syntax Variants

javascript
// 1️⃣ Single argument — parentheses can be omitted (two lines are completely identical)
const square   = x => x * x;
const squareP  = (x) => x * x;
console.log(square(4));    // 16
console.log(squareP(4));   // 16

// 2️⃣ Zero or two+ arguments — parentheses are mandatory
const greet = () => "hi";
const add   = (a, b) => a + b;
console.log(greet());       // "hi"
console.log(add(2, 3));     // 5

// 3️⃣ Single-line expression — automatic return
const doubleShort = x => x * 2;
console.log(doubleShort(5));   // 10

// 4️⃣ Block — { } requires explicit return
const doubleBlock = x => {
    return x * 2;
};
console.log(doubleBlock(5));   // 10

// 5️⃣ Object return — *wrapping in parentheses* is key!
const makeOk  = () => ({ name: "Hong" });   // ✅ Wrapped in ( ) → returns object
const makeBad = () => { name: "Hong" };     // ❌ { } interpreted as a block → undefined

console.log(makeOk());    // { name: "Hong" }
console.log(makeBad());   // undefined   ← 🙀 Interpreted as an "empty block" not an object

The final pitfall — when returning an object, always wrap it in parentheses. Otherwise it is interpreted as a block.

What Arrow Functions Cannot Do

javascript
// 1. No own this
const obj = {
    name: "Hong",
    greet: () => console.log(this.name)   // undefined (surrounding this)
};

// 2. Not constructors
const Foo = () => {};
new Foo();   // TypeError

// 3. No arguments
const fn = () => console.log(arguments);   // ReferenceError
// Instead: const fn = (...args) => console.log(args);

The Greatest Value — Binding this

The most frustrating pitfall in old JS:

javascript
// ❌ Old way — this inside setTimeout is different
class Counter {
    constructor() {
        this.count = 0;
    }
    start() {
        setTimeout(function() {
            this.count++;     // this = window/undefined
        }, 1000);
    }
}

// ✅ Arrow — this is *exactly the Counter instance*
class Counter {
    constructor() {
        this.count = 0;
    }
    start() {
        setTimeout(() => {
            this.count++;     // this = Counter instance ✅
        }, 1000);
    }
}

It is precisely because of this pattern that modern frameworks like React and Vue actively use arrow functions.

Cleaner Callbacks

javascript
// Old way
const oldWay = [1, 2, 3].map(function(n) { return n * 2; });
console.log(oldWay);   // [2, 4, 6]

// Arrow — overwhelmingly shorter (same result)
const newWay = [1, 2, 3].map(n => n * 2);
console.log(newWay);   // [2, 4, 6]

// Chaining — filter → map → sort
const users = [
    { name: "Alice", age: 30 },
    { name: "Bob", age: 15 },
    { name: "Charlie", age: 22 }
];

const adultNames = users
    .filter(u => u.age >= 18)   // ① Adults only (Alice, Charlie)
    .map(u => u.name)           // ② Extract names only
    .sort();                    // ③ Alphabetical order

console.log(adultNames);   // ["Alice", "Charlie"]

Functional programming patterns become far more readable. This is why modern JS is concise.

Quick Summary

  • ▸Arrow function = concise function expression
  • ▸No own this — uses surrounding context (which is usually what you want)
  • ▸Use regular functions for class methods and constructors
  • ▸Use arrow functions for callbacks and chaining

⚡ Try It Yourself — Arrow Function Pitfall (Object Return)

Why you need to wrap the return value in `( )` when returning an object. Without wrapping, you get `undefined`!
✏️ JS 코드
📟 Console output
▶ Press the Run button
⚠️ Runs in a browser sandbox — only console.log() is supported; alert/fetch are not.

🤖 Try Asking AI Like This

Knowing the concepts from this lesson lets you give AI specific instructions. Instead of a vague 'fix this,' you make vocabulary-driven requests — and that is where token savings begin.

  • ▸'Convert this function declaration to an arrow function and check the this binding differences'
  • ▸'Refactor this function into a pure function (remove side effects)'
  • ▸'Apply appropriate default parameters and destructuring to this function'

Why This Saves Tokens

Without knowing the concepts, you have to ask 'What does that mean?' after every AI response. Those follow-up questions eat your tokens. Learn the concept once and the conversation ends in a single exchange.

Read this first: Function Basics
Up next: Scope and Closures
PreviousListNext
Arrow Functions - JavaScript