javascriptの配列 バケツソートについて質問

Question

★下記は配列の練習問題の回答です。
バケツソートのアルゴリズムを再現してみよう　という趣旨のものでした。

const nums = [78, 16, 32, 4, 91, 45, 23, 66, 57, 89];
const buckets = []; // バケツとなる配列
const sorted = []; // 昇順でデータを入れる配列
for (let num of nums) {
// バケツに追加する処理
buckets[num] = num;
}
for (let i = 0; i < 100; i++) {
// バケツから順番に取り出す処理
if (buckets[i]) {
sorted.push(buckets[i]);
}
}
console.log(sorted);

これは何故一度 bucket　に numを移行しているのですか？

const nums = [78, 16, 32, 4, 91, 45, 23, 66, 57, 89];
const sorted = [];
for (let i = 0; i < 100; i++) {
// バケツから順番に取り出す処理
if (nums[i]) {
sorted.push(nums[i])
}
}
console.log(sorted);
// [4, 16, 23, 32, 45, 57, 66, 78, 89, 91] と出力

じゃダメなのは何故ですか？
numsの中の数字が　i　と一致したときに sortedに数字を入れる。だけですよね。何故一度bucketsにいれなくてはならないのかが分からないです。
sorted.push(nums[i])だとnumsの中の数字ではなくてインデックスをとることになるからということでしょうか。
だとすれば、buckets[i]だとインデックスにならないのは何故ですか。
もしかしてbucketsにいれるときに for of文を使用しているのはそこでインデックスではなく数値を取得しているためで、そのためにbucketsを使用しているということなのでしょうか。

もし上記であっているとしても、使い分けが難しいと感じます。自分で一から考えたいなーって思ったら、まず主要なアルゴリズムを学び、そのアルゴリズムを実装するにはどうしたら良いかを学ぶのが一番はやいのでしょうか。慣れたらどこでどのアルゴリズムを使用するか感覚でわかるようになりますか。