無いかもしれない項目をたどる

01 / 05

無いものの先はたどれない

無い項目を取り出しても undefined が返るだけで、プログラムは止まらなかったよね。

でも、その undefined からさらに先をたどろうとすると、そこで止まってしまう。address を持っていない user に user.address.city と書くと、こうなるよ。

const user = { name: "ゆい" };console.log(user.address.city);

実行結果

TypeError: Cannot read properties of undefined (reading 'city')

02 / 05

. のかわりに ?. と書くと、左側が無いときはそこで打ち切って undefined を返す。先をたどりに行かないから、エラーにならないんだ。

「あればその先へ、無ければ undefined」と読めばいいよ。

const user = { name: "ゆい" };console.log(user.address?.city);

実行結果

undefined

03 / 05

?. を書いても、あるときは . とまったく同じ。値がふつうに取り出せる。

つまり ?. は「無かったときだけ」働くしかけだよ。ふだんの読み書きの邪魔はしない。

const user = {  name: "ゆい",  address: { city: "みなとまち" },};console.log(user.address?.city);

実行結果

みなとまち

04 / 05

便利だからといって、全部の . を ?. にするのはよくない。本当は在るはずのものが無かったときも、黙って進んでしまうからだよ。

そうなると undefined がずっと先の行まで運ばれて、どこで壊れたのか分からなくなる。エラーで止まってくれたほうが、原因はすぐ見つかるんだ。

?. を書くのは、無いことがありうると分かっている場所だけ。それが使い方だよ。

05 / 05

?. が返すのは undefined だから、これまでどおり === undefined で判定できる。無いときの表示を自分で決めてあげよう。

止めずにたどる、そのあと無ければ言葉を置きかえる。この2段構えが実際いちばんよく書く形だよ。ここから書いてみよう。

const user = { name: "はると" };const city = user.address?.city;if (city === undefined) {  console.log("みとうろく");} else {  console.log(city);}

実行結果

みとうろく