[js] 비동기 코드에서 화살표 함수

📌 setTimeout과 같은 비동기 코드에서 화살표 함수가 외부 this를 유지한다는 의미

➡ 화살표 함수(=>)는 this를 바인딩하지 않고, 선언된 위치의 this를 그대로 사용한다.
➡ 일반 함수(function() {})는 호출 방식에 따라 this가 달라진다.

이 차이가 setTimeout, setInterval 같은 비동기 코드에서 this를 유지하는데 영향을 준다는 의미다.

 

✅ 1. setTimeout에서 일반 함수(function) 사용

function Timer() {
    this.seconds = 0;

    setInterval(function() {
        this.seconds++; 
        console.log(this.seconds);
    }, 1000);
}

const myTimer = new Timer();

🔹 오류 발생! (this.seconds가 undefined)
🔹 왜? setInterval 내부의 this는 Timer 객체가 아니라 window(브라우저) 또는 global(Node.js)를 가리킨다.

⛔ 문제 원인:

• 일반 함수(function)에서 this는 호출된 방식에 따라 다르게 결정됨.
• setInterval의 콜백 함수는 일반 함수처럼 호출되므로 this가 전역 객체(window/global)를 가리킨다.

---

✅ 2. setTimeout에서 화살표 함수(=>) 사용

function Timer() {
    this.seconds = 0;

    setInterval(() => {
        this.seconds++; 
        console.log(this.seconds);
    }, 1000);
}

const myTimer = new Timer();

🔹 정상 동작! (this.seconds가 1초마다 증가)
🔹 왜? 화살표 함수(=>)는 자신이 선언된 위치의 this를 유지하기 때문.

✅ 해결 방법:

• 화살표 함수는 스스로 this를 만들지 않고, 바깥의 this를 유지한다.
• 즉, Timer 객체의 this를 그대로 가져오기 때문에 this.seconds++가 정상적으로 동작한다.

---

✅ 3. 예제: 일반 함수 vs 화살표 함수 this 비교

const obj = {
    name: "Alice",
    normalFunction: function() {
        setTimeout(function() {
            console.log(this.name);
        }, 1000);
    },
    arrowFunction: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};

obj.normalFunction(); // 출력: undefined (window.name)
obj.arrowFunction();  // 출력: Alice (obj.name)

🔹 normalFunction()에서는 setTimeout 내부의 일반 함수가 this를 window로 변경해버림 → undefined
🔹 arrowFunction()에서는 화살표 함수가 this를 유지하므로 obj.name이 정상 출력

---

📌 정리

✅ 일반 함수(function)는 this가 호출 방식에 따라 바뀜 → setTimeout 안에서는 window(전역 객체)로 바뀌어 버림.
✅ 화살표 함수(=>)는 this를 바꾸지 않고, 선언된 위치의 this를 유지 → setTimeout 안에서도 this가 유지됨.
✅ 따라서 비동기 코드(setTimeout, setInterval)에서 this를 유지하고 싶다면 화살표 함수를 사용하면 된다. 🚀