Array.prototype.fill()にオブジェクトをそのまま渡してハマった

知らなくてハマったのでこれから知らなくてハマる人のために書きます。

顛末

最初は単純な二次元配列でやっていたところを状態持たせようとオブジェクトに変更してハマりました。お馬鹿さんですね。

maze-text-generator | m19e

const fillArray = arr => {
  // before
  // fillにそのままオブジェクトを渡してはダメです
  return arr.map(x => new Array(x.length).fill({char: 'ほ', blacklist: []}))
}

const maze = fillArray(generateEmptyArray([5,10]))
/*
ほほほほほ
ほほほほほ
ほほほほほ
ほほほほほ
ほほほほほ
ほほほほほ
ほほほほほ
ほほほほほ
ほほほほほ
ほほほほほ

charだけ抜き出すとこう
*/

maze[0][0]['char'] = '黒'

/*
黒黒黒黒黒
ほほほほほ
ーー略ーー
ほほほほほ
ほほほほほ

え？
*/

わけがわからない。

解決

const fillArray = arr => {
  // after
  // fillしたあとにmapで埋めてあげるといい感じ
  return arr.map(x => new Array(x.length).fill().map( x => { return {char: 'ほ', blacklist: []} }))
}

const maze = fillArray(generateEmptyArray([5,10]))

maze[0][0]['char'] = '黒'

/*
黒ほほほほ
ほほほほほ
ーー略ーー
ほほほほほ
ほほほほほ

ヨシ!
*/

解決したのでテキストを埋め込む再帰関数に投げます。

fillGrid(maze, [...'黒猫列車はお客様第一'])

/*
黒ほほほほ
猫ほほほほ
列ほほほほ
車客様ほほ
はお第一ほ
ほほほほほ
ほほほほほ
ほほほほほ
ほほほほほ
ほほほほほ

にゃあん!
*/

ありがとうございました。

補遺

よく考えたらArray.prototype.fill()自体使わなくていいのでは？

const generateFilledArray = (x, y) => {
  return [...Array(y)].map(_=>[...Array(x)].map(_=>({char: 'ほ', blacklist: []})))
}

fillGrid(generateFilledArray(10,10), [...'銀河を繋ぐ黒猫列車、本日ひとりめのお客様がご乗車ですっ'])

/*
銀河ぐ黒猫列車ほほほ
ほを繋ほ日本、ほほほ
ほほほほひとりめのほ
ほほほほ車乗ほ客おほ
ほほほほでごが様ほほ
ほほほっすほほほほほ
ほほほほほほほほほほ
ほほほほほほほほほほ
ほほほほほほほほほほ
ほほほほほほほほほほ

いいでしょう!
*/

参考

Array.prototype.fill() with object passes reference and not new instance - Stack Overflow
[エンジニアのハマり時間とその技術的難易度の相関関係] (https://qiita.com/jabba/items/b0a0f8c310e164b4db2b)