JSで"name"という変数を宣言すると「'name' is deprecated.」と出る件を調査！

はじめに

Udemyの”【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門”の講座内にて、nameという変数を宣言したところ下記のWarningが出たので調べてみました！

内容

記入したコード

const name = "art";
function log_name(name){
  console.log(name);
}

log_name(name);

発生したWarning

'name' is deprecated.

原因

変数nameがグローバルコンテキストの"window"オブジェクトにてすでに存在しているため、衝突を避けるためにWarningを出している（by ChatGPT）
解決策としては「変数名をnameから変更する」のが一番効果的。
どうしてもnameを使用したい場合は、グローバルスコープではなく関数やブロックスコープなどの閉ざされた環境だけであれば問題ない、とのこと！
さすがGPT先生！

実験

実際にwindow.nameの値を出力してみて値が更新されているのか確認してみる。

console.log(window.name); // 初期状態の window.name を出力、通常は空文字列 "" が出力される
const name = "Hello World";
console.log(name);        // "Hello World" が出力される
console.log(window.name);

実行結果は下記のようになった。

1:""(空文字)
3:Hello World
4:""

どうやらブラウザ側で上書きされないようにブロックしているみたい。
ちなみに明示的に値を指定するとちゃんと変更されていた。

console.log(window.name); // update
const name = "Hello World";
console.log(name);        // Hello World
console.log(window.name); // update
window.name = "update";
console.log(window.name); // update

上記のようにwindow.nameの値を代入するより前の値も切り替わっていておもしろい！
window.nameという特別な変数だからなのかな？
もしわかる方がいらっしゃれば教えていただけると嬉しいです！

おわりに

コードを書くのも、こういったなぜ？を調べていくのも楽しいですね！