【JavaScript】shorthand property(ショートハンドプロパティ)とは何か？エラーの対処法：Uncaught SyntaxError: Invalid shorthand property initializer（初心者向け、わかりやすい、プロパティ名の省略）

JavaScript

2023/9/142024/2/21

記事内に広告が含まれていることがあります。

JavaScriptの処理を使っていると「shorthand property」という文言が入ったエラーが発生することがあります。

「shorthand property（ショートハンドプロパティ）」は非常によく使う記述ですが、知らないと予期しない動作になったりエラーが発生する原因になります。

ここではshorthand property（ショートハンドプロパティ）とは何か？をエラー事例やその原因と対処法などの観点から実例で解説しています。

エラーの例

例えば、以下のような場合に「shorthand property」を含んだエラーが発生します。

obj = {a=1}

//Uncaught SyntaxError: Invalid shorthand property initializer

他にも、以下のようなエラーが発生する場合があります。

return { rows= _rows }

Module parse failed: Shorthand property assignments are valid only in destructuring patterns

（※destructuring patternsは分割代入のことです）

どちらもオブジェクトの「プロパティ名」と「値」を「=」を結んだことが原因です。

修正対象法は、シンプルに「=」を「:」に変換すれば解決します。

//obj = {a=1}
obj = {a:1}

//return {rows= _rows}
return {rows: _rows}

エラーメッセージの中で出てきた「shorthand property」とは、「プロパティ名」と「値となる変数名」が同じ場合にプロパティ名を省略する書き方のことです。

具体的には、変数名のみを記述すると、自動的に変数名をプロパティ名として設定してくれる便利な省略表記です。

「shorthand」とは英語で「簡略化した」という意味です。このため、簡略化したプロパティという意味になります。

{ プロパティ名: 変数名 }

　　↓ 「変数名」＝「プロパティ名」の場合

{ 変数名 }

上記のエラーでは、プロパティ名に対して「:」を記述しなかったことで、「shorthand property」とみなされたが、間にイコールがあるためエラーになっています。

point

オブジェクトの{ } の中で、変数名だけ記述すると自動的に、その変数名がプロパティ名となります。

例えば、「msg」という変数（定数）が定義してあるとします。

これを使ってプロパティ名「msg」値に変数としての「msg」を指定する場合は以下のようになります。

const msg = "メッセージ"
obj = { msg: msg }

これを、省略形のshorthand propertyで書くと以下のようになります。

const msg = "メッセージ"
obj = { msg }

console.log( obj )

//出力
{msg: 'メッセージ'}

値になる変数が定義されていないときはエラーになります。

obj = { msg }

Uncaught ReferenceError: msg is not defined

エラーの例で「destructuring patterns（分割代入）」という記述もありました。分割代入とは何かについては下記をご参考ください。