Implicit type conversion

"Novices of Xiaoheshan", provide front-end developers with technical information and a series of basic articles. For a better user experience, please move to our official website rookies (xhs-rookies.com) to learn and get the latest articles in time.

When they see the term implicit type conversion, many developers are already big-headed. And the various tricks of its conversion, I believe that developers have suffered even more.

Next, this article will systematically summarize the ECMAScript official documents and highly praised articles on major websites, and be sure to help everyone thoroughly master this knowledge point after reading it.

Focus

You only need to figure out two questions!

1. types of 160c05ff99f5e7 types will be converted to?
2. be converted to which type?

Type conversion 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. Subtract, multiply, and divide

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

1 - fasle // 1, 首先将 false 转换为数字 0 , 然后再执行 1 - 0
null / 1 // 0, 首先将 null  转换为数字 0 , 然后再执行 0 / 1
1 * undefined // NaN, undefined 转换为数字是NaN

2. The particularity of addition

Remember three rules ( priority from high to low ):

• When one side is of String , it is recognized as a string splicing, and the other side will be converted to a string type first.
• When one side is of Number and the other side is of primitive type, the primitive type is converted to type Number
• When one side is Number type and the other side is reference type, the reference type and Number type are converted into strings and then spliced.

1 + '1' // ’11’ （规则1）
1 + null // 1 (规则2)
1 + true // 2 (规则2)
1 + {} // '1[object object]'(规则3)

Note: Original type ( undefined , null , string , number , boolean , symbol (new in es6))

Reference type ( Object , Array , Date , RegExp , Function ) collectively referred to as Object type

Type conversion in logical statements

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

1. A single variable

Here is a small :

Only null undefined '' NaN 0 false these are false , other cases are true , such as {} , [] .

2. Use == 5 rules in

• Rule 1: NaN and any other type comparison will always return fasle (including itself)

  NaN == NaN // false

• Rule 2: Boolean with any other type, Boolean will first be converted to Nmuber type

  true == 1 // true
  true == '1' // false, 先把 true 变成 1，而不是先把 ‘1’     变成true

• Rule 3: String and Number , first convert String to Number type

  1 == '1' // true, '1' 会先变成 1
  '' == 0 // true, '' 会首先变成 0

• Rule 4: null == undefined comparison is true , in addition, null , undefined and any other value comparison results are false .

  null == undefined // true
  null == '' // false
  null == 1 // false
  null == false // false
  undefined == '' // false
  undefined == 1 // false
  undefined == false // false

• Rule 5: When the primitive type is reference type, the reference type will be converted to the primitive type ToPrimitive ( can be found in the first section of the seventh chapter of the official document

  ToPrimitive rule is a rule for the conversion of a reference type to a primitive type. It follows the valueOf of toString first and then 060c05ff99fa40, expecting a primitive type

  '[object Object]' == {} // 引用类型通过 toString 得到一个类型
  '1,2,3,4' == [1, 2, 3, 4] // 同上

Practice your hands

1. [ ] == ! [ ]

• The first step: ![] will become false
• At this time, it becomes [] == false
• Step 2: According to rule 2, the Boolean type will first be converted to 0
• At this time, it becomes [] == 0
• The third step: According to rule 5, the ToPrimitive rule will be called at this time, [] calls valueOf and returns [], which is not a primitive type, so continue to call
• toString, return'';
• At this time, it becomes'' == 0
• Step 4: According to rule 3, string is converted to number, and ”is converted to 0
So true

2. [ ] + { }

• The first step: [] Call toString to return''

• Step 2: {} Call toString return '[object object]'

  So the final answer is 'object object'

to sum up

Now look back at our two previous questions

1. In the end it will only be converted to Boolean or Number or String

2. Two scenarios, data type and logic type, corresponding to relevant rules for conversion

Supplement: The ToPrimitive rule occurs in reference type conversion. Usually the valueOf method is called first, and then the toString method is called. After valueOf is called, if the return is not a primitive type, continue to call the toString method. If the return is not a primitive type, a TypeError is reported.

Quote a picture for everyone to make a perfect summary

Types of	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

Finally, I would like to thank the two bloggers for their help in the article, and stand on the shoulders of giants and make a summary that can help everyone.

js implicit boxing-ToPrimitive | {XFE} (sinaad.github.io)

JavaScript implicit type conversion, one article is enough! (freecodecamp.org)

If you have any doubts about this article, please refer to the official git document

ECMAScript 2015 Language Specification – ECMA-262 6th Edition (ecma-international.org)