2022/09/30 (更新日: 2022/10/24)

論理演算子について

JavaScript

&&（AND）と||（OR）について、何となくわかっているからと言って理解を怠っていた代表格。

JavaScriptにおける論理演算子の定義をしっかり理解する事で応用的な使い方につなげられる

定義

&&(論理積)

falthな値があればその値を返す
なければ一番右を返す

true && false // falsefalse && true // falsetrue && true // true'hello' && 'hi' // 'hi''0' && 10 && 2000 // 2000

|| (論理和)

trutyな値があればその値を返す
見つけたらその後の値は見ない

true || false // true
false || true // true
'hello' || 'hi' // 'hello'
'0' || 10 || 2000 // '0'

演算子の優先順位

上から優先順位高い↓

• <　(不等号)
• ===
• &&
• ||

実際にはもっとある↓以下参照

演算子の優先順位

複雑な演算子を優先順位を理解した上で見てみる

const x = 15;
const hello = 'hello';
x === 10 || x > 12 && hello;

1. 不等号の優先順位が高いので x > 12 ⇒ trueとなりこうなる↓
2. 次に===が評価され x === 10 ⇒ falseとなりこうなる↓
3. 次に&&が評価され true && hello ⇒ helloとなりこうなる↓
4. helloの文字列が返る

1 x === 10 || true && hello;
2 false || true && hello;
3 false || hello;
4 'hello';

応用的使い方

&&についてはあまり応用的な使い方はしないが、||は性質上、初期値の設定に使う事が多い。

初期値の設定

const userInput = '';
const userName = userInput || 'default';
console.log(userName); // 'default';

null合体演算子

上記の様な初期値の設定において
nullかundefinedの時は空文字をそのまま使いたい
様な時に使える

*&&や||と同時には使えない

定義

nullかundifinedの時は右辺を、それ以外は左辺の値を返す

const userInput = '';
const userName = userInput ?? 'default';
console.log(userName); // '';

論理否定演算子

結果を逆にする

!true // false
!'hello' //false
!10 // false
!false // true

応用的な使い方

2個繋げることでTruthyな値をtrueにFalsyな値をfalseに型の変換が行える

!!10 // true
!!'' // false

• Tweet