freeCodeCamp 教程拆解：Understanding Uninitialized Variables——理解未初始化变量与 undefined 值

本指南基于 freeCodeCamp「Basic JavaScript」课程单元中的一道交互式挑战题（Understanding Uninitialized Variables）展开，结合其 Markdown 源文件与仓库中的课程结构与校验代码，系统讲解 JavaScript 变量「声明即初始化为 undefined」这一底层行为，以及它导致 NaN 与字符串 "undefined" 的来龙去脉。读完本文，你将掌握如何初始化变量、读懂挑战的自动判题用例，并能独立在 freeCodeCamp 的课程框架中验证正确答案。

挑战题定位：它在 freeCodeCamp 课程中的位置

这道题在仓库中对应的源文件为 curriculum/challenges/english/blocks/basic-javascript/56533eb9ac21ba0edf2244aa.md。从课程的块结构文件 curriculum/structure/blocks/basic-javascript.json 可以确认，它是「Basic JavaScript」块的第 7 道题目（该块共 460 行的结构清单中位于 challengeOrder 数组内），其前置题目依次为 Comment Your JavaScript Code、Declare JavaScript Variables、Storing Values with the Assignment Operator、Assigning the Value of One Variable to Another、Initializing Variables with the Assignment Operator、Declare String Variables。

该挑战文件本身带有完整的元数据 frontmatter：

字段	取值	含义
id	56533eb9ac21ba0edf2244aa	全局唯一的挑战标识，供题目关联与状态记录使用
title	Understanding Uninitialized Variables	挑战标题
challengeType	1	题目类型编号，对应 js（JavaScript 编程题）
forumTopicId	18335	关联的论坛讨论主题 ID
dashedName	understanding-uninitialized-variables	用于 URL 的连字符形式名称

其中 challengeType: 1 的具体含义可以在 packages/shared/src/config/challenge-types.ts 中查到：该文件中 const js = 1; 之后被导出为 challengeTypes.js。仓库的挑战结构校验器 curriculum/schema/challenge-schema.js 对 title、id、challengeType、description、tests 等字段均有强制约束，也就是说每个 .md 挑战源文件都必须同时具备可展示的题干、可运行的种子代码和可执行的测试断言。

核心知识点：声明变量即获得 undefined 初始值

题目说明（--description-- 小节）给出了一条 JavaScript 的底层事实：

When JavaScript variables are declared, they have an initial value of undefined.

也就是说，在 JavaScript 中，只声明（declare）而不初始化（initialize）变量时，引擎会自动为它赋一个特殊值 undefined。undefined 是 JavaScript 的原始类型之一，表示「值尚未被定义」。

由此派生出两个典型后果，正是这道题想让你直观感受的：

1. 对 undefined 做数学运算，结果会是 NaN。NaN 是 "Not a Number"（非数字）的缩写。因为 JavaScript 在算术运算中会把操作数隐式转换为数字，而 undefined 无法转换为有效数字，于是得到 NaN。
2. 把字符串与 undefined 做拼接，会得到字符串 "undefined"。字符串连接运算符 + 会把 undefined 强制转换为字符串字面量 "undefined"，于是得到包含六个字符 u-n-d-e-f-i-n-e-d 的普通字符串。

逐行读懂种子代码的问题所在

本挑战在 Markdown 的 --seed-- / --seed-contents-- 小节中给出了如下初始代码：

// Only change code below this line
var a;
var b;
var c;
// Only change code above this line

a = a + 1;
b = b + 5;
c = c + " String!";

代码被两个注释切分成上下两段：

• 上方区（// Only change code above this line 之上）：是你被允许修改的部分。目前三个变量只有 var 声明，没有任何赋值。
• 下方区（// Only change code above this line 之下）：是既定逻辑，禁止改动。它分别对 a、b、c 做一次赋值运算。

如果什么都不改直接运行，会发生什么？

• a = a + 1：此时 a 的值为 undefined，undefined + 1 得 NaN，于是 a 变成 NaN。
• b = b + 5：同理，b 也变成 NaN。
• c = c + " String!"：undefined 与字符串拼接得到 "undefined String!"，c 变成包含 "undefined" 文本的字符串。

这正是本节要警示的行为：声明了却未初始化的变量，会在参与运算时把错误一路传导下去——要么产生一个不是数字的数字 NaN，要么在字符串里悄悄混入一个看起来像占位符的 "undefined"。

解题步骤：在声明时就完成初始化

题目指令（--instructions--）要求你初始化 a、b、c 三个变量，使它们不再为 undefined：

• a 初始化为数值 5（加上下方代码的 a + 1 后最终为 6）；
• b 初始化为数值 10（加上 b + 5 后最终为 15）；
• c 初始化为字符串 "I am a"（加上 " String!" 后最终为 "I am a String!"）。

在种子代码允许修改的区域内，把声明和赋值合并为一条语句即可：

// Only change code below this line
var a = 5;
var b = 10;
var c = "I am a";
// Only change code above this line

a = a + 1;
b = b + 5;
c = c + " String!";

仓库中 --solutions-- 小节提供的标准解与上面的写法完全一致。这里存在两个值得注意的设计点：

1. 三个变量的赋值运算（a = a + 1 等）被放在「禁止修改」的区域，说明本挑战只考察变量初始化，而不要求你理解加法或字符串拼接本身。
2. 同时它也演示了先赋值再读取的重要性——在下方区第一次读取 a、b、c 之前，它们必须已经拥有合法的初始值，否则下方预置逻辑产生的将是 NaN 与 "undefined String!"。

