JavaScriptのnull合体処理について

JavaScriptの「null 合体演算子」について

JavaScriptには、C#やPHPのような「null 合体演算子 (null coalescing operator)」は直接存在しません。 しかし、似たような機能を実現するために、論理演算子（&&）や三項演算子（?:）を組み合わせて使うことができます。

論理演算子 && を使った方法

• 例
  
• 原理
  && 演算子は、左側のオペランドが false の場合、右側のオペランドを評価しません。

const value = null;
const result = value && "default value";
console.log(result); // Output: "default value"

この例では、value が null なため、右側の "default value" が評価され、結果として "default value" が得られます。

• 原理
  ?: 演算子は、条件式が真であれば左側のオペランドを、偽であれば右側のオペランドを評価します。

const value = null;
const result = value ? value : "default value";
console.log(result); // Output: "default value"

オプションチェーン (?.) を使った方法

• 原理
  ?. 演算子は、プロパティまたはメソッドが null または undefined の場合、エラーを発生させる代わりに undefined を返します。

const object = {
  property: null
};
const result = object?.property || "default value";
console.log(result); // Output: "default value"

この例では、object.property が null なため、?. 演算子はエラーを発生させず、undefined を返します。その後、|| 演算子によって "default value" が評価されます。

const value = null;
const result = value && "default value";
console.log(result); // Output: "default value"

• 解説
  
  • value が null なため、右側の "default value" が評価されません。
  • && 演算子は、左側のオペランドが false の場合、右側のオペランドを評価しないという特性を利用しています。

const value = null;
const result = value ? value : "default value";
console.log(result); // Output: "default value"

• 解説
  

const object = {
  property: null
};
const result = object?.property || "default value";
console.log(result); // Output: "default value"

• 解説
  
  • object.property が null なため、?. 演算子はエラーを発生させず、undefined を返します。
  • その後、|| 演算子によって "default value" が評価されます。

const value = null;
const result = value && "default value";
console.log(result); // Output: "default value"

const value = null;
const result = value ? value : "default value";
console.log(result); // Output: "default value"

const object = {
  property: null
};
const result = object?.property || "default value";
console.log(result); // Output: "default value"

Default Value Assignment

• 直接デフォルト値を割り当てる
  

  const value = null;
  const result = value || "default value";
  console.log(result); // Output: "default value"
  

Logical OR (||) 演算子

ES6のデフォルトパラメータ

• 関数のパラメータにデフォルト値を設定
  

  function greet(name = "World") {
    console.log("Hello, " + name + "!");
  }
  greet(); // Output: "Hello, World!"