What will be the output of: true + false

In JavaScript, the expression `true + false` involves type coercion, where the boolean values are converted to numbers before performing the addition operation. Understanding how JavaScript handles this operation is crucial for any frontend developer, as it highlights the language's dynamic typing and type coercion mechanisms.

When evaluating the expression, JavaScript converts the boolean values to their numeric equivalents:

• true is converted to 1
• false is converted to 0

Thus, the expression can be simplified as follows:

true + false  // evaluates to 1 + 0

The result of the addition is 1. Therefore, the output of the expression `true + false` is 1.

Understanding Type Coercion

Type coercion is a fundamental concept in JavaScript that can lead to unexpected results if not properly understood. JavaScript automatically converts values from one type to another when performing operations. This is particularly common with arithmetic operations involving booleans, strings, and numbers.

Practical Example

Consider the following examples to illustrate type coercion:

console.log(true + true);   // Output: 2
console.log(false + false);  // Output: 0
console.log(true + false);   // Output: 1
console.log(true + "1");     // Output: "true1"
console.log(1 + "1");        // Output: "11"

In the first two examples, both `true` values convert to `1`, and both `false` values convert to `0`, resulting in straightforward numeric outputs. However, when adding a boolean to a string, JavaScript converts the boolean to a string, leading to concatenation instead of arithmetic addition.

Best Practices

To avoid confusion and potential bugs in your code, consider the following best practices when dealing with type coercion:

• Be explicit with types: Use explicit conversions when necessary. For example, use `Number(true)` or `String(false)` to avoid ambiguity.
• Use strict equality: Prefer `===` and `!==` over `==` and `!=` to avoid unintended type coercion during comparisons.
• Understand the context: Be aware of the context in which your expressions are evaluated, especially when mixing types.
• Use linters: Utilize tools like ESLint to catch potential issues related to type coercion and enforce coding standards.

Common Mistakes

Even experienced developers can fall into traps when dealing with type coercion. Here are some common mistakes to watch out for:

• Assuming boolean arithmetic behaves like other languages: Unlike languages such as Python or Java, JavaScript treats booleans as numbers in arithmetic operations.
• Neglecting string coercion: Forgetting that adding a number and a string results in string concatenation can lead to unexpected outputs.
• Overlooking falsy values: Be cautious with values that evaluate to false in a boolean context (e.g., `0`, `""`, `null`, `undefined`, and `NaN`).

In conclusion, the expression `true + false` evaluates to `1` due to JavaScript's type coercion rules. Understanding these rules and following best practices can help prevent common pitfalls and lead to more robust and predictable code.