JavaScript勉強中のNです。
今回はコードを書いているときに、やってしまったミスを3つご紹介します。
これは、初心者ミスあるあるでしょうか？学習中の方の参考になれば幸いです。
①value を忘れる
let word = document.getElementById(“word”);
let wordValue = word.value; //←ここの.valueを忘れました。
💥 何が起きる？
input要素そのものが入ってしまい、文字列ではなくなります。
input要素は「入力欄そのもの」で、valueは「その中に入力された文字」です。
そのため、以下のような処理がうまく動きません。
wordValue.includes(name)
➡エラーになる or 意図通り動かない（文字列ではないので includes が使えない）
💡 ポイント
・ getElementById は「要素」を取る
・ .value をつけて「中身（文字）」を取る
「要素」と「値」は別物と意識するのが大事
②return をループ内に書く
関数の中にfor文があって、さらにそのfor文の中にif文があるコードを書いたのですが、returnの位置を間違えました。
for (let i = 0; i < books.length; i++) {
if (条件) {
return; //←位置の間違い
}
}
💥 何が起きる？
1回条件に入った瞬間に処理が全部終了する（for文だけでなく関数ごと終わる）
本当は
・すべての要素をチェックしたいのに
・途中で止まってしまう
💡 正しい考え方
return は「関数を終了する」
今回のようなケースでは：全部チェックしたい → returnは外
③addEventListener に ( ) をつける
button.addEventListener(“click”, putAway);
ここで ( ) をつけてしまいました。
button.addEventListener(“click”, putAway());
💥 何が起きる？
ページ読み込み時に関数が実行されてしまう
・クリックしても何も起きない
・もしくは最初に処理が走る
💡 なぜ？
・putAway → 関数そのもの（渡している）
・putAway() → 関数を実行した結果
addEventListener は
「あとで実行するために関数を渡す」もの（＝クリックされたときに実行される）
まとめ
今回のミスはすべて、
「JavaScriptが何を扱っているのか」を意識できていなかったこと
が原因でした。
・要素なのか値なのか（①）
・処理の流れ（②）
・関数そのものか実行か（③）
このあたりは最初かなり混乱しやすいポイントだと思います。
どれも動かしてみて初めて気づくミスでした。
同じミスを何度もしてしまいますが、その分理解が深まっている気がします。
初心者の方は「自分だけじゃない」と思ってもらえたら嬉しいです。