Still Have Confusion between == and ===

Still Have Confusion between == and ===


JAVASCRIPT

JavaScript is a high-level, dynamic, and interpreted programming language that is widely used for building interactive and dynamic web pages, as well as for creating server-side applications. It was developed by Netscape and is now maintained by the Ecma International organization as an open standard.

  • JAVASCRIPT OPERATORS

JavaScript supports a variety of operators that are used to perform operations on values and variables. Some of the most common operators include:

  1. Arithmetic operators

  2. Assignment operators

  3. Comparison operators

  4. Logical operators

  5. String operators

  6. Ternary operator

  7. Unary operators

  8. Spread operator

These are just some of the most commonly used operators in JavaScript. Understanding these operators and how to use them is an essential part of programming in JavaScript.

  • Comparison operators

In JavaScript, Comparison operators are used to comparing values to determine if they are equal or not. There are two types of Comparison operators:

  1. The equality operator (==).

  2. The strict equality operator (===).

  • The equality operator (==)

The "==" operator in JavaScript is used to compare two values for equality. It returns a boolean value of "true" if the values are equal, and "false" if they are not. The operator performs type coercion before making the comparison, which means that it will try to convert the values to a common type before comparing them.

5 == 5  // returns true
5 == "5"  // returns true

null == undefined  // returns true

"hello" == "hello"  // returns true

It's important to note that using the "==" operator can sometimes lead to unexpected results due to type coercion.

  • Here are the most important points regarding equality (==) operator in JavaScript:

  1. Type coercion: The == the operator performs type coercion, which means it automatically converts the operands to a common type before comparison. For example, if one operand is a string and the other is a number, the string will be converted to a number before comparison.

  2. Abstract equality: The == operator checks for abstract equality, which means it compares the values of the operands after converting them to a common type. This can lead to unexpected results, especially when comparing values of different types.

  3. Falsy values: In JavaScript, there are several values considered "falsy", which means they are considered false in a boolean context. These values include null, undefined, 0, NaN, '' (empty string), and false. When comparing these values with ==, they will all equal each other.

It's important to understand these points to write correct and predictable code when using the == operator in JavaScript.

  • Here are some unexpected examples of the double equals (==) operator in JavaScript:

  1. Comparing values of different types: JavaScript uses type coercion, which means that it will try to convert the values being compared to a common type before comparing them. For example:

     "5" == 5  // true
    
  2. Comparing an object to a primitive value: JavaScript will compare the object to its primitive value before making the comparison. For example:

     const object1 = { key: 'value' };
     const object2 = { key: 'value' };
    
     console.log(object1 == object2);
    
     //The output of this code will be false. This is because == compares objects by reference, not by value. In other words, == checks if object1 and object2 refer to the same object in memory, not if they have the same properties and values.
    
  3. Comparing NaN to itself: NaN is a special value that represents "Not a Number" in JavaScript. NaN is not equal to any value, including itself. However, when using the double equals operator, NaN is equal to NaN:

     NaN == NaN   // false
    
  4. Comparing null and undefined: While both null and undefined represent "no value" in JavaScript, they are not equal to each other when using the double equals operator:

     null == undefined   // true
    
  5. Comparing two arrays: compares arrays by reference, not by value. To compare arrays by value, you can use the same deep comparison function as with objects:

     const array1 = [1, 2, 3];
     const array2 = [1, 2, 3];
    
     console.log(array1 == array2);
    
     //The output of this code will also be false. Just like with objects, == compares arrays by reference, not by value. To compare arrays by value, you can use the same deep comparison function as with objects:
    
  • The strict equality operator (===)

The === operator in JavaScript is the strict equality operator. It tests for equality between its operands, and returns true if the operands are equal and of the same type.

The === operator checks for both equality and type compatibility between the operands. For example, if you compare the number 1 to the string '1' using the === operator, it will return false, because they are not of the same type.

On the other hand, the == (loose equality) operator performs type coercion, which means it converts the operands to a common type before comparison. This can lead to unexpected results, especially when comparing values of different types.

console.log(5 === 5);   // Output: true
console.log(5 === "5");  // Output: false
console.log(true === true);   // Output: true
console.log(null === undefined);  // Output: false
console.log({a:1} === {a:1});   // Output: false
console.log([1, 2, 3] === [1, 2, 3]);  // Output: false

In general, it's recommended to use the strict equality operator === instead of the loose equality operator == to ensure accurate and predictable comparison results in JavaScript.

  • Here are the most important points about the === operator in JavaScript:

  1. Strict equality: The === operator performs strict equality comparison, which means it checks both the value and the type of the operands. It only returns true if both operands have the same value and type.

  2. No type coercion: The === operator does not perform type coercion, which means that it does not automatically convert the operands to a common type before comparison. This helps prevent unexpected results and makes the comparison more predictable.

  3. Improved code reliability: By using the === operator, you can write code that is more robust and less prone to bugs, because it ensures that values are compared accurately and without unintended type coercion.

  4. Better performance: The === operator can be faster than the == operator because it does not require type coercion, which can be a slower process.

  5. Recommended usage: It is generally recommended to use the === operator in place of the == operator for accurate and reliable comparisons in JavaScript.

By understanding these points, you can write better and more efficient code that makes use of the === operator in JavaScript.

  1. Here are some unexpected examples of the triple equals (===) operator in JavaScript:

  2. Comparing NaN: NaN is considered unique in JavaScript and comparing NaN to anything, even NaN, will always return false. However, if we use the "===" operator, it will return true when comparing NaN to NaN.

     console.log(NaN === NaN); // Output: false
    
  3. Comparing objects: When comparing objects in JavaScript, the equality operator "==" compares only their references, not their values. However, the strict equality operator "===" compares both the reference and value of the objects.

     const object1 = {name: "John"};
     const object2 = {name: "John"};
    
     console.log(object1 === object2); // Output: false
    
  4. Comparing null and undefined: In JavaScript, null and undefined are two distinct values. The equality operator "==" considers null and undefined equal, but the strict equality operator "===" considers them distinct.

     console.log(null === undefined); // Output: false
    

Here is a table that summarizes the differences between the == and ===

Comparison== (loose equality)=== (strict equality)
DefinitionCompares values for equality after performing type coercion to a common type.Compares values for equality and type compatibility, without type coercion.
Type coercionPerforms type coercionDoes not perform type of coercion
ResultReturns true if the values are equal after type coercionReturns true if the values are equal and of the same type
Falsy valuesFalsy values such as '', 0, false, null, undefined, and NaN are considered equal to each other.Falsy values are only equal to themselves and not to each other.

CONCLUSION

It's important to note that these unexpected behaviors of the double equals operator can lead to bugs and unpredictable results in your code, so it's generally recommended to use the triple equals (===) operator instead, which performs an equality comparison without type coercion.