SyntaxError: Unexpected token

1
2
3
4
5
6
7
8
9

// NG
function foo( {
  console.log('hello');
}

// OK
function foo() {
  console.log('hello');
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// NG: 末尾カンマ（古いブラウザ）
const obj = {
  a: 1,
  b: 2,  // IE11で問題
};

// NG: カンマ忘れ
const arr = [1 2 3];

// OK
const arr = [1, 2, 3];

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// NG: クォートの不一致
const str = "hello';

// NG: 改行を含む
const str = "hello
world";

// OK: テンプレートリテラル
const str = `hello
world`;

1
2
3
4
5
6
7
8
9

// NG: 複数行で括弧がない
const fn = () =>
  const x = 1;  // SyntaxError

// OK
const fn = () => {
  const x = 1;
  return x;
};

1
2
3
4
5

// NG: シングルクォート（JSONは無効）
JSON.parse("{'key': 'value'}");

// OK
JSON.parse('{"key": "value"}');

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// サーバーがHTMLを返した場合
// SyntaxError: Unexpected token '<'

// デバッグ
fetch('/api/data')
  .then(res => {
    console.log(res.headers.get('content-type'));
    return res.text();  // 一旦テキストで確認
  })
  .then(text => {
    console.log(text);  // HTMLが返ってきていないか確認
  });

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// NG: awaitがasync関数の外
const data = await fetch('/api');

// OK
async function getData() {
  const data = await fetch('/api');
  return data;
}

// OK: Top-level await（ES2022、モジュールのみ）
// type="module" で読み込まれたスクリプト
const data = await fetch('/api');

1
2
3
4
5

// Node.js 14未満ではエラー
const name = user?.profile?.name;

// 互換性のある書き方
const name = user && user.profile && user.profile.name;

1
2
3
4
5

// ESLintで構文チェック
// npx eslint your-file.js

// ブラウザのDevToolsでエラー行を確認
// Sources タブでブレークポイントを設定