[JavaScript] this 문맥이 달라질 때 해결법 (콜백함수의 this 이해하기)

오늘 댓글 수정/등록 기능 구현하다가 this 때문에 발생한 TroubleShooting 정리...🤔

 

# 문제상황

처음에 이렇게 작성했는데 this가 undefined로 나옴

// 수정/등록 버튼 클릭 이벤트
$("#btnSaveEdit").on("click", function(e) {
    saveComment(true);  // 수정 모드
});

$("#btnSave").on("click", function(e) {
    saveComment(false);  // 신규 작성 모드
});

// 댓글 저장 함수
function saveComment(isEdit) {
    var content = isEdit 
        ? $(this).closest("tr").find(".comment-edit").val()  // 여기서 this가 undefined
        : $("#commentContent").val();
        
    // ... 나머지 로직
}

 

 

 

# 원인

콜백함수로 전달될 때 this의 컨텍스트가 달라짐.

이벤트 핸들러 안에서의 this는 이벤트가 발생한 요소를 가리키는데,

그 this를 다른 함수에 그냥 넘기면 컨텍스트가 바뀌어서 undefined가 됨

 

 

# 해결방법

이벤트가 발생한 요소(this)를 파라미터로 전달해서 사용

$("#btnSaveEdit").on("click", function(e) {
    saveComment(true, this);  // 클릭된 요소를 전달
});

$("#btnSave").on("click", function(e) {
    saveComment(false, this);
});

function saveComment(isEdit, element) {
    var $btn = $(element);  // jQuery 객체로 변환
    var content = isEdit
        ? $btn.closest("tr").find(".comment-edit").val()
        : $("#commentContent").val();
        
    // ... 나머지 로직
}

 

 

 

 

# 다른 해결 방법들

1. bind() 사용

saveComment.bind(this, isEdit)

 

2. 화살표 함수 사용 (this가 렉시컬 스코프를 유지)

const saveComment = (isEdit) => {
    // this가 상위 스코프의 this를 그대로 사용
}

 

 

# 주의사

• 콜백함수에서 this 사용할 때는 항상 컨텍스트 확인하기
• 제일 간단한 방법은 그냥 파라미터로 넘기기
• this 바인딩 방식은 상황에 따라 선택

이거 때문에 한참 걸렸다... 다음에는 바로 파라미터로 넘겨야지 😅