jQueryで要素がない場合のエラーを防ぐ

See the Pen 要素がないとエラーになるのを防ぐ(エラーサンプル) by takapen (@takapen) on CodePen.

この状態でコンソールを見ると、下記のようなエラーが出ていることがわかると思います。

jQuery.Deferred exception: Cannot read property 'match' of undefined
TypeError: Cannot read property 'match' of undefined
Uncaught TypeError: Cannot read property 'match' of undefined


matchが関わるところが無かったらエラーになるのですが、pickup内に必ずimgはある想定で、htmlは全部コメントアウトしてpickupは存在しないものとして書いています。

$(function () {
//  if($('#pickup').length){

    var pickupImg = $('#pickup__img img');
    var pickupName = $('#pickup__name');
    var src = pickupImg.attr('src').match(/img\/(.+).jpg/);
    var srcName = src[1];

    pickupName.html(srcName);
    
//  }
});

「要素.length」で要素の有無を判定してます。
その要素があれば、if文の中のjsが実行されるのでエラーにはなりません。

完成

See the Pen 要素がないとエラーになるのを防ぐ（完成） by takapen (@takapen) on CodePen.