Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Comparison Operators

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      Comparison Operators

      JavaScript Comparison Operators

      The comparison operators in JavaScript compare two variables or values and return a boolean value, either true or false based on comparison result. For example, we can use the comparison operators to check whether two operands are equal or not.
      The comparison operators are used in logical expressions. A logical expression is evaluated to either true or false.
      The comparison operators are binary operators as they perform operations on two operands. The operands can be numerical, string, logical, or object values.
      There are eight comparison operators in JavaScript to perform different types of comparison. Here, we have given a table explaining each comparison operator with the example.
      Operator
      Description
      Example
      ==
      Equal
      x == y
      !=
      Not Equal
      x != y
      ===
      Strict equality (equal value and equal type)
      x === y
      !==
      Strict inequality (not equal value or not equal type)
      x !== y
      >
      Greater than
      x > y
      <
      Less than
      x < y
      >=
      Greater than or Equal to
      x >= y
      <=
      Less than or Equal to
      x <= y

      How comparison is done?

      If both operands are of same type, the comparison operators compare the values. However, if the operands are of different types, JavaScript perform appropriate type conversion for the comparison. This is known as type coercion.
      The comparison is done by checking the numerical values of the operands if both the operands are numbers. The strings are compared based on lexicographical ordering, using Unicode values. The following type coercion is done when a string is compared with a number.
      • If the string contains only numeric value, it is converted to number type.
      • If the string contains non-numeric values as well, it will be converted to NaN.
      • If string is empty, it is converted to zero.
      The strict equality === and strict inequality !== operators perform strict comparison. These operators don't perform type conversion before performing comparison operation.

      Dealing with falsy values

      There are some falsy values in JavaScript. JavaScript deals with these falsy values differently while performing the comparison. Followings are the flasy values
      • 0 (zero)
      • false
      • ' ' or " " (Empty String)
      • null
      • undefined
      • NaN
      All comparison operators (excepts === and !==) converts false and empty string to zero before performing comparison.
      In addition to above, the less and, greater than operators (<, <=, >, >=) convert null to zero and undefined to NaN.

      JavaScript Equality (==) Operator

      The "equality" operator checks if the value of two operands are equal or not. It returns true if the operands are equal, otherwise it returns false. If the operands are of different types, it performs type conversion and then compare the operands.
      Let’s look at some examples of comparison with no type conversion. The both operands are of same type.
      const a = 10;
      const b = 20;
      a == 10; //true
      a == b; // false 
      "Hello" == "Hello"; // true
      Now let’s check some example of comparison with type conversion. Here the operands are of different types.
      5 == '5'; // true
      0 == false; // true
      0 == ''; // true
      In the first example above, '5' is converted to 5 (string to number conversion). The false and empty string (' '), are converted to zero (0) before comparison.

      Example

      The following code shows how to use equality operator in JavaScript
      <html>
      <body>
      <div id="output"></div>
      <script>
        const a = 10;
        const b = 20;
        let result = (a == b);
        document.getElementById("output").innerHTML = "(a == b) => " + result;
      </script>
      <p> Set the variables to different values and then try...</p>
      </body>
      </html>

      JavaScript Inequality (!=) Operator

      The "inequality" operator checks if the values of two operands are not equal. It returns true if the operands are not equal, otherwise it returns false. Same as the equality operator, type conversion is performed if the operands are not of same type.
      In the example below two values of same type are compared for inequality check. If the values are not equal, the inequality operator will return true.
      10 != 10; // false
      10 != 20; // true
      "Hello" != "Hello"; // false
      Let’s check for inequality when the operands are of different types
      .
      10 != '10'; // false
      0 != false; // false
      Here in first example, '10' is type casted to 10. Here string is converted to number type. In second example, false (Boolean value) is converted to zero (number).

      Example

      The following code shows how to use inequality operator in JavaScript.
      <html>
      <body>
      <div id="output"></div>
      <script>
        const a = 10;
        const b = 20;
        let result = (a != b);
        document.getElementById("output").innerHTML = "(a != b) => " + result;
      </script>
      <p> Set the variables to different values and then try...</p>
      </body>
      </html>

      JavaScript Strict Equality (===) Operator

      The "strict equality" operator checks whether the values and data types of the two operands are equal or not. It returns true if both operands are equal and of same type.
      In other words, it checks the equality of the operands without the type conversion. If the operands are of different types, it returns false without further checking the value.
      10 === 10; // true
      10 === 20; // false
      'Hello'==='Hello'; // true
      10 === '10'; // false
      0 === false; // false

      Example

      The following code shows how to use strict equality operator in JavaScript.
      <html>
      <body>
      <div id="output"></div>
      <script>
        const a = 10;
        const b = 20;
        let result = (a === b);
        document.getElementById("output").innerHTML = "(a === b) => " + result;
      </script>
      <p> Set the variables to different values and then try...</p>
      </body>
      </html>

      Strict Inequality (!==) Operator

      The "strict inequality" operator checks whether the two operands are not equal in value or type. It returns true if the operands are of same type but not equal or are of different types.
      Same as strict equality operator, it also first checks the inequality of operands without type conversion. If the operands are of different type, it will return true without further checking the value.
      10 !== 10; //returns false
      10 !== 20; // returns true
      'Hello'!=='Hello'; // returns false
      10 !== '10'; //return true
      0 !== false; //returns true

      Example

      The following code shows how to use strict inequality operator in JavaScript.
      <html>
      <body>
      <div id="output"></div>
      <script>
        const a = 10;
        const b = 20;
        let result = (a !== b);
        document.getElementById("output").innerHTML = "(a !== b) => " + result;
      </script>
      <p> Set the variables to different values and then try...</p>
      </body>
      </html>

      JavaScript Greater Than (>) Operator

      The "greater than" operator checks if the value of the left operand is greater than the value of the right operand. If yes, it returns true otherwise it returns false.
      20 > 10; // true
      10 > 10; // false
      "ab" > "aa"; // true
      10 > '5'; // true

      Example

      The following code shows how to use greater than operator in JavaScript −
      <html>
      <body>
      <div id="output"></div>
      <script>
        const a = 10;
        const b = 20;
        let result = (a > b);
        document.getElementById("output").innerHTML = "(a > b) => " + result;
      </script>
      <p> Set the variables to different values and then try...</p>
      </body>
      </html>

      Greater Than or Equal (>=) Operator

      The "greater than or equal" operator checks if the value of the left operand is greater than or equal to the value of the right operand. If yes, it returns true otherwise false.
      10 >= 5; // true
      5 >= 5; // true
      "ab" >= "aa"; // true
      10 >= '5'; // true

      Example

      The following code shows how to use greater than or equal to operator in JavaScript.
      <html>
      <body>
      <div id="output"></div>
      <script>
        const a = 10;
        const b = 20;
        let result = (a >= b);
        document.getElementById("output").innerHTML = "(a >= b) => " + result;
      </script>
      <p> Set the variables to different values and then try...</p>
      </body>
      </html>

      JavaScript Less Than (<) Operator

      The "less than operator" returns true if the value of the left operand is less than the value of the right operand, otherwise it returns false.
      10 < 20; // true
      5 < 5; // false
      "ab" < "aa"; // true
      10 < '5'; // false

      Example

      The following code shows how to use less than operator in JavaScript −
      <html>
      <body>
      <div id="output"></div>
      <script>
        const a = 10;
        const b = 20;
        let result = (a < b);
        document.getElementById("output").innerHTML = "(a < b) => " + result;
      </script>
      <p> Set the variables to different values and then try...</p>
      </body>
      </html>

      JavaScript Less Than or Equal (<=) Operator

      The less than or equal operator checks if the value of the left operand is less than or equal to the value of the right operand. If yes, then the condition becomes true.
      10 <= 20; // true
      5 <= 5; // true
      "ab" <= "aa"; // false
      10 <= '5'; // false

      Example

      The following code shows how to use less than or equal operator in JavaScript −
      <html>
      <body>
      <div id="output"></div>
      <script>
        const a = 10;
        const b = 20;
        let result = (a <= b);
        document.getElementById("output").innerHTML = "(a <= b) => " + result;
      </script>
      <p> Set the variables to different values and then try...</p>
      </body>
      </html>

      Comparing null, undefined and NaN

      In JavaScript, null, undefined and NaN are the falsy values that are not converted to zero (0) for the comparison.
      
      0 == null; // returns false
      0 == undefined; // returns false
      0 == NaN; // returns false
      null and undefined are weekly equal.
      
      null == undefined; // returns true
      null === undefined; // returns false
      The type of NaN is number but it is not equal to zero. Interestingly NaN is not equal to NaN itself.
      NaN == NaN; // returns false