JavaScript 三項演算子と||演算子と??演算子

三項演算子と||演算子と??演算子の結果確認してみよう。っていう話。

const TITLE_LEN = 12;
const spacePadding = (val, len) =>  (val + ' '.repeat(len)).slice(0, len);
const output = (title, res1, res2, res3) =>
    console.log(`${spacePadding(title, TITLE_LEN)} ３項:${res1}  ||:${res2}  ??:${res3}`); 

let str;
let res1;
let res2;
let res3;

console.log('文字列検証'); 
str = undefined;
res1 = str ? str : 'A'; 
res2 = str || 'A';
res3 = str ?? 'A';
output('undefined', res1, res2, res3);

str = null;
res1 = str ? str : 'A'; 
res2 = str || 'A';
res3 = str ?? 'A';
output('null', res1, res2, res3);

str = 'B';
res1 = str ? str : 'A'; 
res2 = str || 'A';
res3 = str ?? 'A';
output('B', res1, res2, res3);

str = '';
res1 = str ? str : 'A'; 
res2 = str || 'A';
res3 = str ?? 'A';
output('""', res1, res2, res3);


console.log('\n数値検証'); 
let num;

str = undefined;
res1 = num ? num : 9; 
res2 = num || 9;
res3 = num ?? 9;
output('undefined', res1, res2, res3);

num = null;
res1 = num ? num : 9; 
res2 = num || 9;
res3 = num ?? 9;
output('null', res1, res2, res3);

num = 1;
res1 = num ? num : 9; 
res2 = num || 9;
res3 = num ?? 9;
output('1', res1, res2, res3);

num = 0;
res1 = num ? num : 9; 
res2 = num || 9;
res3 = num ?? 9;
output('0', res1, res2, res3);

num = Number.NaN
res1 = num ? num : 9; 
res2 = num || 9;
res3 = num ?? 9;
output('NaN', res1, res2, res3);

実行結果

??演算子の結果がちょっと違う。
気をつけよう。

文字列検証
undefined    ３項:A  ||:A  ??:A
null         ３項:A  ||:A  ??:A
B            ３項:B  ||:B  ??:B
""           ３項:A  ||:A  ??:       // 結果違う！！

数値検証
undefined    ３項:9  ||:9  ??:9
null         ３項:9  ||:9  ??:9
1            ３項:1  ||:1  ??:1
0            ３項:9  ||:9  ??:0      // 結果違う！！
NaN          ３項:9  ||:9  ??:NaN    // 結果違う！！

””、0の扱いって悩むなー