全局变量saldoUsuario函数内有值，外部console.log显示undefined求助

我是前端新手，正在开发ATM网站，遇到个JavaScript问题：声明了全局变量saldoUsuario，在saldoAlDia函数内部赋值后有值，但在函数外部用console.log输出显示undefined，后续函数想用这个赋值后的新值也没法正常运行。相关代码如下：

let saldoUsuario;

function saldoAlDia(user) {

  const name = cuentas.map( function(cuenta) {
    return [cuenta.nombre, cuenta.saldo]
  })
  
  for (let i = 0; i < name.length; i++) {
    if (user === name[i][0]) {
       saldoUsuario = name[i][1]  // 此处有值
    }
  }

  usBalance.innerHTML = saldoUsuario
  return usBalance.innerHTML = saldoUsuario // 此处有值
}

console.log(saldoUsuario) // undefined

问题原因 #

核心是代码执行顺序的问题：你在调用saldoAlDia()函数之前就执行了console.log(saldoUsuario)，这时候全局变量还没被赋值，默认就是undefined。只有当saldoAlDia被调用且成功匹配到对应用户时，才会给这个全局变量赋值。

解决方案 #

方案1：调整执行顺序，确保先调用函数再访问变量

先调用saldoAlDia完成赋值，之后再去读取saldoUsuario：

// 先传入用户名调用函数，完成赋值
saldoAlDia("你的测试用户名");
// 此时再输出就能拿到正确值
console.log(saldoUsuario);

方案2：避免全局变量，直接使用函数返回值

全局变量容易引发作用域问题，更稳妥的方式是直接用函数的返回值，不用依赖全局变量：

function saldoAlDia(user) {
  // 用find直接定位匹配账户，比map加循环更高效
  const targetCuenta = cuentas.find(cuenta => cuenta.nombre === user);
  
  if (targetCuenta) {
    const saldo = targetCuenta.saldo;
    usBalance.innerHTML = saldo;
    return saldo;
  }
  
  // 处理用户不存在的情况
  usBalance.innerHTML = "未找到该用户";
  return null;
}

// 调用函数时直接接收返回值
const usuarioSaldo = saldoAlDia("你的测试用户名");
console.log(usuarioSaldo);

内容的提问来源于stack exchange，提问作者Gerardo Puertos