変えられない配列

01 / 05

配列にも `readonly` が付けられる

オブジェクトのプロパティに readonly を付けて「あとから変えない」と宣言したのを覚えているかな。同じことが配列そのものにもできるよ。

書き方は、配列の型の前に readonly を置くだけ。readonly string[] は「読むだけの、文字列の配列」という意味になる。

const iro: readonly string[] = [  "あか",  "あお",];console.log(iro.length);

実行結果

02 / 05

readonly を付けた配列には、中身を変えるメソッドがついてこない。push を呼ぼうとすると「そんなプロパティは無い」と言われるよ。

「呼べるけれど怒られる」ではなくて「最初から無い」。かなり強い宣言だ。

const iro: readonly string[] = [  "あか",];iro.push("あお");

実行結果

型のエラー: プロパティ 'push' は型 'readonly string[]' に存在しません。

03 / 05

iro[0] = "きいろ" のように番号を指して入れかえる書き方も通らない。

const が守ってくれるのは「変数がどの配列を指すか」だけで、中身の書きかえは通ってしまうんだった。readonly はその中身のほうを守ってくれるよ。

const iro: readonly string[] = [  "あか",];iro[0] = "きいろ";

実行結果

型のエラー: 型 'readonly string[]' のインデックス シグネチャは、読み取りのみを許可します。

04 / 05

禁じられるのは書きかえだけだよ。length を見るのも、番号で取り出すのも、for...of で回すのも、ふつうの配列とまったく同じだ。

読むだけの配列だと型で宣言しておくと、うっかり書きかえる事故がその場で止まる。あとから触る人が決まりを知らなくても大丈夫になるんだ。

const iro: readonly string[] = [  "あか",  "あお",];for (const c of iro) {  console.log(c);}

実行結果

あか
あお

05 / 05

中身を足したくなったら、... で広げて新しい配列を作る。元の配列はそのまま残るよ。

push は元を書きかえるけれど、こちらは別のものを用意する。関数の引数を readonly にしておけば「この関数は受け取った配列を書きかえません」という約束になる。読む側がとても安心できるよ。ここから書いてみよう。

const iro: readonly string[] = [  "あか",];const fuyasu: readonly string[] = [  ...iro,  "みどり",];console.log(fuyasu);console.log(iro);

実行結果

["あか", "みどり"]
["あか"]