【TypeScriptでの等価演算子】== と === の本当の違いを理解する

ひでまる

こんにちは！ひでまるです！

ひでまる

今回はTypeScriptを学習していくよ〜

新しい開発の仕事でTypeScriptを使っていくことになったので、自分の学習記録として記事に残していきます！
プログラミングを学習している方、一緒にレベルアップしていきましょう！

✔記事の信頼性

それでは、行きましょう！

== と ===の違い

他のプログラミング言語もそうですが、TypeScriptでも「==」と「===」比較するための演算子が存在します。

比較するとは、〇〇と〇〇は同じもの？と尋ねるようなイメージです。
同じものであれば結果は「true」、違うものであれば結果は「false」になります。

const num = 1;
const str = '1'
console.log(num === str) // false

数字の「１」と文字の「１」は違うのでfalseといった感じです！

==は等価演算子

「==」は値を比較するときに、「型」変換を行います。

const num = 1;
const str = '1' 
console.log(num == str) // true

numには数値(number型)の１
strには文字(string型)の1
が入っています。

「==」を使って比較するときは、strに入ってる文字の1が数値に変換されて比較を行います。

つまり、数値の「１」と数値の「１」が比較となり、結果はtrueとなります。

==は厳密等価演算子

「===」は値と型の両方を比較し、両方が完全一致しない限り、結果はfalseとなります。

const num = 1;
const str = '1' 
console.log(num === str) // false

numには数値(number型)の１
strには文字(string型)の1

「===」を使って比較する場合は数値の「１」と文字の「１」での比較となり、数値と文字で違うため、結果はfalseとなります。

どっちを使えばいいの？

実際の開発では、意図しない型変換を防ぐために、「===」が推奨されています。

型変換されてしまうと予期せぬバグが起きるので、「===」はそれを防ぐのに役立ちます！

まとめ

「==」は等価演算子といい、比較する際は型変換を行って値を比較する。

「===」は厳密等価演算子といい、比較する際は値と型を見て比較する。

推奨されているのは「===」を使って比較する。

TypeScriptの学習ではこちらの本がおすすめです！
内容的に難しいところもありますが、本気で学びたい人は買って損しない一冊です！