【概要】
グローバルで使用するMapなどのキーにString型ではなくSymbol型を使うべき理由は、意図しないデータ変更を防ぐためです。
ただし、グローバルで使用せずMapのスコープが狭い場合やキーの重複が発生しない場合は、無理にSymbol型を使う必要はないです。
具体的なコードで確認していきます。
【コード】
Symbol型を使った方法
const symbolMap = new Map();
const hogeSymbol = Symbol('test');
const hugaSymbol = Symbol('test');
symbolMap.set(hogeSymbol, 'hoge');
symbolMap.set(hugaSymbol, 'huga');
console.log(symbolMap); // Map(2) {Symbol(test) => 'hoge', Symbol(test) => 'huga'}
String型を使った方法
const stringMap = new Map();
const hogeString = 'test';
const hugaString = 'test';
stringMap.set(hogeString, 'hoge');
stringMap.set(hugaString, 'huga');
console.log(stringMap); // Map(1) {'test' => 'huga'}
【コード解説】
Symbol型を使っていれば同じtestという文字列で宣言していても、キーが別の値と認識されるためmapのデータは上書きされていないです。
それに対してString型を使うとデータが上書きされていることが確認できます。
今回は短いコードでしたが、コードが多くなり複雑になるとキーが一意であることを確認するのが困難になります。
そうした中でString型をキーにしているとバグの温床となります。例えば、チーム開発で偶然AさんとBさんが共用のmapに同じキーを定義してしまう可能性もありえます。
【使いどころ】
Vueの場合ですがProvide/Injectのキーとして、Symbol型の値を使うべきだと思います。