javascript エラー「Uncaught SyntaxError: Invalid destructuring assignment target」の解決方法

作成日 2023.01.08
javascript
javascript

javascriptで、エラー「Uncaught SyntaxError: Invalid destructuring assignment target」が発生した場合の原因と解決方法を記述してます。「関数」の引数にオブジェクトなどをそのまま指定した場合に発生します。「chrome」や「firefox」や「safari」の各ブラウザのエラーメッセージの画像もキャプチャしてます。

1. 環境
2. エラー内容
3. 原因
4. 解決方法
5. その他のエラー
- 5.1. 配列をそのまま使用
- 5.2. オブジェクトをカンマ区切り

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 108.0.5359.125

Javascript サンプル集はこちら

エラー内容

以下の、オブジェクトを初期値に設定した関数で発生。

function fn({key: "value"}) {
};

fn();

エラーメッセージ

Uncaught SyntaxError: Invalid destructuring assignment target

画像

firefox106の場合では、以下のエラーが発生します。

Uncaught SyntaxError: missing variable name

画像

safari15.5では、以下のエラーとなります。

SyntaxError: Unexpected string literal "value". Expected a parameter pattern or a ')' in parameter list.

画像

原因

「関数」に使用するデフォルト値は変数への代入が必要なため

解決方法

変数へ代入してから使用します。

function fn(obj = {key: "value"}) {
  console.log(obj);
};

fn(); // {key: 'value'}

その他のエラー

配列をそのまま使用

変数に代入せずに配列を使用しても同様のエラーが発生します。

// Uncaught SyntaxError: Invalid destructuring assignment target
function fn(['aaa','bbb']) {
};

fn();

こちらも変数に代入してから使用します。

function fn(arr = ['aaa','bbb']) {
  console.log(arr);
};

fn(); // ['aaa', 'bbb']

オブジェクトをカンマ区切り

オブジェクトをカンマ区切りで指定した場合も同様のエラーが発生します。

const obj = {id: 1}, {name: 'mebee'}
// Uncaught SyntaxError: Invalid destructuring assignment target

括弧を除いて定義します。

const obj = {id: 1,name: 'mebee'};