화살표 함수와 this

우리는 6장 자바스크립트 심화 I에서 this가 호출 방식에 따라 동적으로 바인딩된다는 점을 학습했습니다.

이 특성은 콜백/중첩 함수에서 혼란을 만들었고, bind, call, apply, self = this 같은 우회 패턴을 자주 요구했습니다.

ES2015(ES6)의 화살표 함수(Arrow Function)는 바깥 this를 유지해야 하는 콜백을 간결하게 표현합니다. 호출된 객체를 this로 받아야 하는 메서드에는 다른 선택이 필요합니다.

화살표 함수는 모던 자바스크립트 코드에서 거의 필수적으로 사용되는 기능이 되었으므로, 정확한 이해가 중요합니다.

이번 장에서는 화살표 함수 기본 문법, this 바인딩 차이, 일반 함수와의 사용 시나리오를 비교해 정리합니다.

화살표 함수의 기본 문법

화살표 함수는 function 키워드 대신 화살표 =>를 사용하여 함수를 정의하는 간결한 문법입니다.

기본 형태

매개변수 => 표현식 또는 { 함수 본문 }

// 기존 함수 표현식
const add = function(a, b) {
    return a + b;
};

// 화살표 함수 (기본 형태)
const addArrow = (a, b) => a + b; // 중괄호와 return이 생략됨
console.log(addArrow(2, 3)); // 결과: 5

다양한 형태

const greet = name => `Hello, ${name}!`;
console.log(greet("Alice")); // 결과: Hello, Alice!

const sayHi = () => "Hi there!";
console.log(sayHi()); // 결과: Hi there!

const calculateSum = (numbers) => {
    let sum = 0;
    for (let num of numbers) {
        sum += num;
    }
    return sum;
};
console.log(calculateSum([1, 2, 3, 4, 5])); // 결과: 15

const createUser = (name, age) => ({ name: name, age: age });
console.log(createUser("Bob", 28)); // 결과: { name: 'Bob', age: 28 }

화살표 함수와 this 바인딩의 차이점

this 바인딩의 호출 규칙과 비교하면서, 이 함수가 사용할 this를 어느 실행 범위에서 가져오는지 추적합니다.

이것이 화살표 함수를 사용하는 가장 큰 이유이자 가장 중요한 특징입니다.

기존의 function 키워드로 선언된 함수는 호출 방식에 따라 this가 동적으로 결정됩니다.

하지만 화살표 함수는 this를 자신이 선언될 때의 상위 스코프(Lexical Scope)에서 가져옵니다.

즉, this가 정적으로 바인딩됩니다.

기존 함수의 this

const person = {
    name: "Minjun",
    // 1. 메서드로서 호출: `.` 앞의 객체(person)가 `this`가 됨
    sayHello: function() {
        console.log(`Hello, my name is ${this.name}.`);
    },
    // 2. 중첩 함수에서 `this` 문제 발생
    greetDelayed: function() {
        // 기존 함수의 `this` (person)를 유지하기 위한 꼼수: `self = this`
        const self = this;
        setTimeout(function() { // 브라우저 timer가 일반 콜백의 this로 window를 전달함 (strict 여부와 무관)
            console.log(`Delayed Hello, my name is ${self.name}. (using self)`);
            // console.log(`Delayed Hello, my name is ${this.name}. (using this - WRONG!)`);
        }, 500);
    }
};

person.sayHello(); // 결과: Hello, my name is Minjun.
person.greetDelayed(); // 결과: Delayed Hello, my name is Minjun. (using self)
                       // WRONG! 줄을 켜면 브라우저의 window.name을 읽으며 person.name을 읽지 않음

브라우저의 setTimeout은 일반 콜백을 호출할 때 window를 this 값으로 전달하므로, 이 콜백이 엄격 모드여도 this는 window입니다. 일반 함수를 직접 독립 호출할 때의 엄격 모드 규칙과 구분해야 합니다.

