# JavaScript Comparisons ## Problem Statement We've talked about performing basic mathematical functions, and assigning values to variables, but how would we check to see if a value is what we're expecting? In addition to performing arithmetic and assigning value to variables, JavaScript has additional operators for comparing values. The value returned by a comparison is **always** `true` or `false`. ## Objectives 1. Identify equality operators 2. Compare numbers with the relational operators ## Identify equality operators There are four equality operators built into JavaScript: * **loose equality operator** (`==`) * **strict equality operator** (`===`) * **loose inequality operator** (`!=`) * **strict inequality operator** (`!==`) When writing JavaScript, you strongly prefer the **strict** operators, as the loose operators will return true even if the data types aren't the same. A string '42' is *not* the same as an integer 42. As developers we want to ensure that not only are the values the same, but also the data types. ### `==` Loose Equality Operator The **loose equality operator** returns `true` if two values are equal: However, it will *also* return `true` if it can perform a type conversion (e.g., changing the string `'42'` into the number `42`) that makes the two values equal: ``` 42 == '42' // => true true == 1 // => true '0' == false // => true null == undefined // => true ' ' == 0 // => true ``` This is confusing and inaccurate! It makes no sense that the string `'0'` is equal to the boolean `false` or that `null` and `undefined` — two **completely different** data types — are equivalent. ***You should prefer `===` for comparisons***. ### `===` Strict Equality Operator The **strict equality operator** returns `true` if two values are equal *without performing type conversions*. Even if the values on both sides of the operator look similar (e.g., `'42' === 42`), the `===` operator will only return `true` if the data types also match: ``` 42 === 42 // => true 42 === '42' // => false true === 1 // => false '0' === false // => false null === undefined // => false ' ' === 0 // => false ``` This is logical and accurate! ***Prefer `===` for comparisons***. ### `!=` Loose Inequality Operator The **loose inequality operator** is the opposite of `==`. It returns `true` if two values are *not* equal, performing type conversions as necessary: ``` 9000 != 9001 // => true 9001 != '9001' // => false [] != '' // => false ``` ***You should prefer `!==` for comparisons***. ### `!==` Strict Inequality Operator The **strict inequality operator** returns `true` if two values are *not* equal and does not perform type conversions: ``` 9000 !== 9001 // => true 9001 !== '9001' // => true [] !== '' // => true ``` ***You should prefer `!==` for comparisons***. ## Compare numbers with the relational operators There are four relational operators built in to JavaScript: * **greater than** (`>`), * **greater than or equals** (`>=`) * **less than** (`<`) * **less than or equals** (`<=`) These operators work in a very similar way to the equality operators: However, beware of type conversion when comparing non-numbers against numbers. For instance, when a string is compared with a number, the JavaScript engine tries to convert the string to a number: If the engine can't convert the string into a number, the comparison will always return `false`: ``` 88 >= 'hello' // => false 88 <= 'hello' // => false ``` Strings are compared with other strings lexicographically, meaning character-by-character from left-to-right. The following returns `false` because the Unicode value of `8`, the first character in `88`, is less than the Unicode value of `9`. If you aren't sure what data type you are going to be receiving, but you still need to compare them, make sure that you tell JavaScript to [convert the string to a number first](https://gomakethings.com/converting-strings-to-numbers-with-vanilla-javascript/), and then compare. ***Top Tip***: Stick to comparing *numerical* values with the relational operators and you'll be golden. ## Conclusion JavaScript contains both equality and comparison operators that assist us in writing functional code. Make sure you're preferring the strict equality operators, and only comparing numerical values with the relational operators, and you'll avoid those annoying troubleshooting errors that can drive you crazy! ## Resources * MDN * [Comparison operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) * [Equality comparisons and sameness](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness) * [JavaScript Equality Table](http://dorey.github.io/JavaScript-Equality-Table/) * [freeCodeCamp Forum — JavaScript Comparison Operators](https://forum.freecodecamp.org/t/javascript-comparison-operators/14660) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://certil-remy.gitbook.io/learn/javascript/untitled/untitled-4.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.