3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【JavaScript】比較演算子とは?

Last updated at Posted at 2023-09-03

こんにちは🌕
js基礎学習、今回は比較演算子についてアウトプットしていきます!

※webサイトによっては関係演算子と呼んでいるようでした。
厳密な違い(もしくは同じものを指しているのか)がまだ理解しきれていないので、今回は総じて比較演算子としています。

▼これが理解できると…

比較演算子は、特に条件分岐を行うための制御文(主にif文)でよく使用されています!(筆者も業務でしばしば見かけます)

今までの記事同様に基礎中の基礎だと思うのですが、

・より正確な条件分岐、より複雑な条件分岐を書けるようになる
・他のメンバーが書いた比較演算子の意図がわかるようになる
・思わぬバグを防ぐことができる

などのメリットがありそうです🧐💬
特に等価演算子と厳密等価演算子は似て非なるものですから、きちんと理解していないと想定通りの制御文が書けません。

▼比較演算子とは?

プログラミング言語などで用いられる演算子のうち、左辺と右辺の式や値を比較して、結果を真偽値(trueまたはfalse)で返すものです。
一致・不一致や大小の比較など、いくつかの種類があります。 

種類 演算子 条件式 意味
大なり > A > B AはBより大きいか
大なりイコール >= A >= B AはB以上か
小なり < A < B AはBより小さいか
小なりイコール <= A <= B AはB以下か
等価 == A == B 同じ値か
不等価 != A != B 異なる値か
厳密等価 === A === B 同じ値、かつ同じ型か
厳密不等価 !== A !== B 異なる値、または異なる型か

特にややこしい等価演算子と厳密等価演算子をサンプルコードを見ながら学びます!

▼等価演算子

同じ値であればtrueを返し、そうでない場合はfalseを返します。
厳密等価演算子とは異なり、データ型が異なる場合には型の変換を試みてから比較を行います。

console.log(1 == 1); // true
console.log('apple' == 'apple'); // true
console.log('apple' == 'orange'); // false

データ型が異なる場合の比較は、同じ型になるように暗黙的に変換されます。

// 文字列は数値に変換される
console.log(1 == '1'); // true

// '01'と'1'
console.log(1 == '01'); // true
console.log(1 == 01); // true

// trueは1に変換される
console.log(0 == true); // false
console.log(1 == true); // true

// falseは0に変換される
console.log(0 == false); // true
console.log(1 == false); // false

// nullとundefined
console.log(null == undefined); // true
// (データ型も値も違うけれど…)
typeof undefined // undefined
typeof null // null

このように、一見同じようでもfalse、一見違うようでもtrueという挙動をとるため注意が必要です。

そのため、なるべく厳密等価演算子を使うことが推奨されているとのことです。
異なるデータ型を比較したい場合には、あらかじめ型を揃えて比較を行います。

(余談)
nullundefinedの比較がtrueになる理由が気になったのですが:thinking:
探してもなかなかドキュメントにぶつからなかったので、chatGPTに聞いてみました!

・歴史的な経緯
 js開発当初は厳密な型付けが考慮されていなかった

・後方互換性
既存のコードが壊れないように設計上の互換性を維持するためのルールが導入された

↓ヒントになりそうな記事

▼厳密等価演算子

同じ値、かつ同じ型である場合はtrueを返し、そうでない場合はfalseを返します。

console.log(1 === 1); // true
console.log(1 === '1'); // false
console.log('apple' === 'apple'); // true
console.log('apple' === 'orange'); // false

// nullとundefined
console.log(null === undefined); // false

ちなみに処理速度的にも厳密演算子の方が速いらしいです…!
等価演算子では、場合によっては暗黙的に型変換が行われるからでしょうか。

▼さいごに

以上のように、比較演算子のいくつかの種類、厳密等価と等価の違いが理解できました。
演算子を使って判定を行うことももちろんなのですが、自分が今扱っているのはどのようなデータ型なのか意識しながらコードを書く必要性がわかりました!!

基本的には厳密等価演算子が推奨されていますが、逆に等価演算子が推奨されている場面はあるのかな?というのが新たに気になったので、後日調べてみようと思います〜:writing_hand_tone1:

▼参考

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?