部下の質問にきちんと答えるために自分のあいまいだった知識を改めて調べなおした#01

部下からもらった質問の中であいまいな回答しかできなかったことを後で調べて共有したものをメモとして。

要素の存在確認について

Q :「jquery 要素 存在確認」で検索すると.lengthで確認する方法と.size()で確認する方法がヒットしたけどどっち使えばいいのか？

個人的にずっと.length使ってたんだけど部下に.lengthと.size()の違いをハッキリ説明できなかったので
「jquery length size() 違い」とかで検索してたらそもそもバージョン3.0以降では廃止になったらしいのでどっちがどっちとかではなかった。
一応廃止の情報を見つけるまでに.size()は非推奨となっていて、その理由が.size()のメソッド内で.length呼んでるから単純に数数えるなら.lengthでよくない？とのこと。

.lengthを使ったif文の書き方

Q : なぜif文の条件がnum.lengthじゃだめなのか。

if (num.length) {
  // 処理
}

と書いていたので

if (num.length > 0) {
  // 処理
}

に直してーって伝えようと思ったけど、そもそもなぜnum.lengthじゃいけないのか説明しないとと思い、
自分の中にふわーっと認識していたものを改めて整理。
・if文の条件で変数だけ指定する場合は返り値がbooleanのもの。
・.lengthの返り値はbooleanではなく数値。
よってif文の条件をnum.lengthじゃなくてnum.length > 0で書いてほしい。

変数の定義

const $hoge = $('.hoge');

Q : この変数の先頭の$(ドルマーク)はなんのため？

Jqueryのオブジェクトだよーっていう印。
一目でjqueryの処理が加わるオブジェクトとわかるように。

メソッドの記述について

<div class="content-wrap">
  <div class="content"></div>
  <div class="content"></div>
</div>

const $content = $('.content');
$content[0].text('hoge');

Q : 1つめの.contentにテキストを追加したいのにエラーになる。

$()で要素を取得するとjquery用のオブジェクトになる。
jqueryオブジェクトに対してのメソッドの実行は問題なく実行されるが、
jqueryオブジェクトから取得した要素はjqueryオブジェクトに変換してあげないとエラーになる。
メソッドで取得した要素は対象外。find()やfirst()など。
メソッドは.で繋げて連続で使うことができる（メソッドチェーンという）。

$('.content').get(0).text('hoge');

https://api.jquery.com/get/#get-index
コメント頂いたので修正しました、ありがとうございました