JavaScript初心者のためのエラーガイド

1. Uncaught TypeError: Cannot read property 'b' of undefined at ...

解釋 : Undefinedのbというプロパティーを読めません。

例 :

a = undefined;
// undefined
a.b
// Uncaught TypeError: Cannot read property 'b' of undefined at ...

*ポイント : bではなく、aがundefinedです。

*対策1 :

if (a) {
a.b = ...
}
// aがundefinedでは無い時だけ、実行できます。

対策2 : Optional Chaining

c = a?.b;

2. Uncaught TypeError: Cannot read property 'b' of null at ...

例 :

a = null;
// null
a.b
// Uncaught TypeError: Cannot read property 'b' of null at ...

*ポイント : bではなく、aがnullです。

3. Uncaught TypeError: a.b is not a function at ...

例 :

a = {}
// {}
a.b()
// Uncaught TypeError: a.b is not a function at ...
console.log(a)
// {}
// undefined

*ポイント : オブゼットa内に、function bが無いこと。

*対策 :

Uncaught TypeError: a.b is not a function at ...と言うエラーが出た時は、console.log()で確認しましょう。

4. Uncaught ReferenceError: a is not defined at ...

例 :

let a, const a のように宣言してない時

import a from 'library';
const a = require('library');
のようにimport、requireの宣言してない時

4. Function位置に対する理解や注意点

例 :

setTimeout(() => {
console.log('hello');
}, 2000);
// 正しい : 予想通り、2秒後に'hello'を出力

setTimeout(function {
console.log('hello');
}, 3000);
// 正しい : 予想通り、3秒後に'hello'を出力

setTimeout(console.log('hello'), 4000);
// 正しく無い : 直ぐに'hello'を出力

window.addEventListener('click', () => {
console.log('hi'));
// 正しい : clickをすると'hi'を出力

window.addEventListener('click', console.log('hi'));
// 正しく無い : 直ぐに'hi'を出力

*ポイント :

window.addEventListener('click', console.log('hi'));

console.log('hi')は、Functionでは無いです。
Functionの呼び出しです。
つまり、Return値です。

もう少し説明すると、

console.log は、Functionです。
console.log() は、呼び出しです。Return値です。
// console.log()の値は、undefinedです。

下の２行のコードは、同じ意味です。

window.addEventListener('click', console.log('hi'));
window.addEventListener('click', undefined);

window.addEventListener('click', () => {});
// () => {}は、Functionです。
window.addEventListener('click', () => {}());
// 呼び出しためには、()を付けます。

setTimeout(console.log('hello'), 4000);
// console.log('hello')が実行されて、直ぐに'hello'を出力。
// その後、console.log('hello')はundefinedになります。