Uncaught TypeError: Cannot read property 'hoge' of undefined

'〇〇' of Undefined

よく出くわすエラーなのですが、〇〇がundefinedで〇〇がおかしい！と私は早とちりしがちなので、
このエラーがどういう意味なのかということを残しておこうと思います。

マリオで見てみよう

こういうobjectがあるとします。

    const mario = {
      job: 'plumbing',
      relationship: {
        brother: 'Luige'
      }
    };

mario.hobbyだと、そんなプロパティはないので、undefinedになります。

ここまでは想像がつきますね。

cannot read property 'fire' of undefined

で、どんなふうに呼び出すとこのエラーがでるかというと、
mario.ability.fireとしたときです。

fire of undefinedなのでundefinedになっているfireではなく、
undefinedの中のfireというプロパティが読めないということですね。

marioの中のabilityというプロパティがなく、そこがundefinedになっているので、
undefinedの中のfireプロパティが読めないのです。

const mario = {
      job: 'plumbing',
      relationship: {
        brother: 'Luige'
      }
      undefined: {
        fire: 🔥
      }
    };

コードが複雑になってくると混乱してきますが、
こんなふうにシンプルに考えてみましょう。（と自分に言い聞かせている)