JavaScript报错message is not defined，Coursera作业技术疑问求解

我编写了一段JavaScript代码，运行时出现message is not defined错误。我知道var是函数作用域，无法在函数外部访问，但Coursera作业有相关要求，对此存在疑问，希望得到解答。

原始代码：

function consoleStyler(color, background, fontSize, txt) 
{ 
    var message = "%c" + txt;
    var style = `color: ${color}`; 
    style += `background:${background}`;
    style += `fontSize:${fontSize}`;
    console.log(style) 
} 


function celebrateStyler(reason)
 { 
    var fontStyle = "color: tomato; font-size: 50px"; 
    if (reason == "birthday")  {  
        console.log('%cHappy Birthday', fontStyle) 
    }
    else if (reason == 'champions') {
        console.log('%cCongrats on the title!', fontstyle)
    }
    else { 
        console.log(message, style)
    }
 } 

 consoleStyler('#1d5c63', '#ede6db', '40px', 'congrats!');
 celebrateStyler('birthday') 


function styleAndCelebrate() 
{ 
     consoleStyler(color, background, fontSize, txt);
     celebrateStyler(reason);
} 
styleAndCelebrate('#ef7c8e', '#fae8e0', '30px', 'You made it!', 'champions')

错误根源分析 #

• 核心错误：celebrateStyler函数的else分支中，message和style是consoleStyler函数内部用var声明的变量，属于函数作用域，只能在consoleStyler内部访问，外部函数无法直接调用，因此触发message is not defined错误。
• 附带问题1：celebrateStyler的else if分支里，fontstyle拼写错误（JavaScript区分大小写，应为fontStyle）。
• 附带问题2：styleAndCelebrate函数未定义形参，直接使用color、background等未声明变量，会触发额外的未定义错误。
• 附带问题3：consoleStyler函数最后应该输出message和style两个参数（console.log(message, style)），否则控制台样式不会生效，当前代码仅输出了style字符串。

修复方案 #

方案1：函数返回值传递（推荐，符合作用域规范） #

修改consoleStyler使其返回样式和消息对象，供外部函数调用：

function consoleStyler(color, background, fontSize, txt) 
{ 
    var message = "%c" + txt;
    var style = `color: ${color}; background: ${background}; fontSize: ${fontSize}`;
    return { message, style };
} 

function celebrateStyler(reason, customMsg, customStyle)
 { 
    var fontStyle = "color: tomato; font-size: 50px"; 
    if (reason == "birthday")  {  
        console.log('%cHappy Birthday', fontStyle) 
    }
    else if (reason == 'champions') {
        console.log('%cCongrats on the title!', fontStyle)
    }
    else { 
        console.log(customMsg, customStyle);
    }
 } 

// 调用示例
const { message, style } = consoleStyler('#1d5c63', '#ede6db', '40px', 'congrats!');
console.log(message, style);
celebrateStyler('birthday') 

// 修复styleAndCelebrate函数，添加形参
function styleAndCelebrate(color, background, fontSize, txt, reason) 
{ 
     const { message, style } = consoleStyler(color, background, fontSize, txt);
     console.log(message, style);
     if (reason !== "birthday" && reason !== "champions") {
         celebrateStyler(reason, message, style);
     } else {
         celebrateStyler(reason);
     }
} 
styleAndCelebrate('#ef7c8e', '#fae8e0', '30px', 'You made it!', 'champions')

方案2：全局变量声明（仅满足特定作业要求，不推荐） #

如果作业要求必须跨函数访问var声明的变量，可以将变量提升到全局作用域（会污染全局命名空间，实际开发不建议）：

var message, style;

function consoleStyler(color, background, fontSize, txt) 
{ 
    message = "%c" + txt;
    style = `color: ${color}; background: ${background}; fontSize: ${fontSize}`;
    console.log(message, style) 
} 

function celebrateStyler(reason)
 { 
    var fontStyle = "color: tomato; font-size: 50px"; 
    if (reason == "birthday")  {  
        console.log('%cHappy Birthday', fontStyle) 
    }
    else if (reason == 'champions') {
        console.log('%cCongrats on the title!', fontStyle)
    }
    else { 
        console.log(message, style)
    }
 } 

consoleStyler('#1d5c63', '#ede6db', '40px', 'congrats!');
celebrateStyler('birthday') 

function styleAndCelebrate(color, background, fontSize, txt, reason) 
{ 
     consoleStyler(color, background, fontSize, txt);
     celebrateStyler(reason);
} 
styleAndCelebrate('#ef7c8e', '#fae8e0', '30px', 'You made it!', 'champions')

内容的提问来源于stack exchange，提问作者Mr.Fearless