JavaScript初心者必見！nvl関数の使い方を10選で徹底解説

はじめに
●nvl関数とは
- ○nvl関数の基本
●nvl関数の使い方
●nvl関数の応用例
●注意点と対処法
●カスタマイズ方法
- ○サンプルコード9：nvl関数のカスタマイズ例
- ○サンプルコード10：複数の代替値を使用するnvl関数
まとめ

はじめに

この記事を読めば、JavaScript初心者でもnvl関数の使い方をマスターすることができるようになります。

●nvl関数とは

nvl関数は、JavaScriptで値がnullやundefinedの場合に、別の値に置き換えるために使用される関数です。

ここでは、nvl関数の基本から使い方、注意点、カスタマイズ方法までを徹底解説します。

○nvl関数の基本

JavaScriptには、デフォルトでnvl関数は存在しないため、次のように独自に関数を定義する必要があります。

function nvl(value, defaultValue) {
  return value != null ? value : defaultValue;
}

この関数は、第1引数のvalueがnullまたはundefinedである場合、第2引数のdefaultValueで置き換える処理を行います。

●nvl関数の使い方

nvl関数の使い方について、下記のサンプルコードで詳しく解説します。

○サンプルコード1：null値の置き換え

null値を別の値に置き換える基本的な使い方です。

function nvl(value, defaultValue) {
  return value != null ? value : defaultValue;
}

let value1 = null;
let result1 = nvl(value1, "デフォルト値");
console.log(result1); // "デフォルト値"

value1がnullのため、”デフォルト値”に置き換えられ、result1に代入されます。

○サンプルコード2：undefined値の置き換え

undefined値を別の値に置き換える方法です。

function nvl(value, defaultValue) {
  return value != null ? value : defaultValue;
}

let value2;
let result2 = nvl(value2, "デフォルト値");
console.log(result2); // "デフォルト値"

value2がundefinedのため、”デフォルト値”に置き換えられ、result2に代入されます。

○サンプルコード3：0値の置き換え

0値を別の値に置き換える方法です。

ただし、この場合はnvl関数を少しカスタマイズする必要があります。

function nvl(value, defaultValue) {
  return value !== null && value !== undefined && value !== 0 ? value : defaultValue;
}

let value3 = 0;
let result3 = nvl(value3, "デフォルト値");
console.log(result3); // "デフォルト値"

value3が0のため、”デフォルト値”に置き換えられ、result3に代入されます。

○サンプルコード4：空文字列の置き換え

空文字列を別の値に置き換える方法です。

こちらもnvl関数をカスタマイズする必要があります。

function nvl(value, defaultValue) {
  return value !== null && value !== undefined && value !== "" ? value : defaultValue;
}

let value4 = "";
let result4 = nvl(value4, "デフォルト値");
console.log(result4); // "デフォルト値"

value4が空文字列のため、”デフォルト値”に置き換えられ、result4に代入されます。

●nvl関数の応用例

nvl関数を応用した例を下記に示します。

○サンプルコード5：配列内のnull値を置き換える

配列内のnull値を別の値に置き換える方法です。

function nvl(value, defaultValue) {
  return value != null ? value : defaultValue;
}

const array = [1, null, 3, null, 5];
const newArray = array.map((item) => nvl(item, "デフォルト値"));

console.log(newArray); // [1, "デフォルト値", 3, "デフォルト値", 5]

arrayの要素がnullの場合、”デフォルト値”に置き換えられてnewArrayに代入されます。

○サンプルコード6：オブジェクト内のnull値を置き換える

オブジェクト内のnull値を別の値に置き換える方法です。

function nvl(value, defaultValue) {
  return value != null ? value : defaultValue;
}

const obj = { a: 1, b: null, c: 3, d: null, e: 5 };
const newObj = Object.fromEntries(
  Object.entries(obj).map(([key, value]) => [key, nvl(value, "デフォルト値")])
);

console.log(newObj); // { a: 1, b: "デフォルト値", c: 3, d: "デフォルト値", e: 5 }

objのプロパティの値がnullの場合、”デフォルト値”に置き換えられてnewObjに代入されます。

○サンプルコード7：条件式での使用

nvl関数を条件式で使う方法です。

function nvl(value, defaultValue) {
  return value != null ? value : defaultValue;
}

const age = null;
const isAdult = nvl(age, 0) >= 18;

console.log(isAdult); // false

ageがnullの場合、0に置き換えられ、条件式によりisAdultがfalseとなります。

○サンプルコード8：関数引数のデフォルト値として使用

関数引数のデフォルト値としてnvl関数を使用する方法です。

function nvl(value, defaultValue) {
  return value != null ? value : defaultValue;
}

function greet(name) {
  const greetingName = nvl(name, "名無しさん");
  console.log(`こんにちは、${greetingName}さん!`);
}

greet(null); // "こんにちは、名無しさんさん!"

引数nameがnullの場合、”名無しさん”に置き換えられ、挨拶文が表示されます。

●注意点と対処法

nvl関数は、nullとundefinedのみを判定対象としています。

0や空文字列など、他のfalsyな値に対しては別途カスタマイズが必要です。

●カスタマイズ方法

nvl関数をカスタマイズすることで、さまざまな状況に対応できるようになります。

○サンプルコード9：nvl関数のカスタマイズ例

nvl関数をカスタマイズし、0や空文字列などのfalsyな値も判定対象に含める方法です。

function nvl(value, defaultValue, falsyValues = [null, undefined]) {
  return falsyValues.includes(value) ? defaultValue : value;
}

const value = "";
const newValue = nvl(value, "デフォルト値", [null, undefined, ""]);

console.log(newValue); // "デフォルト値"

このカスタマイズ例では、falsyValues引数に判定対象とするfalsyな値の配列を指定できます。

○サンプルコード10：複数の代替値を使用するnvl関数

nvl関数をカスタマイズし、複数の代替値を順に評価して最初の有効な値を返す方法です。

function nvl(value, ...defaultValues) {
  for (const defaultValue of defaultValues) {
    if (value != null) {
      return value;
    }
    value = defaultValue;
  }
  return value;
}

const value = null;
const newValue = nvl(value, null, undefined, "", "デフォルト値1", "デフォルト値2");

console.log(newValue); // "デフォルト値1"

このカスタマイズ例では、関数に渡された代替値を順番に評価し、最初の有効な値が返されます。