Testing for weird values

Learning Goals

At the end of this Tutorial, you will be able to:

• Understand how type coercion works with these operators: + - * and /
• Understand the difference between the loose (==) and strict (===) equality operators, and know when to use each one.
• Understand the difference between null, undefined and NaN values, and the situations that can produce such values in your code.
• Understand the concepts of falsy and truthy in JavaScript.

Understanding type coercion

In certain situations, JavaScript automatically coerces (converts) values from one data type to another. This can cause unexpected results or fatal errors in your code.

Consider the following examples:

Copy // === DATA TYPE COERCION ===
    
// + operator examples
console.log(5 + "10");     // "510" (string concatenation)
console.log("5" + 10);     // "510" (string concatenation)
console.log("5" + "10");   // "510" (string concatenation)
        
// -, * and / operator examples
console.log(5 - "10");     // -5 (number subtraction)
console.log("5" * 10);     // 50 (number multiplication)
console.log("5" / "10");   // 0.5 (number division)

In the above code you can see that JavaScript:

• + When used with a string and a number, this operator coerces the number to a string. See below.

    console.log(5 + "10"); // + operator coerces number 5 to string "5"
  // Outputs string 126

• -, * and /: When used with string and a number, the subtraction, multiplication and division operators coerce the string to a number. See below.

    console.log(5 - "10") // - operator coerces string "10" to number 10;
  // Outputs number -5
  

Here is a general purpose function to demonstrate type coercion.

Copy // Function to demonstrate type coercion
function demonstrateCoercion(value1, value2) {
    console.log(`Addition: ${value1} + ${value2} = ${value1 + value2}`);
    console.log(`Subtraction: ${value1} - ${value2} = ${value1 - value2}`);
    console.log(`Multiplication: ${value1} * ${value2} = ${value1 * value2}`);
    console.log(`Division ${value1} / ${value2} = ${value1 / value2}`);
}
    
demonstrateCoercion(5, "10");
demonstrateCoercion("5", 10);

To avoid surprises, it's good practice to:

• Convert strings to numbers explicitly when doing arithmetic.
• Use strict equality (===) when comparing values.
• Test the type of values before performing operations.

Loose (==) and strict (===) equality

JavaScript provides two types of equality operators:

• Loose equality (==): This operator performs type coercion before comparing two values. Only the values need to be the same. The data types can be different. See below.

    1 == "1" // Yes. This is true.

• Strict equality (===): This does not perform type coercion. The values and the data types must be the same. See below.

    1 === "1" // No! This is false.
  1 === 1  // Much better. This is true. Same data type.
  "1" === "1"  // Again, this is also true. Same data type.
  false === false  // Also true. Same data type.
  true !== false  // True too. Same data type.

Copy the following to your workfile.

Copy // Function to compare values using == and === operators
function compareValues(value1, value2) {
console.log(`Testing: ${value1} vs ${value2}`);
console.log(`Loose equality (==): ${value1 == value2}`);
console.log(`Strict equality (===): ${value1 === value2}`);
console.log('---');
}

// Test different combinations
compareValues(5, "5");      // number vs string
compareValues(0, false);    // number vs boolean
compareValues("", false);   // empty string vs boolean
compareValues(null, undefined); // null vs undefined

Normal (non-weird) data types

Up to now you have been working with four basic data types in JavaScript.

Weirdly beyond boolean true or false

Like other programming languages, JavaScript supports boolean variables that can have one of two possible and opposite values:

• The value stored in the variable could be true
• Or the value could be false.

No other possible value is allowed.

Boolean variables typically have names that begin with 'is.' See some examples of booleans below.

// Declaring some typical Boolean variables
let isLoggedIn; // Could be 'true' or 'false'.
let isMember; // Could be 'true' or 'false'.
let isAdminUser; // Could be 'true' or 'false'.

However, JavaScript extends this basic true/false concept to include the idea of truthy/falsy.

Everything that is not falsy is considered to be truthy.

Working with some falsy values

Let's look at some examples of two falsy values.

Working with undefined

Think of undefined as JavaScript's way of saying: "This doesn't exist yet" or "This hasn't been given a value."

Copy // ======= HOW TO GENERATE 'undefined' =======
                
// 1: You declare a variable - but do not (yet) assign a value to it.
let userName;
console.log(userName);  // Outputs undefined
        
// 2: You create a function that may contain some valid code - but the function do not return anything to the program that called it.
function addTwoNums(num1, num2) {
    // This is valid code without any errors
    let sum = num1 + num2;
    // No return statement
}

// Program calls the function.
// The function exists, and DOES add the two numbers supplied as arguments.
// This is valid code without any errors.
// But the function function DOES NOT return the result back to the program.
console.log(addTwoNums(12, 8));  // Outputs undefined

Working with NaN

Think of NaN as JavaScript's way of saying: "I tried to do a math operation, but something went wrong." See the code below.

Copy // Some examples that will generate a NaN
console.log("hello" / 2);  // NaN - can't divide a word by 2
console.log(Number("hello"));  // NaN - can't convert "hello" to a number
console.log(0 / 0);  // NaN - mathematically undefined

Testing for falsy values

Here is a list of falsy types.

Some items are definite errors - undefined and NaN.

One looks like an error but is not - null.

Another falsy value is the boolean value of false.

Finally, there is an empty string and the zero number. These are not coding errors. But they might indicate an issue with the data you are working with, whether entered by a user or retrieved from a database.

You can think of falsy as meaning: actually false, an error, a deliberate 'nothing here' or a possibly suspicious empty string or zero value.

Copy // Function to test if a value is truthy or falsy
function checkTruthiness(value) {
    if (value) {
        console.log(`"${value}" is truthy`);
    } else {
        console.log(`"${value}" is falsy`);
    }
}

checktruthngess(false);  // false is falsy
checktruthngess(0);  // 0 is falsy
checktruthngess("");  // empty string is falsy
checktruthngess(undefined);  // undefined is falsy
checktruthngess(null);  // null is falsy
checktruthngess(NaN);  // NaN is falsy

When the condition if (value) is evaluated, JavaScript coerces the value into a boolean:

• If the value is truthy, the if {} block runs.
• If the value is falsy, the else {} block runs.

In summary, a value is considered truthy if it evaluates to a boolean true when used in a conditional statement (if (value)). And value is considered falsy if it evaluates to false when used in a conditional statement.