화살표 함수(Arrow Function)는 일반 함수와는 다른 동작 방식을 가지고 있다. 화살표 함수는 함수를 선언할 때 this를 자신의 스코프에서 바인딩하지 않고, 주변 범위(lexical scope)의 this를 그대로 사용한다. 이로 인해 일반 함수에서 발생하는 this 오류를 피할 수 있다.
일반 함수 내에서의 this는 함수가 호출될 때마다 동적으로 결정된다. 때문에 이벤트 핸들러와 같이 콜백 함수 형태로 사용되는 경우 this가 원하는 객체를 가리키지 않는 문제가 발생할 수 있다. 이 문제를 해결하기 위해 일반 함수 내부에서 this를 다른 변수에 저장하거나 bind() 메서드를 사용하여 명시적으로 this를 설정해야 한다.
반면에 화살표 함수는 this를 자신이 아닌 주변 스코프의 this를 따르므로, 일반 함수의 this 오류를 방지할 수 있다. 이러한 특성 때문에 일반 함수보다 코드가 간결해지고, this를 유지하기 위한 별도의 작업 없이도 원하는 대로 this를 사용할 수 있다.
- 화살표 함수 (Arrow Functions):
화살표 함수는 자신만의 this를 생성하지 않고, 외부 스코프의 this를 사용합니다. 즉, 함수가 선언된 시점의 this를 그대로 유지한다. 따라서, 화살표 함수를 사용하면 this 바인딩을 회피할 수 있다.
예를 들어, 다음과 같은 코드가 있다고 가정해본다:
typescriptCopy code
class Example {
private value: number = 42;
doSomething() {
setTimeout(() => {
console.log(this.value);
}, 1000);
}
}
const instance = new Example();
instance.doSomething();
위의 코드에서 화살표 함수를 사용하면, setTimeout 함수 내부에서 this가 Example 클래스의 인스턴스를 가리키게 된다. 따라서 this 회피를 할 수 있다.
- 일반 함수:
일반 함수는 호출하는 방법에 따라 this가 동적으로 결정된다. 함수가 호출될 때, 호출한 객체에 따라 this가 바뀌기 때문에 예상치 못한 this 바인딩으로 인한 오류가 발생할 수 있다. 이런 경우에는 this 바인딩을 명시적으로 처리해야 한다.
아래는 일반 함수에서 this를 그냥 사용하면 에러가 나타난다.:
typescriptCopy code
class Example {
private value: number = 42;
doSomething() {
setTimeout(function() {
console.log(this.value);
//에러 'this' implicitly has type 'any' because it does not have a type annotation.(2683)
//'this'는 형식 주석이 없기 때문에 암묵적으로 'any' 형식을 가집니다. (2683)
}, 1000);
}
}
const instance = new Example();
instance.doSomething();
아래는 일반 함수에서 this를 명시적으로 처리하는 예시다:
typescript
Copy code
class Example {
private value: number = 42;
doSomething() {
const self = this;
setTimeout(function() {
console.log(self.value);
}, 1000);
}
}
const instance = new Example();
instance.doSomething();위의 코드에서 this를 self라는 변수에 저장하여 사용함으로써 this 회피를 할 수 있다.
요약하자면, 화살표 함수는 자신만의 this를 생성하지 않고 외부 스코프의 this를 그대로 사용하여 this 회피를 할 수 있다. 반면에 일반 함수는 호출하는 방법에 따라 this가 동적으로 결정되므로 명시적으로 처리해주어야 한다. 타입스크립트에서는 이러한 차이점을 이해하고 적절한 상황에 적절한 함수를 사용하면 된다.
