{"id":20249,"date":"2020-07-25T06:02:41","date_gmt":"2020-07-25T13:02:41","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=20249"},"modified":"2021-01-04T02:50:45","modified_gmt":"2021-01-04T10:50:45","slug":"js-comparison","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/js-comparison\/","title":{"rendered":"JavaScript Operators: Comparison and Equality"},"content":{"rendered":"\n

We first encountered operators when we were children learning arithmetic in elementary school. Operators are the symbols in between two operands. In web development, we use operators to compare two values to determine if an expression is true or false. In this article, we\u2019ll take a look at comparison (a.k.a relational) and equality operators \u2013 they are the two most common types of operators you will encounter in JavaScript.<\/em><\/p>\n\n\n\n

Comparison Operators<\/h2>\n\n\n\n

There will be times in creating logic to solve problems that you will need to use comparison or relational operators to conditionally render something to the screen. Let\u2019s take a look at the most common ones you will see in your code. Here is the object we will use for the next few operators:
<\/p>\n\n\n\n

  1. in<\/strong> \u2013 use the in<\/em> operator to see if there is a property in your object:<\/li><\/ol>\n\n\n\n
    const cityData =  {\n     city: "San Jose",\n     state: "California",\n     area: 181.36,\n     land: 178.24,\n     water: 3.12,\n     urban: 342.27,\n     metro: 2694.61,\n     elevation: 82,\n     population: 1021795,\n     timezone: "Los_Angeles\/Pacific",\n     website: "www.sanjoseca.gov"\n}\nconsole.log("metro" in cityData); \/\/true\nconsole.log("country" in cityData); \/\/false<\/pre><\/div>\n\n\n\n
    1. instanceof<\/strong> \u2013 <\/strong>use the instanceof<\/em> operator to ask if an object is an instance of a class or constructor function.<\/li><\/ol>\n\n\n\n
        function Class(subject, teacher, numStudents) {\n     this.subject = subject;\n     this.teacher = teacher;\n     this.numStudents = numStudents;\n   }\n   const classroom = new Class('Academic Geometry', 'Jane Doe', 24);\n \n   console.log(classroom instanceof Class);\n   \/\/ expected output: true\n \n   console.log(classroom instanceof Object);\n   \/\/ expected output: true<\/pre><\/div>\n\n\n\n
      1. Less than ( < ), Less than or equal to ( <= ) \u2013 <\/strong>A comparison operator that returns true in a conditional statement if operand A is less than operand B. We see it most commonly when we create a for loop:<\/li><\/ol>\n\n\n\n
         \tfor(let i = 1; i <= n; i++) {\n        \/\/ code here\n    \t}\n\tfor(let i = 0; i < arr.length; i++) {\n        \/\/ code here\n   \t}<\/pre><\/div>\n\n\n\n
        1. Greater than ( > ), Greater than or equal to ( >= ) \u2013 <\/strong>A comparison operator that returns true in a conditional statement if operand A is greater than operand B. It\u2019s used quite often when we are trying to find the maximum number in an array:<\/li><\/ol>\n\n\n\n
          let maximum = -Infinity;\n   \tfor(let i = 0; i < arr.length; i++) {\n     \t  if(arr[i] >= maximum) {\n          maximum = arr[i];\n        }\n      }<\/pre><\/div>\n\n\n\n
          Note:<\/em><\/strong> >= is not the same as =>. The latter is used for big arrow functions in ES6 JavaScript syntax.<\/p>\n\n\n\n
          Equality Operators<\/h2>\n\n\n\n
          Similar to comparison operators, equality operators also evaluate to a Boolean value that declares whether or not an expression is true. 
          <\/p>\n\n\n\n
          Equality ( == ) <\/strong> vs. Identity ( === )<\/strong> \u2013 When we see equal signs ( = )<\/strong> in JavaScript, one equal sign is an assignment operator and not what we were used to when we were in math class. <\/p>\n\n\n\n
          Two equal signs is strictly an equality operator. It only checks to see if the values are equal by attempting to convert the values to the other\u2019s data type. This is called type coercion. 
          <\/p>\n\n\n\n
          console.log(8 == '8'); \/\/true<\/pre><\/div>\n\n\n\n
          Similarly, if we see a bang\/exclamation point along with one equal sign ( != )<\/strong>, known as the inequality operator, it compares two values to see if operands are not equal in number. It doesn\u2019t check for type.
          <\/p>\n\n\n\n
          console.log(8 != '4'); \/\/true<\/pre><\/div>\n\n\n\n
          Conversely, the identity operator, three equal signs ( === )<\/strong>, checks for type and number when comparing the two values.
          <\/p>\n\n\n\n
          console.log(8 === '8'); \/\/false\nconsole.log(8 === 8); \/\/true<\/pre><\/div>\n\n\n\n
          Just like the inequality operator, the nonidentity operator ( !== ) <\/strong>checks to see if the operands are unequal. In addition, it checks the type as well. If they are, the condition is true and will return true. If not, it will return false.
          <\/p>\n\n\n\n
          console.log(8 !== '8'); \/\/true\nconsole.log(8 !== 8); \/\/false<\/pre><\/div>\n\n\n\n
          <\/h2>\n\n\n\n