【JavaScript】nullやundefinedだったら空文字に変換 | Null-合体演算子「??」の活用

こんにちは、フロントエンドエンジニアのまさにょんです！

今回は、null や undefined の data だったら空文字に変換する処理の実装について解説していきます。

今回の解説には、以前紹介した「Null-合体演算子」(「??」)を使用します。

「Null-合体演算子」がわからない人は、先にこちらの記事をCheckしてみてください！

【JavaScript】「?.」と「??」の使い方 | Optional-ChainingとNull-合体演算子

【 Optional-ChainingとNull-合体演算子】

1 null や undefined の data である場合は、空文字に変換する処理
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 最近の投稿

null や undefined の data である場合は、空文字に変換する処理

null や undefined の data だったら空文字に変換する処理は、Web画面に出力するFrontEndだと必要になったりするので、ぜひ活用してみてください！

先輩がこの記法使ってるのを見て、かっこいいと思いました！

// < null や undefined の value・data である場合は、空文字に変換する SmartなLogic >

const projectInfo = {
    project_name: 'ロボ玉-Project',
    group_name: 'ロボ玉組',
    from: 'グンマー帝国',
    cost: 1200,
    saitama: null,
    robotama_flag: true,
    robo_power: undefined,
};

const PrintData = (projectObj, key) => {
    const val = projectObj[key];
    switch (key) {
        case 'robotama_flag': 
            console.log('robotamaFlag-Call-ロボ玉！');
            break;
        default: 
            // [ 今回のPoint ]
            // 「??」 により、null や undefined なら 「''」(空文字)を返す！
            return `${val ?? ''}`;
        
        // 上記の記述の方が、より短くSmartにかける！ => 三項演算子で記述すると次のように長くなる！
        // return ( v ===  undefined || v === null) ? '' : `${v}`;
    }
};

for (const key in projectInfo) {
    const printVal = PrintData(projectInfo, key);
    console.log(`${key}: ${printVal}`);
}

// < 出力結果 >
    // project_name: ロボ玉-Project
    // group_name: ロボ玉組
    // from: グンマー帝国
    // cost: 1200
    // saitama: 
    // robotamaFlag-Call-ロボ玉！
    // robotama_flag: undefined
    // robo_power: