JavaScript变量提升问题：为何wmsg/imsg输出不符合预期？

先看你提供的代码：

function loadProfiles(usernames){ 
  if(usernames.length>3){ 
    var wmsg='This might take a while'; 
  } else{ 
    var imsg="Just a sec"; 
  } 
  console.log(imsg); 
} 
loadProfiles(['Dinesh','Saratha','Sundhararasu']);

你的困惑点在于：调用函数时传入3个用户名，代码进入else分支，此时你觉得wmsg应该不存在，但实际输出wmsg会得到undefined；而你预期没进入if分支的话imsg应该是undefined，但实际输出却是"Just a sec"——这其实都是JavaScript中var关键字的**变量提升（Hoisting）**特性导致的。

变量提升到底做了什么？ #

在JavaScript中，用var声明的变量会被提升到当前作用域的顶部，但变量的赋值操作不会被提升。也就是说，你的代码在运行时会被引擎悄悄改写为这样：

function loadProfiles(usernames){ 
  // 变量声明被提升到函数作用域顶端，此时未赋值，默认是undefined
  var wmsg;
  var imsg;

  if(usernames.length>3){ 
    wmsg='This might take a while'; // 进入分支才执行赋值
  } else{ 
    imsg="Just a sec"; // 进入分支才执行赋值
  } 
  console.log(imsg); 
} 
loadProfiles(['Dinesh','Saratha','Sundhararasu']);

这样就很好理解了：

• 不管if/else分支是否执行，wmsg和imsg都已经在函数作用域中被声明了，只是只有进入对应的分支时才会被赋值。
• 当你传入3个用户名时，进入else分支，imsg被赋值为"Just a sec"，所以console.log(imsg)会输出这个值；而wmsg从未被赋值，所以它保持初始的undefined。
• 如果传入4个及以上用户名，进入if分支，wmsg会被赋值，此时imsg就会是undefined。

如何避免这种反直觉的行为？ #

现在JavaScript已经支持let和const关键字，它们支持块级作用域，变量只会在声明它的代码块（比如if/else的大括号内）中存在，不会被提升到函数作用域顶端。如果把代码中的var换成let：

function loadProfiles(usernames){ 
  if(usernames.length>3){ 
    let wmsg='This might take a while'; 
  } else{ 
    let imsg="Just a sec"; 
  } 
  console.log(imsg); // 这里会直接报错：imsg is not defined
} 

这时候在else块外访问imsg会直接抛出引用错误，因为imsg只存在于else的块级作用域中，更符合我们的直觉。

内容的提问来源于stack exchange，提问作者Dinesh S