javascriptでsplice()を使ったプログラムが理解できません。。

Question

前提・実現したいこと

ドットインストールでjavascriptを学んでいます。
その中で数字タッチゲームを作っています。
その中で、splice()を使ったプログラムが理解できませんでした。

発生している問題・エラーメッセージ

const num = nums.splice(Math.floor(Math.random() * nums.length), 1)[0];

のところで、最後に配列[0]をつけていることがわかりません。
[0]をつけずに実行したところプログラムは[0]をつけた時と同じように動いていました。
[0]をつけなくても、ランダムにnumsからひとつずつ要素を取りだして、numに代入されるのではないですか？

該当のソースコード

'use strict';

{
class Panel {
constructor() {
this.el = document.createElement('li');
this.el.classList.add('pressed');
}

getEl() {
return this.el;
}

activate(num) {
this.el.classList.remove('pressed');
this.el.textContent = num;
}
}

class Board {
constructor() {
this.panels = [];
for (let i = 0; i < 4; i++) {
this.panels.push(new Panel());
}
this.setup();
}

setup() {
const board = document.getElementById('board');
this.panels.forEach(panel => {
board.appendChild(panel.getEl());
});
}

activate() {
const nums = [0, 1, 2, 3];

this.panels.forEach(panel => {
const num = nums.splice(Math.floor(Math.random() * nums.length), 1)[0];
panel.activate(num);
});
}
}

const board = new Board();

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
board.activate();
});
}

試したこと

MDNでも調べたのですが、
「取り除かれた要素を含む配列です。要素が 1 つのみ削除された場合は、要素数 1 の配列が返されます。要素が削除されなかった場合、空の配列が返されます。」
と記載されており、最後に配列をつけるとは書いてなかったため、疑問のままです。。

Comments

[m.ts10806]

>MDNでも調べたのですが、
出典をURLで明示してください。

[miiiiiko]

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

[m.ts10806]

質問本文に提示していただけたらと。

Answer 1

[0]をつけなくても、ランダムにnumsからひとつずつ要素を取りだして、numに代入されるのではないですか？

動作は違います。spliceの返り値は切り出した配列なので、[0]なしだとnumには1個だけの配列が入ります。[0]をつければ入っていた値が取れます。

この1個だけの配列がPanel.activateに引き渡されますが、this.el.textContent = num;で文字列化しているだけなので、1個の配列を文字列化する処理となり、[0]の中身がそのまま文字列化されます。

ということで、[0]なしでもたまたま動いてしまっていただけです。

Answer 2

最後に配列[0]をつけていることがわかりません。

spliceで得られるデータが配列だからです
データが配列の場合１個しかデータがなくても[0]をつけて得ないといけません