オブジェクト: obj[key]はobj[key-string]ではないのはなぜですか?

[annaPanda8170]

URL : https://github.com/asciidwango/js-primer/blob/master/source/basic/object/README.md

ブラケット記法を用いたプロパティ定義は、オブジェクトリテラルの中でも利用できます。 オブジェクトリテラル内でのブラケット記法を使ったプロパティ名はComputed property namesと呼ばれます。 Computed property namesはES2015から導入された記法ですが、式の評価結果をプロパティ名に使う点はブラケット記法と同じです。

次のコードでは、Computed property namesを使いkey変数の評価結果である"key-string"をプロパティ名にしています。

const key = "key-string";
// Computed Propertyで`key`の評価結果 "key-string" をプロパティ名に利用
const obj = {
    [key]: "value"
};
console.log(obj[key]); // => "value"

最後の1行は
console.log(obj[key-string]); // => "value"
ではないでしょうか？

[azu]

key-stringとして実行してみるとわかると思いますが、次のようにエラーとなります。

const key = "key-string";
// Computed Propertyで`key`の評価結果 "key-string" をプロパティ名に利用
const obj = {
    [key]: "value"
};
console.log(obj[key-string]); // => Uncaught ReferenceError: string is not defined

元のサンプルコードはComputed property namesを使って、
objオブジェクトの"key-string"プロパティ名に対して "value" という値を入れて、
そのobjオブジェクトの"key-string"プロパティの値をコンソールに出力するという例ですね。

そのため、最後の行である

console.log(obj[key]); // => "value"

は

console.log(obj["key-string"]); // => "value"

と書いても結果は同じになります。

ブラケット記法（[]）内に書いた式は評価して、その結果をプロパティ名に利用できるからですね。
そのため、変数 key の評価結果である "key-string" をプロパティ名として指定しています。

---

次のように書くと、違う結果になります。

console.log(obj[key-string]);

これは、JavaScriptの変数名には-は使えないため、
key-string は 変数key から 変数string をマイナス演算子（-）で減算していると解釈されます。

分かりやすく書くと、次のように書いた場合と同じです。

console.log(obj[key - string]);

このときに string という変数はそもそも定義されていないため、Uncaught ReferenceError: string is not defined というstringが定義されていないというエラーとなります。