以前、ドットインストールかなにかで自分が模写した、タイピングゲームのコードを見たのですが、どういう仕組みのコードか理解できませんでした。
そこで、以前はわからなくても写して終わりでしたが、今回は
調べてみました。
前置きが長くなりましたが、JavaScriptのspliceについて、
あまり理解してなかったことをまとめておきます。
word = words.splice(Math.floor(Math.random() * words.length), 1)[0];
spliceについては、私が調べた限りでは、
第一引数に追加・削除する位置、第二引数に削除する要素の数、第三以降は、追加する要素と説明する限りのものがほとんどだったので、
このコードの最後の[0]の意味が全くわかりませんでした。
そこで、コンソールでどう表示されるのか、一つ一つ確認してみました。
コードはこんな感じです。
let word;
const words = ["red","blue","green",'white'];
word = words.splice(Math.floor(Math.random() * words.length), 1)[0];
console.log(word);
console.log(Math.floor(Math.random() * words.length))
console.log(words)
そして実行結果は、
こんな感じでした。
つまり、spliceで削除したやつが、wordに入り、
残りがwordsに配列として格納されているということです。
では、[0]を消して、コンソールに表示してみると、
wordが配列として取得されてしまいました。
つまり、[0]の意味は、単に配列の０番目を取得するっていうだけでした。
目的は、変数wordに格納することなので、配列で格納してしまうと、
タイピングゲームの実装上面倒なので、[0]を付け加えて、
値を取得しています。
すごい初歩的なことでしたが、
割と悩みましたw
spliceだけ見ていると、「削除したから消えるんでしょ？」って
考えがちですが
このコードの場合、4つの要素からランダムに選ばれたものを
配列リストから削除し、定数wordに格納していました。
すなわち、実質的には、配列からランダムに要素を
取得しているようなものだったんです。
とまあ、至極当たり前のことなんですが、
初心者にとっては、結構引っかかりました。
splice=削除と、あまりに強く思い込みすぎて、
よくわからなくなりましたが、
コンソールで確認して、無事理解できたので、
メモを残しておきます。