【JS】document.getElementById('id名') と $('#id名')が違う

背景
下記みたいなコードがある。

例１.javascript

const resetBtn = document.getElementById('reset-btn');

if (resetBtn) {  //要素が存在する場合
     //何かの操作
} else {  //要素が存在しない場合
    filter_setting();
}

const resetBtn = document.getElementById('reset-btn');をconst resetBtn = $('#reset-btn');に変えると、下記となる。

例２.javascript

const resetBtn = $('#reset-btn');

if (resetBtn) {  //要素が存在する場合
    //何かの操作
} else {  //要素が存在しない場合
    filter_setting();
}

問題
resetBtnが「存在していない」のに、filter_setting();が実行されない。

原因
例１の場合、resetBtnには、id="reset-btn"のDOM要素そのものが代入される。
例２の場合、resetBtnには、id="reset-btn"の要素をラップしたjQueryオブジェクトが代入される。
（DOM要素そのものを取り出すにはresetBtn[0]やresetBtn.get(0)を使う。）

JavaScriptのif (resetBtn)チェックは、jQuery オブジェクトが常に真と評価されるため、filter_setting(); の条件が満たされない。

解決策
jQuery を使って、要素が存在するかどうかをチェックするには .length を確認する。

const resetBtn = $('#reset-btn'); 

if (resetBtn.length > 0) {  //要素が存在する場合
     //何かの操作
} else {  //要素が存在しない場合
    filter_setting();
}