Many people, including me, resist this question 😡 because FOR a long time I couldn’t figure out the rules of == and ===. If you don’t understand the == and ===, you should read this article at least not see the two operators feel sick 🤢.

Another thing to note is that the English name of == is Abstract Equality Comparison; Equals equals equals equals Strict Equality Comparison.

So without further ado, let’s get started

The = = operator

Basic rules for the == operator

The first thing to notice is this

  • If the two items being compared are of the same type, == returns the result of the execution of the === operator. For example, 🌰2 = = 3And it will come back2 = = = 3Execution result of
  • If the two items being compared are of different types, == casts one or both of them and then compares. Such as2 = = '3'It will become a2 = = 3You end up comparing2 = = = 3

That’s the basic rule

The == operator’s specific conversion rules

Then let’s look at the specific conversion rules ⬇️ :

Overview of the overall process

  1. If the type is the same, call= = =The operator
  2. If the type is different, try a conversion
    1. Check whetherundefined 和 nullTo compare
    • ✅ returntrue
    • ⬇️ if not proceed to the next rule
    1. Are you comparingstring 和 number
    • ✅ If yes, then willstringtonumberAnd go back and re-compare ♻️
    • ⬇️ if not proceed to the next rule
    1. See if there are any of the items we are comparingboolean
    • ✅ If yes, then willbooleantonumberAnd go back and re-compare ♻️
    • ⬇️ if not proceed to the next rule
    1. Check to see if any of the entries areobject
    • ✅ If yes, then willobjectConvert to its original valueprimitiveAnd go back and re-compare ♻️
    • ❌ If not, only returnfalseThe 💩

To name a few 🌰 :

So the transformation rules are not very clear 😳

Attached is a map of conversion rules, just take a look if you forget, of course, under normal circumstances should use === instead of == to avoid unnecessary trouble:

Ecma specifications: http://www.ecma-international.org/ecma-262/6.0/#sec-abstract-equality-comparison

Type conversion

In the process of comparison, it involves conversion of type, such as string to integer, Boolean to integer, and obtaining the original value of the object, and so on. See how these different types are converted to each other:

Gets the original value of the object

Let’s look at how the object is converted to the original value:

The ToPrimitive method has an optional parameter, PreferredType, which specifies the desired type. If the object corresponding to the first parameter can be converted to more than one type, the latter can be used as an indication of what type the object should be converted to

    1. By default (Expected type defaults tonumber)
      1. callvalueOfMethods:
      • ✅ If the original value is returned, use this
      • ⬇️ If not the original value is returned, skip to the next step
      1. calltoStringMethods:
      • ✅ If the original value is returned, use this
      • ❌ Otherwise, an error is reported 💩
    1. If the expected type isstring:
      1. calltoStringMethods:
      • ✅ If the original value is returned, use this
      • ⬇️ If not the original value is returned, skip to the next step
      1. callvalueOfMethods:
      • ✅ If the original value is returned, use this
      • ❌ Otherwise, an error is reported 💩
    1. If the object is of type Date (the expected type isstring) :
      1. calltoStringMethods:
      • ✅ If the original value is returned, use this
      • ⬇️ If not the original value is returned, skip to the next step
      1. callvalueOfMethods:
      • ✅ If the original value is returned, use this
      • ❌ Otherwise, an error is reported 💩

In simple terms, valueOf is called by default, followed by toString; If the object is of type Date or the object’s expected type is string, the toString method 😪 is called first

🌰🌰🌰, to name a few:

For ordinary objects, the valueOf method is called first, and the result returned is not the original value, so the toString method is called

Suppose we rewrite the valueOf method so that both valueOf and toString return the raw valueOf string. Using the == operator, you can see that the object still uses the value returned by valueOf in preference

In the same way as the array above, valueOf is called by default first, or toString if it is not a raw value

The same goes for this array of items of many types 🐽

If you look at the Date type, its expected type is string so the toString method is called first, and it returns a raw value, so that’s the raw value

Is converted to a number

Let’s look at the rules for converting to number:

  1. undefined 👉 NaNIf it is undefined, it is directly converted to NaN
  2. null 👉 0If it is null, it is converted to 0
  3. boolean 👉 0/1If Boolean, convert to 0 or 1
  4. string 👉 0/NaN/(parse to number)A string is converted to number, an empty string to 0, and an unconverted NaN
  5. object👉 first gets the original value and then converts it to number

See a few 🌰 :

Convert a string

The rules for converting to string are:

  1. undefined 👉 'undefined'
  2. null 👉 'null'
  3. number 👉 'number
  4. boolean 👉 'true'/'false'
  5. object👉 first gets the raw value and then converts it to string

Converted to Boolean

Frequently asked questions: Which are Falsy and which are Truthy:

❌ The following are falsy in JS and the rest are truthy

  1. undefined 👉 falsy
  2. null 👉 falsy
  3. 0 👉 falsy
  4. "" 👉 falsy
  5. NaN 👉 falsy

So the conversion rules are as follows:

  1. undefined 👉 false
  2. null 👉 false
  3. number👉 When the value is 0falseOtherwise, fortrue
  4. string👉 if it is an empty stringfalseOtherwise, fortrue
  5. object 👉 true
  6. array 👉 true
  7. Date 👉 true

🦐🍜 are a few examples:

Here is a list of conversion rules for different types:

I’ll leave it there. Basically, this is what == and type conversions look like ❕

EOF

Reference:

  • http://www.cnblogs.com/178mz/p/5083228.html?utm_medium=referral
  • http://www.ecma-international.org/ecma-262/6.0/#sec-abstract-equality-comparison
  • https://www.codementor.io/javascript/tutorial/double-equals-and-coercion-in-javascript