逐条解读自动化测试用例

挑战的 --hints-- 小节对应 freeCodeCamp 的自动判题系统。每一条 hint 都由一段说明文字和一段可执行的断言（assert）组成。逐条拆解如下。

测试一：a 必须是数值且最终等于 6

assert(typeof a === 'number' && a === 6);

typeof a === 'number' 用来排除「未初始化的 undefined」以及「运算后产生的 NaN」。注意 typeof NaN 的结果恰恰是 "number"，所以该用例用双重条件 typeof a === 'number' && a === 6 收紧约束：不仅要 a 的类型是数字，而且 NaN 与 6 的 === 比较为 false（NaN 连自己都不等于自己），因此只有初始化为 5、随后加 1 得到 6 才能通过。

测试二：b 必须是数值且最终等于 15

assert(typeof b === 'number' && b === 15);

逻辑与测试一相同，对应初始值 10 加上 5。

测试三：c 中不能含有 undefined，且最终为 "I am a String!"

assert(!/undefined/.test(c) && c === 'I am a String!');

这一条是本节教学点的直接验证：如果 c 未初始化就参与拼接，结果会是 "undefined String!"，正则 /undefined/ 会命中其中的 "undefined"，于是 !/undefined/.test(c) 为 false，用例失败。只有当 c 以 "I am a" 初始化后，拼接结果 "I am a String!" 中不含 "undefined" 且与目标字符串完全相等，才能通过。它也从侧面验证了题目描述中「把字符串与 undefined 拼接会得到字符串 undefined」的说法。

测试四：禁止改动下方预置代码

assert(
  /a = a \+ 1;/.test(__helpers.removeJSComments(code)) &&
    /b = b \+ 5;/.test(__helpers.removeJSComments(code)) &&
    /c = c \+ " String!";/.test(__helpers.removeJSComments(code))
);

该用例先调用测试沙箱提供的辅助函数 __helpers.removeJSComments(code) 剔除代码中的注释，再用三个正则分别检查下方区预置的三条赋值语句是否仍原样存在，从而保证学习者在修改上方区时没有破坏题目设计的运算逻辑。__helpers.removeJSComments 这类在执行环境中注入的测试辅助方法在仓库的大量课程测试中都有使用，例如在 client/src/templates/Challenges/components/side-panel.test.tsx 中就能看到对 assert(/var\s+myName\s*;/.test(__helpers.removeJSComments(code))); 的同类用法。

小结：四类判题维度的对照表

测试	关注对象	判定要点
typeof a === 'number' && a === 6	变量 a	类型必须为 number 且数值精确为 6
typeof b === 'number' && b === 15	变量 b	类型必须为 number 且数值精确为 15
!/undefined/.test(c) && c === 'I am a String!'	变量 c	内容不得出现 "undefined"，且等于目标字符串
三条正则断言	下方预置代码	剔除注释后，三条赋值语句必须原样保留

排查误区：为什么 var 与后续 ES6 关键词不同

本节挑战刻意使用 var 声明变量。被 var 声明的变量在作用域创建之初就会被初始化为 undefined（即「提升 + 默认值 undefined」），因此上面讨论的 NaN 与 "undefined" 拼接现象在运行到赋值语句之前就已经埋下伏笔。

相比之下，后面课程会引入的 let、const 处理方式不同：const 必须在声明时赋值，否则直接抛出语法错误；而 let 声明的变量在真正执行到声明语句之前处于「暂时性死区」，此时读取它同样会报错（而非得到 undefined）。也就是说，「声明即等于 undefined」这一规则严格只适用于已执行到该声明语句的场景。在后续挑战「Explore Differences Between the var and let Keywords」（同样列在 curriculum/structure/blocks/basic-javascript.json 的课程顺序中）会进一步对比这些差异。理解本节中的 var 行为，是后续理解作用域与声明关键词语义差异的重要前置。

本地复现与验证建议

如果你想脱离在线编辑器独立验证本节的行为与解法，可以在任意 JavaScript 运行环境中执行以下脚本：

// 未初始化时
var a;
console.log(a);          // undefined
console.log(a + 1);      // NaN
console.log(typeof a);   // "undefined"

// 未初始化的字符串拼接
var c;
console.log(c + " String!"); // "undefined String!"

// 按题目要求初始化
var a = 5;
var b = 10;
var c = "I am a";
a = a + 1;
b = b + 5;
c = c + " String!";
console.log(a); // 6
console.log(b); // 15
console.log(c); // "I am a String!"

输出结果即可复现题目描述中「数学运算得 NaN」「字符串拼接得 undefined」的行为，以及正确初始化后的三个期望终值。

小结

「Understanding Uninitialized Variables」通过一道刻意留空的题目，把 JavaScript 初学者最容易忽略的初始化问题变成了可亲手验证的练习：声明 var a 而不赋值时，a 的初始值就是 undefined；带着 undefined 参与运算只会得到 NaN 或字符串 "undefined"。解决它的唯一办法就是在声明时给出合法的初始值。而 freeCodeCamp 的课程源码把题干、种子代码、断言与标准解统一定义在一个 Markdown 文件中，并通过 curriculum/schema/challenge-schema.js 等结构校验保证这些内容的一致性——这也使得每道挑战既是学习素材，又是可以被自动判题系统精确验证的教学单元。