初級

カンマの付け忘れで出る SyntaxError の原因と直し方

配列・オブジェクトの要素や関数の引数を並べる際、区切りのカンマを付け忘れたときに出る構文エラーです。改行で区切っているつもりでも、JavaScriptはカンマが無いと1つの要素の続きとして読もうとします。

エラーメッセージの読み方

main.js:1

main.js

ファイル名

1

行番号 — Node.jsが構文解析を諦めた位置

SyntaxError

エラークラス — 実行前の構文チェックで検出されました

Unexpected identifier 'age'

内容 — 期待していたもの、または受け付けられなかったもの

このエラーが出る典型パターン

 1  const user = { name: "Al"  age: 20 };
                             ^
 2  console.log(user.age);

 1  function add(a, b) {
 2    return a + b;
 3  }
 4  console.log(add(2  3));
                     ^

 1  const nums = [1, 2  3];
                      ^
 2  console.log(nums.length);

 1  function sum3(a, b, c) {
 2    return a + b + c;
 3  }
 4  console.log(sum3(1, 2  3));
                         ^

 1  const [a  b] = [1, 2];
            ^
 2  console.log(a + b);

よくある誤解

改行して書けば要素ごとに区切られると思われがちですが、JavaScriptの構文はカンマそのものを区切りとして見ています。改行は区切りとして扱われません。

実務での勘所

JavaScriptにはASI(自動セミコロン挿入)という、行末で文が終わっていると判断できる場合にセミコロンを自動的に補ってくれる仕組みがあります。この仕組みのおかげで多くの場面でセミコロンを省略しても動くため、「改行が区切りの役割を果たすことがある」という感覚を持ちやすくなります。しかしASIはあくまで文と文の区切りのための仕組みで、配列やオブジェクトの要素、関数の引数を区切るカンマの代わりにはなりません。この非対称を知らないと、なぜ改行だけでは区切れないのか腑に落ちにくくなります。

演習をはじめる

関連するエラー

• 括弧の閉じ忘れで出る SyntaxError の原因と直し方丸括弧・波括弧・角括弧の閉じ忘れで出る構文エラーです。
• const宣言で初期値を書き忘れた原因と直し方constで変数を宣言する際に初期値を書き忘れたときに出るエラーです。