From b2bd868b5af43948b34883a06b87838ec03eb27a Mon Sep 17 00:00:00 2001 From: Clarence Bakosi Date: Thu, 30 Oct 2025 11:15:42 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to How Do Comparisons Work with Null and Undefined Data Types (#63267) --- .../672d26917a8ab3220c038a42.md | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/lecture-understanding-comparisons-and-conditionals/672d26917a8ab3220c038a42.md b/curriculum/challenges/english/blocks/lecture-understanding-comparisons-and-conditionals/672d26917a8ab3220c038a42.md index fe324e7aa26..0750a9a0028 100644 --- a/curriculum/challenges/english/blocks/lecture-understanding-comparisons-and-conditionals/672d26917a8ab3220c038a42.md +++ b/curriculum/challenges/english/blocks/lecture-understanding-comparisons-and-conditionals/672d26917a8ab3220c038a42.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: how-do-comparisons-work-with-null-and-undefined-data-types --- -# --description-- +# --interactive-- In JavaScript, `null` and `undefined` are two distinct data types that represent the absence of a value, but they behave differently in comparisons. Understanding how these types interact in various comparison scenarios is crucial for writing robust and bug-free code. @@ -15,18 +15,28 @@ The `null` type, on the other hand, is an assignment value that represents a del When comparing `null` and `undefined` using the equality operator (`==`), JavaScript performs type coercion. This means it tries to convert the operands to the same type before making the comparison. In this case, `null` and `undefined` are considered equal: +:::interactive_editor + ```js console.log(null == undefined); // true ``` +::: + However, when using the strict equality operator (`===`), which checks both value and type without performing type coercion, `null` and `undefined` are not equal: +:::interactive_editor + ```js console.log(null === undefined); // false ``` +::: + This difference is important to keep in mind when writing conditional statements or performing equality checks in your code. When comparing `null` or `undefined` with other values using the equality operator (`==`), the behavior can be unexpected. For example: +:::interactive_editor + ```js console.log(null == 0); // false console.log(null == ''); // false @@ -34,22 +44,32 @@ console.log(undefined == 0); // false console.log(undefined == ''); // false ``` +::: + These comparisons return `false` because `null` and `undefined` are only equal to each other (and themselves) when using the equality operator. The behavior of `null` in other comparisons is particularly tricky: +:::interactive_editor + ```js console.log(null > 0); // false console.log(null == 0); // false console.log(null >= 0); // true ``` +::: + `undefined`, on the other hand, always converts to `NaN` in numeric contexts, which makes all numeric comparisons with `undefined` return `false`: +:::interactive_editor + ```js console.log(undefined > 0); // false console.log(undefined < 0); // false console.log(undefined == 0); // false ``` +::: + Given these nuances, it's generally recommended to use the strict equality operator when comparing values, especially when dealing with `null` and `undefined`. This approach helps avoid unexpected type coercion and makes your code's behavior more predictable. In summary, while `null` and `undefined` are both used to represent the absence of a value, they behave differently in comparisons. Understanding these differences is key to writing clear and error-free JavaScript code.