const result = leftExpression ?? rightExpression;

const foo = null ?? 'default string';
console.log(foo); // 输出: "default string"

const baz = 0 ?? 42;
console.log(baz); // 输出: 0

// 逻辑或操作符
const orValue1 = 0 || 42;        // 返回 42（0 是假值）
const orValue2 = '' || 'hello';  // 返回 'hello'（'' 是假值）
const orValue3 = false || true;  // 返回 true（false 是假值）

// 空值合并操作符
const nullishValue1 = 0 ?? 42;        // 返回 0（0 不是 null 或 undefined）
const nullishValue2 = '' ?? 'hello';  // 返回 ''（'' 不是 null 或 undefined）
const nullishValue3 = false ?? true;  // 返回 false（false 不是 null 或 undefined）

// 使用 || 的问题
const temperature = 0;
const displayTemp = temperature || 'N/A'; // 返回 'N/A'，但实际温度是0

// 使用 ?? 的正确方式
const correctTemp = temperature ?? 'N/A'; // 返回 0

// 用户输入可能为空字符串
const userInput = '';

// 使用 || 会丢失空字符串
const username1 = userInput || 'Anonymous'; // 返回 'Anonymous'

// 使用 ?? 保留空字符串
const username2 = userInput ?? 'Anonymous'; // 返回 ''

const isModalOpen = false;

// 使用 || 的问题
const modalStatus1 = isModalOpen || true; // 返回 true，但实际值是 false

// 使用 ?? 的正确方式
const modalStatus2 = isModalOpen ?? true; // 返回 false

// 需要括号的情况
const value1 = null || undefined ?? 'default'; // SyntaxError
const value2 = (null || undefined) ?? 'default'; // 正确：返回 'default'

// 与逻辑与/或操作符结合
const value3 = a && b ?? c;      // SyntaxError
const value4 = (a && b) ?? c;    // 正确
const value5 = a && (b ?? c);    // 正确

// 与条件运算符结合
const value6 = a ?? b ? c : d;   // SyntaxError
const value7 = (a ?? b) ? c : d; // 正确

// 右侧函数不会执行
function expensiveOperation() {
  console.log(' expensive operation executed');
  return 42;
}

const value = 'some value' ?? expensiveOperation();
// 不会输出 "expensive operation executed"

// 安全访问对象属性
const configuration = {
  timeout: 0,
  retries: null
};

// 只有当 timeout 为 null 或 undefined 时才使用默认值
const timeoutValue = configuration.timeout ?? 3000; // 返回 0

// 只有当 retries 为 null 或 undefined 时才使用默认值
const retriesValue = configuration.retries ?? 3; // 返回 3

// 深层对象属性访问
const user = {
  profile: {
    name: 'John',
    address: null
  }
};

// 传统方式（冗长）
const traditionalAddress = (user && user.profile && user.profile.address) || 'No address';

// 现代方式（简洁）
const modernAddress = user?.profile?.address ?? 'No address';

// 函数调用
const result = someObject?.someMethod?.() ?? 'default value';

// API 响应处理
const apiResponse = {
  data: {
    user: {
      preferences: {
        theme: null
      }
    }
  }
};

// 安全地获取主题设置
const theme = apiResponse?.data?.user?.preferences?.theme ?? 'light';

// 数组访问
const firstItem = someArray?.[0] ?? 'default value';

npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator

{
  "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}

// 源代码
const value = a ?? b;

// 转译后代码
const value = a !== null && a !== undefined ? a : b;

function initialize(config) {
  const defaultConfig = {
    timeout: 3000,
    retries: 3,
    baseURL: 'https://api.example.com'
  };
  
  return {
    timeout: config.timeout ?? defaultConfig.timeout,
    retries: config.retries ?? defaultConfig.retries,
    baseURL: config.baseURL ?? defaultConfig.baseURL
  };
}

// 传统方式
function greet(name) {
  name = name || 'Guest'; // 空字符串也会被替换
  return `Hello, ${name}!`;
}

// 改进方式
function betterGreet(name) {
  name = name ?? 'Guest'; // 空字符串会被保留
  return `Hello, ${name}!`;
}

// ES6 默认参数与 ?? 结合
function modernGreet(name = 'Guest') {
  // 默认参数只处理 undefined，不处理 null
  name = name ?? 'Anonymous'; // 处理 null 情况
  return `Hello, ${name}!`;
}

// React 组件中的状态初始化
const [count, setCount] = useState(initialCount ?? 0);

// Vue 中的属性处理
export default {
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    visibleItems() {
      return this.items ?? [];
    }
  }
};

// 错误用法
const value1 = a ?? b || c; // SyntaxError
const value2 = a && b ?? c; // SyntaxError

// 正确用法
const value1 = (a ?? b) || c;
const value2 = (a && b) ?? c;
const value3 = a && (b ?? c);

// 错误：不能这样使用
let value;
value ??= 'default'; // 在ES2021之前不支持

// 正确：使用逻辑或（如果需要假值处理）或空值合并
let value1 = someVariable || 'default'; // 处理所有假值
let value2 = someVariable ?? 'default'; // 只处理null/undefined

// 历史遗留问题：document.all在布尔上下文中为false，但typeof为'undefined'
const value = document.all ?? 'default'; // 返回 document.all