JavaScriptの'z'['toUpperCase']()はどのように、そしてなぜ機能するのか？

JavaScriptの'z'['toUpperCase']()はどのように機能するのか

JavaScriptのtoUpperCase()メソッドは、文字列を大文字に変換するためのメソッドです。通常はドット記法を使って次のように書きます。

'z'.toUpperCase(); // "Z" を返す

しかし、実はブラケット記法（角括弧記法）を使っても同じ結果が得られます。

'z'['toUpperCase']; // メソッドそのものを参照

さらに、末尾に () を付けて呼び出せば、実際に大文字への変換が実行されます。

'z'['toUpperCase'](); // "Z" を返す

これは、次のコードと同じ意味になります。

alert('z'.toUpperCase());

なぜプリミティブ値でメソッドが使えるのか

ここで注目すべきは、「'z'」がオブジェクトではなくプリミティブ値（文字列型の基本値）であるという点です。本来、プリミティブ値にはプロパティやメソッドが存在しません。

ところが、JavaScriptではプリミティブな文字列に対してプロパティやメソッドへアクセスしようとすると、エンジンが内部で一時的にラッパーオブジェクト（Stringオブジェクト）を自動生成します。このオブジェクトがtoUpperCaseなどのメソッドを持っているため、プリミティブ値に直接メソッドがあるかのように動作するのです。

内部的にはおおよそ次のような流れで処理されています。

// 概念的にはこのように動作している
const temp = new String('z');
temp.toUpperCase(); // "Z"
// 処理後、一時的なオブジェクトは破棄される

ドット記法とブラケット記法の違い

'z'.toUpperCase()と'z'['toUpperCase']()は、どちらも同じメソッドを呼び出しています。違いはプロパティ名の指定方法だけです。

• ドット記法：シンプルで可読性が高く、通常はこちらが推奨されます。
• ブラケット記法：プロパティ名を変数や式で動的に指定したい場合に有効です。

const methodName = 'toUpperCase';
'z'[methodName](); // "Z"

まとめ

'z'['toUpperCase']()が機能するのは、JavaScriptがプリミティブ値に対して一時的なStringラッパーオブジェクトを自動的に生成するためです。ブラケット記法は動的なメソッド呼び出しに便利ですが、通常のコードでは可読性の高いドット記法を使用するのがよいでしょう。