그래서 this.name은 제대로 된 값을 가져오지 못합니다.

화살표 함수의 this

화살표 함수는 자신이 정의될 때의 상위 스코프의 this를 그대로 가져옵니다.

const personArrow = {
    name: "Seulgi",
    sayHello: () => { // 브라우저 classic script의 최상위라면 this는 window; ES module이면 undefined
        console.log(`Hello, my name is ${this.name}. (WRONG! - window or undefined)`);
    },
    greetDelayed: function() { // 이 함수는 일반 함수이므로 `this`는 `personArrow`를 가리킴
        // 화살표 함수는 자신의 상위 스코프(greetDelayed)의 `this`를 가져옴
        setTimeout(() => {
            console.log(`Delayed Hello, my name is ${this.name}. (using arrow function)`);
        }, 500);
    }
};

personArrow.sayHello(); // classic script에서 window.name이 빈 문자열이면 Hello, my name is . (WRONG! - window or undefined)
                        // ES module에서는 this.name 접근이 TypeError; 객체 리터럴은 자체 this 스코프가 아님

personArrow.greetDelayed(); // 결과: Delayed Hello, my name is Seulgi. (using arrow function)

위 블록을 ES module로 실행하면 첫 sayHello()에서 예외가 발생해 뒤의 greetDelayed()에 도달하지 못합니다. 지연 콜백만 비교하려면 첫 호출을 주석 처리하거나 try/catch로 잡고 계속 실행하세요. classic script에서 읽는 window.name도 페이지 환경의 별도 값입니다.

personArrow.greetDelayed 내부의 setTimeout 콜백은 화살표 함수로 정의되었습니다.

이 화살표 함수는 자신이 선언된 greetDelayed 함수 스코프의 this 값을 그대로 가져옵니다.

greetDelayed는 personArrow 객체의 메서드로 호출되었으므로, greetDelayed 내부의 this는 personArrow를 가리킵니다.

따라서 화살표 함수 내부의 this도 personArrow를 가리키게 되어 원하는 대로 동작합니다.

핵심: 화살표 함수는 this 바인딩에 대한 문제를 해결해주는 강력한 도구입니다.

특히 콜백 함수에서 this 컨텍스트를 유지해야 할 때 유용합니다.

화살표 함수를 사용하지 말아야 할 경우

화살표 함수는 매우 편리하지만, 모든 상황에서 기존 함수를 대체할 수 있는 것은 아닙니다.

this 바인딩 방식의 차이 때문에 특정 상황에서는 기존 함수를 사용해야 합니다.

const myObject = {
    value: 10,
    // BAD: 화살표 함수는 바깥 this 사용 (classic script: window, ES module: undefined)
    getValueArrow: () => {
        console.log(this.value); // classic script: window.value; ES module: TypeError
    },
    // GOOD: 일반 함수는 `.` 호출 시 myObject를 this로 바인딩
    getValueNormal: function() {
        console.log(this.value); // 10
    }
};

myObject.getValueArrow();
myObject.getValueNormal();

// BAD: 화살표 함수는 생성자로 사용할 수 없음
// const MyClass = () => { this.value = 1; };
// const instance = new MyClass(); // TypeError: MyClass is not a constructor

// GOOD: 생성자는 일반 함수 또는 class 키워드로 정의
function MyClass(value) {
    this.value = value;
}
const instance = new MyClass(10);

function sumAllNormal() {
    console.log(arguments); // 1, 2, 3을 담은 arguments 객체 (배열은 아님)
    return Array.from(arguments).reduce((a, b) => a + b);
}
console.log(sumAllNormal(1, 2, 3)); // 결과: 6

const sumAllArrow = () => {
    // console.log(arguments); // ReferenceError: arguments is not defined (상위 스코프에 arguments 없으면)
    // 화살표 함수에서는 ...rest 매개변수를 사용해야 함
    // return [...arguments].reduce((a, b) => a + b); // Error!
};
// console.log(sumAllArrow(1, 2, 3));

