[Angular] 콜백function안에서 다른 function호출시 에러발생할때

setTimeout함수를 예시로 사용했다.

일반함수(function)는 this가 바인딩되기때문에 5,6Line의 getApprovalDetail() 호출시 에러가 발생함. 

(ERROR TypeError: this.getApprovalDetail is not a function)

화살표함수(Arrow Function)사용시 this가 바인딩안되서, this.getApprovalDetail()이 정상적 호출되는것을 확인 할 수 있음.

// 에러발생 예제
getApproval(){
    setTimeout(function(){
        try{
            // getApprovalDetail(); // 에러발생
            this.getApprovalDetail(); // 에러발생
        }catch(e){
            alert("에러발생 : " + e);
        }
    }, 500);
}
 
getApprovalDetail(){
    alert("getApprovalDetail() 호출!!");
}
 
//=====================================================
// 화살표 함수(Arrow Functions) 사용예제
getApproval(){
    setTimeout(()=>{
         this.getApprovalDetail(); // 호출됨
    }, 500);
}
 
getApprovalDetail(){
    alert("getApprovalDetail() 호출!!");
}

개발하기전에 블로그를 읽어봤음에도 까먹고있다가 헤멨닼ㅋ

깨우치고나서 다시 읽어보니 해당내용이 있었다.

Javascript - 화살표 함수(Arrow Functions) : https://www.a-mean-blog.com/ko/blog/%ED%86%A0%EB%A7%89%EA%B8%80/_/Javascript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-Arrow-Functions