JavaScriptの`fill()`メソッドは配列の全要素を指定した値で埋める便利なメソッドです。このメソッドを使うことで、配列の初期化や値の一括設定を簡単に行うことができます。

fill()メソッドの基本的な使い方

`fill()`メソッドの基本的な構文は以下の通りです：

array.fill(value[, start[, end]])
  • `value`: 配列を埋める値
  • `start`: 開始インデックス（省略可能）
  • `end`: 終了インデックス（省略可能）

基本的な使用例

// 配列の全要素を0で埋める
const numbers = new Array(5).fill(0);
console.log(numbers); // [0, 0, 0, 0, 0]

// 既存の配列の要素を書き換える
const fruits = ['apple', 'banana', 'orange'];
fruits.fill('grape');
console.log(fruits); // ['grape', 'grape', 'grape']

部分的な塗りつぶし

開始インデックスと終了インデックスを指定することで、配列の特定の範囲だけを塗りつぶすことができます：

const numbers = [1, 2, 3, 4, 5];
numbers.fill(0, 2, 4);
console.log(numbers); // [1, 2, 0, 0, 5]

実践的な使用例

2次元配列の初期化

// 3x3の2次元配列を0で初期化
const matrix = Array(3).fill().map(() => Array(3).fill(0));
console.log(matrix);
// [[0, 0, 0],
//  [0, 0, 0],
//  [0, 0, 0]]

デフォルト値の設定

// ユーザー設定のデフォルト値を設定
const defaultSettings = new Array(3).fill({
  theme: 'light',
  notifications: true,
  language: 'en'
});

注意点

オブジェクトを値として使用する場合

オブジェクトを`fill()`の値として使用する場合、全ての要素が同じオブジェクトへの参照を持つことに注意が必要です：

// 危険な例
const array = new Array(3).fill({ count: 0 });
array[0].count = 1;
console.log(array); // [{ count: 1 }, { count: 1 }, { count: 1 }]

// 正しい使用例
const array = new Array(3).fill().map(() => ({ count: 0 }));
array[0].count = 1;
console.log(array); // [{ count: 1 }, { count: 0 }, { count: 0 }]

まとめ

`fill()`メソッドは配列の要素を簡単に初期化できる便利なメソッドです。基本的な使い方は簡単ですが、オブジェクトを扱う際は参照の扱いに注意が必要です。特に：

  • 配列全体または特定範囲の要素を同じ値で埋めることができる
  • 開始インデックスと終了インデックスを指定して部分的な塗りつぶしが可能
  • オブジェクトを値として使用する場合は、参照の問題に注意する

これらの点を押さえておけば、`fill()`メソッドを効果的に活用できるでしょう。