JQuery에서 두 요소를 비교하는 방법

클론코딩 연습중 JQuery로 모바일 GNB를 구현하면서,
GNB영역이 열려있을 때 바깥부분을 클릭하면 사라지는 기능을 구현하고있었다.

$(document).click(function(e){
    if( $('.gnb-area').hasClass('on') == 1 ){
        
        if( $('.gnb-area').has(e.target).length == 0 ){
            $('body').removeClass('dimmed');
            $('.gnb-area').removeClass('on');
        }
    }
})

문제는 GNB 오픈 버튼이 GNB영역 외부에 있기 때문에 버튼을 눌러도 열리지 않았다.

그래서 클릭한 타겟이 열기버튼이라면 클래스를 없애지 않도록 추가요청을 해야해서 타겟과 버튼요소가 같은지 비교가 필요했는데,

계속 시도해봐도 원하는 결과값이 나오지 않았다.
console.log으로 확인해가면서 확인해도 항상 false...

$(document).click(function(e){
	console.log($('.gnb-btn') == e.target) //false
  	console.log($('.gnb-btn').has(e.target).length) // 0
})

분명 e.target만 콘솔로그 찍어보면 저것이 .gnb-btn이 맞는데 ..?!
대체 왜 안되는거지 ? 하고 찾아보니까 이유가 있었다.

jQuery는 함수를 호출 할 때마다 새 객체가 생성되어 반환되기 때문에,
같은 선택기의 동등 검사조차 늘 false라고 뜬다고 함.

해결 방법 1

// $('div.abc')[0] == $('div#abc')[0]
$('.gnb-btn')[0] == e.target

해결 방법 2

//ab.is(bc)
$('.gnb-btn').is(e.target)