理解函数无 return 语句时返回 undefined——freeCodeCamp 基础 JavaScript 挑战逐行拆解

理解函数无 return 语句时返回 undefined——freeCodeCamp 基础 JavaScript 挑战逐行拆解【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp在 JavaScript 中函数并非必须包含return语句当函数没有显式返回任何值时调用它只会得到undefined。本文围绕 freeCodeCamp 课程 Basic JavaScript基础 JavaScript模块中的同名官方挑战Understanding Undefined Value returned from a Function展开先剖析概念与官方示例再带你通过addFive编程题完成任务并对照课程仓库中的校验逻辑与相邻章节从原理到实战彻底掌握“副作用函数 vs 返回值函数”的区别。挑战文件在课程中的定位这份挑战是 freeCodeCamp 开源课程仓库中的一份 Markdown 教学文件路径为curriculum/challenges/english/blocks/basic-javascript/598e8944f009e646fc236146.md属于Basic JavaScript基础 JavaScript学习块。该块共有数百道挑战文件都集中在curriculum/challenges/english/blocks/basic-javascript/目录下。从块的顺序配置 basic-javascript.json第 223–225 行可以看出本挑战紧跟在Global vs. Local Scope in Functions之后、Assignment with a Returned Value之前前面还经历过 Return a Value from a Function with Return第 200–201 行的铺垫。也就是说课程已经讲过“用return把值送出函数”这道题反其道而行专门训练你认识“没有return时函数返回undefined”这一 JavaScript 内置行为。文件头部 YAML front matter 记录了元信息--- id: 598e8944f009e646fc236146 title: Understanding Undefined Value returned from a Function challengeType: 1 forumTopicId: 301177 dashedName: understanding-undefined-value-returned-from-a-function ---其中id是该挑战在课程体系中的唯一标识结构文件中正是用它来排序与引用dashedName用于 URL 与目录命名challengeType: 1标识其题型为经典的“补全代码”型练习。课程仓库使用 challenge-schema.js 等 JSON Schema / Joi 规则对所有挑战文件进行结构性校验因此每一份挑战都遵循统一的# --description--、# --instructions--、# --hints--、# --seed--、# --solutions--分段格式。核心概念函数不一定非要返回一个值原文档开宗明义给出结论函数可以包含return语句但并不是必须的。当函数没有return语句时你调用它函数会执行内部代码但其返回的值是undefined。这里需要区分两件同时发生但彼此独立的事执行代码函数体里的语句照常从上到下执行副作用修改外部变量、打印日志、操作 DOM 等全部生效产生返回值由于函数体没有执行return 某个值JavaScript 引擎在函数执行完毕后会自动返回特殊值undefined。对比前面学过的有返回值的函数Return a Value from a Function with Return 中的写法是function plusThree(num) { return num 3; } const answer plusThree(5); // answer 8return num 3;既把计算结果8“交还”给调用方又立刻终止函数继续执行。而本挑战中的函数没有这一行所以调用结果永远是undefined。官方示例逐行拆解addSum原文档的示例完整如下let sum 0; function addSum(num) { sum sum num; } addSum(3);执行推演步骤执行语句sum的值函数返回值1let sum 0;0—2定义函数addSum此时不执行函数体0—3addSum(3);进入函数体num为33执行sum sum numundefined要点在于addSum修改了全局变量sum从0变成了3这是副作用但它既没有写return sum;也没有写return 3;因此当你执行console.log(addSum(3))时会打印出undefined。这里同时呼应了课程前序章节Global Scope and Functions中讲过的规则在函数内部未使用let/const/var声明而直接赋值的变量会引用全局作用域中的同名变量。这正是addSum能“隔空”改动外部sum的原因——它访问的是全局变量本身而不是本地副本。挑战任务实现一个“只做加法、不返回值”的 addFive原文档的指令# --instructions--是创建一个不带任何参数的函数addFive。这个函数把5加到sum变量上但它的返回值是undefined。需要注意指令里的两个硬性要求不带参数function addFive()调用时不需要也不接受入参返回值为undefined意味着函数体里不能写return sum;之类的语句否则返回值就不再是undefined题目将无法通过。给定的起始代码seed挑战给出如下 seed起点代码你要改动的是// Only change code below this line与// Only change code above this line之间的区域// Setup let sum 0; function addThree() { sum sum 3; } // Only change code below this line // Only change code above this line addThree(); addFive();注意最后两行在 seed 中已经调用了addThree();和addFive();前者已定义好会把sum加 3后者需要你补全定义把sum再加 5。两个函数都执行完毕后sum应等于3 5 8。测试约束hints逐条解读课程为本题内置了 4 条自动化测试它们决定了“什么样的实现算通过”。下面逐一翻译原文档中的断言1.addFive应该是一个函数assert(typeof addFive function);typeof运算符检查实体类型只有用function关键字或箭头函数赋值等真正定义了函数才会得到function。这保证你不会漏写函数定义或把它定义成普通值。2. 两个函数都运行后sum应等于8assert(sum 8);这条由执行推演保证初始sum 0→addThree()使sum 0 3 3→addFive()使sum 3 5 8。由于测试代码运行在全局作用域它可以直接读到被函数修改过的全局sum。3.addFive()的返回值应为undefinedassert(addFive() undefined);这是本挑战的“题眼”。它直接调用一次addFive()并把返回值与undefined做严格相等比较。如果函数体里写了return sum;返回8或任何return值这一条就会失败。4. 在addFive内部应当把5加到sum上assert( __helpers.removeWhiteSpace(addFive.toString()).match(/sumsum\5|sum\5/) );这条测试考察实现方式。Function.prototype.toString()会把函数源码序列化为字符串__helpers.removeWhiteSpace去掉所有空白字符后用正则匹配两种合法写法sumsum5先读后写sum5复合赋值运算符等价写法。两者都表示“把sum加上 5 后再写回”。因此下面两种函数体都能通过function addFive() { sum sum 5; }或function addFive() { sum 5; }注意假如你不小心把5写进sum例如sum 5;虽然sum最终可能不是8也会因正则匹配失败而无法通过——这正是字符串级断言约束具体写法的意义。参考答案与运行结果推演原文档官方给出的完整解答# --solutions--如下let sum 0; function addThree() { sum sum 3; } function addFive() { sum sum 5; } addThree(); addFive();代码执行过程sum 0 addThree() → 函数体执行 sum 0 3 3返回 undefined被忽略 addFive() → 函数体执行 sum 3 5 8返回 undefined被忽略 最终sum 8addThree() 与 addFive() 的返回值均为 undefined如何亲手验证在浏览器 DevTools 控制台或 Node.js 环境粘贴上述代码再追加几行即可观察到结果console.log(sum); // 8 console.log(addThree()); // undefined console.log(addFive()); // undefined由于addThree/addFive都没有returnconsole.log对它们调用的输出必然是undefined而sum作为一个被副作用修改的全局变量其值已是8。这一步验证能够帮助你直观建立“副作用 ≠ 返回值”的心智模型。相邻课程返回值的价值在于可以被赋值使用为什么课程要先讲“没有return就返回undefined”紧接着就安排Assignment with a Returned Value56533eb9ac21ba0edf2244c3.md因为undefined是“拿不到任何东西”的信号。假如你写let result addFive(); // result 变成 undefined调用方的变量只会得到undefined无法进一步参与运算。而一旦函数用return把结果交还出来就可以把它赋值给变量继续使用——这正是右侧先求值、再赋值的规则function processArg(num) { return (num 3) / 5; } let processed 0; processed processArg(7); // processed 2两相对照结论清晰场景函数是否影响外部变量调用表达式的值只有函数体语句如sum sum 5;是副作用undefined函数体含return 表达式;视代码而定return后表达式的值因此设计函数前要想清楚你的目的是要函数“做事”产生副作用还是要函数“给结果”返回并赋值。混合使用本身合法但容易引入混乱addFive挑战正是通过“故意不返回值”让你感受二者边界。总结从这份 挑战原文 可以提炼三条可复用的知识点没有return语句的函数其调用结果恒为undefined即便函数体对外部变量产生了影响修改全局/外部变量属于副作用它与“返回一个值”是两种不同的函数行为应能清晰区分在 freeCodeCamp 的这类challengeType: 1挑战中# --hints--既做类型断言、数值断言也会用Function.prototype.toString()配合正则检查函数体写法作答时应严格贴合题目措辞。掌握了“何时该用return、何时函数注定返回undefined”你就为后续的函数式组合、递归、回调等 JavaScript 进阶特性打下了扎实基础。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考