JavaScript中变量放在函数内外执行结果存在差异的原因是什么？

两段代码运行结果不同，核心是变量作用域和变量初始化位置两个原因导致，具体拆解如下： #

变量定义在函数外部的代码逻辑 #

var sound = "" ; 

var laugh = function(num) {
    for (var x = 0 ; x < num ; x++) {
        sound = sound + "ha" ;  
    }
    sound = sound +"!"; 
    return sound; 
}
console.log(laugh(3)) 

• 这里的sound是全局作用域变量，整个函数执行过程中不会被重新初始化
• 循环执行3次，每次都在原有sound的末尾拼接ha，循环结束后sound值为hahaha
• 最后拼接感叹号，最终输出结果为hahaha!

变量定义在函数内部的代码逻辑 #

var laugh = function(num) {
    for (var x = 0 ; x < num ; x++) {
        var sound = "" ; 
        sound = sound + "ha" ;  
    }
    sound = sound +"!"; 
    return sound; 
}
console.log(laugh(3)) 

JavaScript中var声明存在函数作用域提升特性：哪怕你在循环内写var sound，这个变量的声明会被自动提升到函数顶部，但是赋值操作仍然留在循环内的原位置，这段代码实际执行逻辑等价于：

var laugh = function(num) {
    var sound; // 变量提升，初始值为undefined
    for (var x = 0 ; x < num ; x++) {
        sound = "" ; // 每次循环都重新赋值为空字符串
        sound = sound + "ha" ;  
    }
    sound = sound +"!"; 
    return sound; 
}

• 每次进入循环都会把sound重置为空字符串，再拼接一个ha，所以不管循环多少次，循环结束后sound的值永远是最后一次循环得到的ha
• 最后拼接感叹号，最终输出结果为ha!

如果想把变量放在函数内部同时得到和第一段代码一致的效果，只需要把变量的初始化移到循环外面即可：

var laugh = function(num) {
    var sound = "" ; // 初始化移到循环外
    for (var x = 0 ; x < num ; x++) {
        sound = sound + "ha" ;  
    }
    sound = sound +"!"; 
    return sound; 
}

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