From 4df9bbbcdc340de7e760d6d2a75127d5453a8b44 Mon Sep 17 00:00:00 2001 From: Clarence Bakosi Date: Fri, 31 Oct 2025 20:29:55 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to Number Constructor lesson (#63382) --- .../6732c69d82814160951b1aa7.md | 34 ++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-types-and-objects/6732c69d82814160951b1aa7.md b/curriculum/challenges/english/blocks/lecture-working-with-types-and-objects/6732c69d82814160951b1aa7.md index 576e8099214..2dbe914ac75 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-types-and-objects/6732c69d82814160951b1aa7.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-types-and-objects/6732c69d82814160951b1aa7.md @@ -5,19 +5,25 @@ challengeType: 19 dashedName: what-is-the-number-constructor-and-how-does-it-work-for-type-coercion --- -# --description-- +# --interactive-- The `Number()` constructor is used to create a number object. The number object contains a few helpful properties and methods like the `isNaN` and the `toFixed` method. Here's an example using the `Number()` constructor with the `new` keyword: +:::interactive_editor + ```js const myNum = new Number("34"); console.log(typeof myNum); // "object" ``` +::: + In this example we pass in a string literal to the `Number()` constructor and the return type is of type `object` instead of a `string`. When the `Number()` constructor is called as a function without the `new` keyword, then the return value will be the primitive number type. Most of the time you will be using the `Number()` constructor to convert other data types to the number data type. Here's an example of converting a string to a number: +:::interactive_editor + ```js const myNum = Number("100"); console.log(myNum); // 100 @@ -25,26 +31,38 @@ console.log(myNum); // 100 console.log(typeof myNum); // number ``` +::: + This is helpful when you are getting input from the user and you need to convert that string input to a number so you can perform mathematical calculations. If you try to call the `Number()` constructor through an empty string then the result will be the number `0`: +:::interactive_editor + ```js const num = Number(""); console.log(num); // 0 ``` +::: + This is because JavaScript will try to parse the string and since it doesn't contain any digits, the result will be zero. If you try to pass in a string with random characters then the result will be `NaN` or "Not a Number". +:::interactive_editor + ```js const num = Number("random"); console.log(num); // NaN ``` +::: + When working with booleans, `true` returns `1` because `true` gets converted to one and `false` returns `0` because `false` is converted to zero. +:::interactive_editor + ```js const boolTrue = Number(true); const boolFalse = Number(false); @@ -53,8 +71,12 @@ console.log(boolTrue); // 1 console.log(boolFalse); // 0 ``` +::: + If you pass in `null`, the result will be `0` and if you pass `undefined`, the result will be `NaN`. +:::interactive_editor + ```js const undefinedNum = Number(undefined); const nullNum = Number(null); @@ -63,10 +85,14 @@ console.log(undefinedNum); // NaN console.log(nullNum); // 0 ``` +::: + When working with arrays there are a few things to consider. An empty array will return `0`. An array with a single number will return that number. An array with multiple numbers returns `NaN`. And an array with string(s) will also return `NaN`. +:::interactive_editor + ```js const emptyArr = Number([]); const arrOneNum = Number([7]); @@ -81,8 +107,12 @@ console.log(arrStr); // NaN console.log(arrMultiStr); // NaN ``` +::: + When working with objects, the result is always `NaN`. +:::interactive_editor + ```js const obj1 = Number({}); const obj2 = Number({2: 2}); @@ -95,6 +125,8 @@ console.log(obj3); // NaN console.log(obj4); // NaN ``` +::: + In conclusion, you'll mostly use the `Number()` constructor for type conversion more than creating a number or a number object. # --questions--