“The Newbies of Little Wo Shan” provides front-end developers with technical information and a series of basic articles. For a better user experience, please go to xhs-rookies.com/ to learn the latest articles.

Many developers get their heads up when they see the word implicit casting. And all kinds of tricks when it is converted, I believe that the developers are suffering from its torture.

Next, this article will provide a systematic summary of official ECMAScript documents and popular articles on various websites to help you understand them thoroughly after reading them.

To highlight

There are only two things you need to know!

  1. To which classes will the type be converted?
  2. When to convert to which?

Type conversions in mathematical operators

As we all know, there is no type declaration in JS, so any two variables or literals can be added, subtracted, multiplied and divided.

1. Subtraction, multiplication and division

When we perform mathematical operations on various non-number types (- * /), we first convert non-number types to Number types.

1 - fasle // 1, first convert false to the number 0, then execute 1-0
null / 1 // 0, first converts null to the number 0, and then executes 0/1
1 * undefined // NaN, where undefined converts to a number NaN
Copy the code

2. The particularity of addition

Remember three rules (from highest to lowest) :

  • When a side forStringType that is recognized as string concatenation and will preferentially convert the other side to string type.
  • When a side forNumberType, the other side is the original type, the original type is converted toNumberType.
  • When a side forNumberType, on the other side is the reference type, which references the type andNumberType to string concatenation.
1 + '1' // '11' (rule 1)
1 + null // 1 (rule 2)
1 + true // 2 (rule 2)
1 + {} // '1[object object]'
Copy the code

Note: Primitive type (undefined, NULL, String, number, Boolean, symbol(new in ES6))

Reference types (Object, Array, Date, RegExp, and Function) are collectively called Object types

Type conversions in logical statements

When we use an if while for statement, we expect the expression to be a Boolean, so implicit type conversions must accompany it.

1. Single variable

Here’s a tip:

{}, [];}, {}, [];}

2. Use the 5 rules from the == comparison

  • Rule 1: NaN comparisons to any other type always return Fasle (including itself)

    NaN= =NaN // false
Copy the code

  • Rule 2: Compare Boolean to any other type. Boolean is first cast to Nmuber

    true= =1 // true
true= ='1' // false, instead of making '1' true first
Copy the code

  • Rule 3: Compare String and Number. First convert String to Number

    1= ='1' // true, '1' becomes 1 first
' '= =0 // true, '' becomes 0 first
Copy the code

  • Rule 4: Null == undefined is true. Otherwise, null, undefined, and any other comparison is false.

    null= =undefined // true
null= =' ' // false
null= =1 // false
null= =false // false
undefined= =' ' // false
undefined= =1 // false
undefined= =false // false
Copy the code

  • Rule 5: When a primitive type is compared to a reference type, the reference type is converted to the primitive according to ToPrimitive(found in section 7, section 1 of the official documentation)

    The ToPrimitive rule, which converts a reference type to a primitive type, follows the valueOf then toString pattern, expecting a primitive type

    '[object Object]'= = {}// Reference type gets a type from toString
'1, 2, 3, 4'= = [1.2.3.4] / / same as above
Copy the code

Headphones!

  1. [] = =! []
  • Step 1:! [] will become false
  • In this case, it becomes [] == false
  • Step 2: According to rule 2, the Boolean type is converted to 0 first
  • In this case, it becomes [] == 0
  • Step 3: According to rule 5, ToPrimitive is called. [] calls valueOf, which returns []
  • ToString, returns “;
  • In this case, it becomes ” == 0
  • Step 4: According to rule 3, string is converted to number and “” is converted to 0 and therefore true
  1. [] + {}

  • Step 1: [] Calls toString to return”

  • Step 2: {} call toString to return ‘[object object]’

    So the final answer is ‘object object’

conclusion

Now let’s go back to our two previous questions

1. Only Boolean or Number or String will be converted

2. Two scenarios, data type and logical type, are converted according to related rules

Supplement: The ToPrimitive rule applies to reference conversions. Usually, valueOf is called first, then toString is called. When valueOf is called, if it returns a non-primitive type, then toString is called. It is a TypeError.

Use a picture to give you a perfect summary

type value to Boolean to Number to String
Boolean true true 1 “true”
Boolean false false 0 “false”
Number 123 true 123 “123”
Number Infinity true Infinity “Infinity”
Number 0 false 0 “0”
Number NaN false NaN “NaN”
String “” false 0 “”
String “123” true 123 “123”
String “123abc” true NaN “123abc”
String “abc” true NaN “abc”
Null null false 0 “null”
Undefined undefined false NaN “undefined”
Function function(){} true NaN “function(){}”
Object {} true NaN “[object Object]”
Array [] true 0 “”
Array [“abc”] true NaN “abc”
Array [” 123 “] true 123 “123”
Array [“123″,”abc”] true NaN “123,abc”

Thank you

Finally, thanks to the help of the two bloggers, I can stand on the shoulders of giants to make a conclusion that is expected to help everyone.

Js implicit boxing – ToPrimitive | {XFE} (sinaad. Making. IO)

[JavaScript implicit type conversion, one is enough! (freecodecamp.org)] (chinese.freecodecamp.org/news/JavaSc… – implicit-type-conversion/)

If you have any doubts about this article, git the official documentation

ECMAScript 2015 Language Specification — ECMA-262 6TH Edition (ECMA-international.org)