Edited at

Javascriptにおける 論理演算子 || の動きについて


本記事について

おそらく初心者向けですが、

Javascriptで、a || b

という記述があった時の論理演算子の動きについて共有します。

Javascriptの開発の中で、下記のような記述を読み解くのに少し時間がかかったので、自分用のメモとしても残しておきます。

※こちらはService Worker+Cache APIを実装した際のコードですが、Service Workerについては別の機会にまた解説したいと思います。


self.addEventListener('fetch', (event) => {
event.respondWith(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.match(event.request)
.then(function (response) {
return response || fetch(event.request)
.then(function(response) {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});


Javascriptの処理

この処理を順番に整理すると

caches.open(CACHE_NAME)でCACHE_NAMEと一致したかどうかを確認し、Promiseを返す(成功していればthen内部の処理へ)

cache.match(event.request)でcacheの中身がevent.requestにマッチしていればPromiseを返す(そして2つ目のthen内部の処理へ)

return response || fetch・・・・

と続いていくわけですが、

ここの処理は、

レスポンスを返すか、fetchでリクエストを送るか

ということになります。(当たり前だ)


a || bの処理の仕様

・・・なのですが、処理の中で

a || b(aまたはb)となった時に

え、じゃあ結局どっちの処理をするの?

ということを疑問に思う方もいるかもしれません。

この「または」を表す || という論理演算子の考え方としては

処理a || 処理b

となっている場合は

処理aがtrueの場合、処理aのみを実行

処理aがfalseの場合、処理bを実行

となります。

なんか、if文でやたらと

if(a || b) {

//aまたはbなら処理
}

と刷り込まれてしまっていると、「あれ?aかbかが実行されると書いてあるけど、それって何で決まるんだっけ?」

とふと思ったのでググって自分なりにコードの意味を噛み砕いていくことができました。

一応先ほどのコードの意味を順番に書いておきます。

caches.open(CACHE_NAME)でCACHE_NAMEと一致したかどうかを確認し、Promiseを返す(成功していればthen内部の処理へ)

cache.match(event.request)でキャッシュの中身がevent.requestにマッチしていればPromiseを返す(そして2つ目のthen内部の処理へ)

return responseがtrueならばそこでブラウザに処理を返す

return responseがfalseならばfetchの処理に進む

response.clone()でレスポンスをクローンして、cache.put()キャッシュを更新する

という感じになります。

a || bをちゃんと調べてまとめてみましたとさ。

参考:MDN