<button id="myButton">클릭하세요</button>
<script>
    const button = document.getElementById('myButton');

    // GOOD: 일반 함수는 this가 버튼 요소 자체를 가리킴
    button.addEventListener('click', function() {
        console.log("일반 함수 this:", this.id); // 결과: myButton
    });

    // BAD: 화살표 함수는 this가 상위 스코프 (window)를 가리킴
    button.addEventListener('click', () => {
        console.log("화살표 함수 this:", this.id); // 결과: undefined (window.id는 없음)
    });
</script>

위 sumAllNormal은 인자가 하나 이상일 때의 예제입니다. 빈 배열의 reduce에 초기값이 없으면 TypeError가 발생합니다. 빈 호출도 합계 0으로 정하려면 const sumAll = (...values) => values.reduce((total, value) => total + value, 0);처럼 정책을 정합니다.

DOM 이벤트의 등록 대상을 읽으려면 화살표 함수에서도 event.currentTarget을 사용할 수 있습니다. this를 사용하는 원문과 구별해 button.addEventListener("click", event => console.log(event.currentTarget.id));를 같은 버튼에 별도로 등록하면 클릭할 때 myButton을 읽습니다. 이 값은 리스너가 실행되는 동안 읽습니다.

예시 화살표 함수가 바깥 this를 유지한다는 것은 그 객체의 프로퍼티 값까지 복사한다는 뜻은 아닙니다.

const source = {
    label: "원본",
    makeReader() {
        return () => this.label;
    }
};
const readLabel = source.makeReader();
console.log(readLabel.call({ label: "다른 객체" }));
source.label = "갱신";
console.log(readLabel());

출력은 원본, 갱신입니다. makeReader()를 호출한 source가 바깥 this입니다. call로 다른 객체를 제공해도 화살표 함수의 this는 바뀌지 않으며, 매번 그 객체의 현재 label을 읽습니다.

스스로 확인하기 반환하는 함수를 return function () { return this.label; };로 바꾼 뒤 첫 호출만 실행하면 무엇을 읽나요? 화살표와 달리 첫 호출의 call 인수가 왜 영향을 주는지 설명해 보세요.

생성자 기능과 바깥 바인딩의 규칙은 MDN 화살표 함수 설명에 정리되어 있습니다.

화살표 함수·this 정리

정리 단계에서는 문법 간결성보다 this 바인딩이 코드 유지보수성에 주는 효과를 우선 확인합니다.

이번 장에서는 ES2015(ES6)의 핵심 기능인 화살표 함수(Arrow Function)의 간결한 문법과, 특히 개발자들을 혼란스럽게 했던 this 바인딩 문제를 어떻게 해결하는지에 대해 심도 있게 학습했습니다.

화살표 함수는 선언 위치의 상위 스코프 this를 그대로 사용하는 렉시컬 this 바인딩을 갖습니다.

콜백이나 중첩 함수에서 this가 바뀌면 안 되는 경우에 이 특성이 도움이 됩니다.

하지만 화살표 함수가 모든 상황에서 기존 함수의 대안이 될 수는 없다는 점도 중요하게 다루었습니다.

객체의 메서드, 생성자 함수, arguments 객체에 접근해야 할 때, 그리고 이벤트 리스너의 this 바인딩이 중요한 경우에는 여전히 기존 함수(또는 class 문법의 메서드)를 사용해야 합니다.

화살표 함수는 간결하지만 생성자 함수나 자체 this가 필요한 메서드에는 맞지 않습니다.

짧은 콜백에는 적합하고, 객체 메서드의 this가 중요한 경우에는 일반 함수와 비교해 선택해야 합니다.

마지막으로 함수 형태를 고를 때는 짧은 문법보다 this가 어디서 정해져야 하는지를 먼저 묻는 습관이 중요합니다.