💭
ESNextについて 🚀
ESNextは、JavaScriptをより強力に、より便利にするための進化の最前線と言えますね！ 💪
ESNextのサンプルコードと使用した場合・使用しなかった場合の比較 💡
ここでは、ESNextの代表的な機能の一つである「Null合体演算子 (Nullish Coalescing Operator) ??」を例に見てみましょう！
📌 サンプルコード (Null合体演算子 ?? の使用)
// 値がnullまたはundefinedの場合にのみデフォルト値を適用
const userName = null;
const displayName = userName ?? "ゲスト"; // userNameがnullなので"ゲスト"が代入される
console.log(displayName); // 出力: ゲスト
const age = 0;
const displayAge = age ?? 18; // ageは0なので0が代入される (0はnullでもundefinedでもない)
console.log(displayAge); // 出力: 0
const country = undefined;
const displayCountry = country ?? "日本"; // countryがundefinedなので"日本"が代入される
console.log(displayCountry); // 出力: 日本
📌 Null合体演算子 ?? を使用しない場合の比較
Null合体演算子がない場合、これまでは論理OR演算子 || や三項演算子を使用していました。
// 論理OR演算子 || を使用した場合
// || は、左辺がfalsyな値（false, 0, "", null, undefined, NaN）の場合に右辺を返すため、
// 0や空文字の場合にも意図せずデフォルト値が適用されてしまう可能性があります。
const userNameOld = null;
const displayNameOld = userNameOld || "ゲスト"; // userNameOldがnullなので"ゲスト"
console.log(displayNameOld); // 出力: ゲスト
const ageOld = 0;
const displayAgeOld = ageOld || 18; // ageOldが0（falsy）なので18が代入されてしまう
console.log(displayAgeOld); // 出力: 18 (意図しない結果)
const countryOld = undefined;
const displayCountryOld = countryOld || "日本"; // countryOldがundefinedなので"日本"
console.log(displayCountryOld); // 出力: 日本
console.log('---');
// 三項演算子を使用した例
const userNameTernary = null;
const displayNameTernary = (userNameTernary !== null && userNameTernary !== undefined) ? userNameTernary : "ゲスト";
console.log(displayNameTernary); // 出力: ゲスト
const ageTernary = 0;
const displayAgeTernary = (ageTernary !== null && ageTernary !== undefined) ? ageTernary : 18;
console.log(displayAgeTernary); // 出力: 0 (これは意図通り)
const countryTernary = undefined;
const displayCountryTernary = (countryTernary !== null && countryTernary !== undefined) ? countryTernary : "日本";
console.log(displayCountryTernary); // 出力: 日本
このように、ESNextの新しい機能は、コードをより簡潔に、そしてより意図通りに記述できるように進化していますね！これからもJavaScriptの進化に注目していきましょう！ 👀✨
Discussion