カンマの付け忘れで出る SyntaxError の原因と直し方
配列・オブジェクトの要素や関数の引数を並べる際、区切りのカンマを付け忘れたときに出る構文エラーです。改行で区切っているつもりでも、JavaScriptはカンマが無いと1つの要素の続きとして読もうとします。
エラーメッセージの読み方
main.js:1
main.js- ファイル名
1- 行番号 — Node.jsが構文解析を諦めた位置
SyntaxError- エラークラス — 実行前の構文チェックで検出されました
Unexpected identifier 'age'- 内容 — 期待していたもの、または受け付けられなかったもの
このエラーが出る典型パターン
パターン1
1 const user = { name: "Al" age: 20 }; ^ 2 console.log(user.age);
main.js:1
const user = { name: "Al" age: 20 };
^^^
SyntaxError: Unexpected identifier 'age'
オブジェクトリテラルのプロパティ同士はカンマで区切ります。改行しているだけでは区切りとして認識されません。
直し方: （空） を , にします。
広告
広告スロット（未設定）
パターン2
1 function add(a, b) { 2 return a + b; 3 } 4 console.log(add(2 3)); ^
main.js:4
console.log(add(2 3));
^
SyntaxError: missing ) after argument list
関数の引数もカンマで区切ります。スペースで区切っただけでは、Node.jsは閉じ括弧を探し続けます。
直し方: （空） を , にします。
パターン3
1 const nums = [1, 2 3]; ^ 2 console.log(nums.length);
main.js:1
const nums = [1, 2 3];
^
SyntaxError: Unexpected number
配列の要素もカンマ区切りが必須です。数値が並んでいるだけでは1つの式として解釈されずエラーになります。
直し方: （空） を , にします。
よくある誤解
改行して書けば要素ごとに区切られると思われがちですが、JavaScriptの構文はカンマそのものを区切りとして見ています。改行は区切りとして扱われません。
まとめ
カンマの付け忘れで出る SyntaxErrorは初級でつまずきやすい項目です。上の3パターンを実際に手で直すと、エラーメッセージのどこを読めばよいかが掴めます。